มีแค่ SVG ก็เพียงพอ

 (jon.recoil.org)
2 คะแนน โดย GN⁺ 2025-12-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • SVG เป็นฟอร์แมตกราฟิกเวกเตอร์แบบ XML ที่เรียบง่าย รองรับแทบทุกแพลตฟอร์ม และสามารถ ฝังสคริปต์เพื่อสร้างการแสดงผลเชิงโต้ตอบ ได้
  • เครื่องมือแสดงผลแบบ SVG ที่สร้างขึ้นจากงานวิจัย เครือข่ายไมซีเลียม ในอดีต ยังทำงานได้อย่างสมบูรณ์บนเบราว์เซอร์สมัยใหม่แม้เวลาจะผ่านไปแล้ว 20 ปี ซึ่งพิสูจน์ให้เห็นถึง ความทนทานของฟอร์แมต
  • เพียงไฟล์ SVG แบบพึ่งพาตนเองได้ครบถ้วน ไฟล์เดียว ก็สามารถทำการโหลดข้อมูล ประมวลผล สร้างภาพ และโต้ตอบทั้งหมดได้ฝั่งไคลเอนต์
  • ในความเชื่อมโยงกับแนวคิด “4P” ของ Anil (Permanence, Provenance, Permission, Placement) จึงเน้นย้ำถึงความคงทน ความเข้ากันได้กับระบบจัดการเวอร์ชัน การแยกสิทธิ์ และพลังในการแสดงผลเชิงพื้นที่ของ SVG
  • ด้วยสมรรถนะการประมวลผลของเบราว์เซอร์ยุคใหม่ที่ดีขึ้น จึงเปิดทางให้ สามารถสร้างไปป์ไลน์การวิเคราะห์ข้อมูลทั้งชุดภายใน SVG ได้ และทำให้มันเป็นเครื่องมือสำคัญต่อการเผยแพร่งานวิจัยและการทำซ้ำผลลัพธ์

ศักยภาพของ SVG และอุดมคติของการตีพิมพ์งานวิทยาศาสตร์

  • SVG เป็นกราฟิกเวกเตอร์ในฟอร์แมต XML ที่เรียบง่าย แสดงผลได้คมชัดบนทุกอุปกรณ์ และสามารถ ฝังสคริปต์เพื่อสร้างคอนเทนต์แบบโต้ตอบ ได้
    • มันมี ความสามารถทรงพลัง ที่ผู้ใช้ส่วนใหญ่ไม่ทันสังเกต และยังสามารถนำไปใช้ให้เต็มศักยภาพได้มากกว่านี้
  • มีการเสนออุดมคติว่า บทความวิชาการ ควรมี สภาพแวดล้อมเชิงโต้ตอบที่สมบูรณ์ เพื่อรองรับการสำรวจข้อมูลและการทำซ้ำการทดลอง
    • แม้บางการทดลองจะทำซ้ำได้ยากทันทีเพราะข้อจำกัดด้านต้นทุนและเวลา แต่สำหรับ บทความด้านวิทยาการคอมพิวเตอร์ แนวคิดนี้สามารถทำให้เกิดขึ้นได้จริงเพียงพอ

การค้นพบเครื่องมือแสดงผล SVG จากเมื่อ 20 ปีก่อนอีกครั้ง

  • ระหว่างทำวิจัยหลังปริญญาเอกที่ภาควิชาพฤกษศาสตร์ มหาวิทยาลัยเคมบริดจ์ ได้สร้างเครื่องมือแสดงผลบน SVG สำหรับงานวิจัย ปฏิสัมพันธ์ร่วมของเครือข่ายไมซีเลียม
    • ออกแบบมาเพื่อให้สามารถสำรวจข้อมูลเครือข่ายไมซีเลียมที่เติบโตจริงในจานเพาะเชื้อเพทรีได้
  • เมื่อลองรัน SVG ดังกล่าวอีกครั้งในช่วงหลัง พบว่า โค้ดจากยุคที่ต้องใช้ Firefox 1.5 หรือ Adobe SVG plugin ยังทำงานได้สมบูรณ์บนเบราว์เซอร์สมัยใหม่
    • นี่เป็นตัวอย่างที่แสดงให้เห็นถึง ความเข้ากันได้ระยะยาวและความเสถียร ของฟอร์แมต SVG

โครงสร้างของ SVG แบบพึ่งพาตนเองได้อย่างสมบูรณ์

  • เพียงไฟล์ SVG ไฟล์เดียว ก็สามารถทำการโหลดข้อมูล ประมวลผล สร้างภาพ และโต้ตอบได้ทั้งหมด
    • สามารถดึงข้อมูลจากที่เก็บเวอร์ชันภายนอก หรือฝังไว้ภายในไฟล์โดยตรงก็ได้
    • การประมวลผลทั้งหมดเกิดขึ้นใน เบราว์เซอร์ฝั่งไคลเอนต์ และ ไม่จำเป็นต้องมีลอจิกฝั่งเซิร์ฟเวอร์
    • สามารถเผยแพร่และแชร์ได้ง่ายผ่านเว็บเซิร์ฟเวอร์แบบสแตติก

ความเชื่อมโยงกับ “4P” ของ Anil

  • Permanence (ความคงทน) : SVG สามารถ กำหนด DOI ได้ เช่นเดียวกับบทความหรือชุดข้อมูล และไฟล์ที่สร้างเมื่อ 20 ปีก่อนยังคงใช้งานได้ก็เป็นหลักฐานของเรื่องนี้
  • Provenance (การติดตามที่มา) : SVG เป็น ข้อความล้วน จึงเข้ากันได้กับระบบจัดการเวอร์ชันอย่าง Git และหากใช้ข้อมูลภายนอกก็สามารถใช้แนวทางติดตามที่มาแบบเดียวกันได้
  • Permission (การจัดการสิทธิ์) : ข้อมูลและลอจิกการประมวลผลแยกจากกัน จึงสามารถใช้ โมเดลสิทธิ์ แบบเดียวกับข้อมูลทั่วไปได้
  • Placement (มิติของพื้นที่) : SVG มี การแสดงผลเชิงพื้นที่โดยเนื้อแท้ เช่น สามารถสร้างภาพ แผนที่โลก ได้อย่างง่ายดาย

พลังประมวลผลของเบราว์เซอร์ที่สูงขึ้นและความเป็นไปได้ใหม่

  • SVG ที่สร้างขึ้นเมื่อ 20 ปีก่อนเป็นเพียงเครื่องมือแสดงผลอย่างง่าย แต่ด้วย พลังการประมวลผลของเบราว์เซอร์สมัยใหม่ที่สูงขึ้น ปัจจุบันจึง สามารถสร้างไปป์ไลน์การวิเคราะห์ข้อมูลทั้งชุด ไว้ภายใน SVG ได้แล้ว
    • แม้เป็นการประมวลผลเบา ๆ ระดับที่พัดลมโน้ตบุ๊กแทบไม่ต้องหมุนก็ยังเพียงพอ

SVG ในระบบนิเวศการแบ่งปันงานวิจัย

  • ร่วมกับ Jupyter โน้ตบุ๊ก, Marimo botebooks, slipshow/x-ocaml, Forester, และ โปรเจกต์โน้ตบุ๊กส่วนตัว
    • SVG ได้กลายเป็นอีกหนึ่ง เครื่องมือที่ช่วยให้แชร์และนำผลการวิจัยไปประกอบใช้ใหม่ได้ง่าย
  • เครื่องมือเหล่านี้ล้วนเป็นส่วนหนึ่งของความพยายามต่อเนื่องเพื่อสร้าง สภาพแวดล้อมการวิจัยที่ทำงานร่วมกันได้และทำซ้ำผลลัพธ์ได้

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-13
ความคิดเห็นจาก Hacker News
  • แม้ประเด็นหลักจะเป็นเรื่องการทำ visualization แต่ก่อนหน้านี้เคยทำ ซอฟต์แวร์ออกแบบท่าเต้น มาก่อน
    โดยเรนเดอร์ UI ทั้งหมดด้วย SVG และมันทำงานได้ดีเกินคาด
    โปรเจกต์นี้ชื่อ StageKeep เดิมทีทำด้วย React Three Fiber ก่อนจะรีแฟกเตอร์มาเป็น SVG
    ได้แรงบันดาลใจจากแนวคิด Signed Distance Function และชอบไอเดียของ ฟังก์ชันเชิงอะตอม ที่รับอินพุตแล้วส่งออกเป็น SVG
    • เคยมีช่วงหนึ่งที่ SVG ถูกจับตามองในฐานะ ตัวแทนของ Flash
      ด้วย SVG + CSS + JavaScript เราทำแทบทุกอย่างที่ Flash เคยทำได้ แต่ไม่มี เครื่องมือสร้างงาน ที่ดีเท่า Flash
      สุดท้าย Flash ก็หายไป และก็ยังไม่มีอะไรมาแทนที่ตำแหน่งนั้นได้อย่างสมบูรณ์
    • ด้านล่างของเว็บเขียนว่า “Start free tiral” น่าจะพิมพ์ผิดจาก “trial” :)
    • ในฐานะผู้กำกับเวทีที่ทำงานกับ choreography คิดว่าถ้ามีเครื่องมือแบบนี้ไว้ วางแผนเส้นทางการเคลื่อนที่บนเวที ล่วงหน้าได้ก็คงยอดเยี่ยมมาก
    • เป็นโปรเจกต์ที่เจ๋งมาก เลยสงสัยว่าพอจะมีฟีเจอร์ ใช้ AI ดึง choreography อัตโนมัติจากวิดีโอ ได้ไหม
      เช่นวิเคราะห์แล้วนำเข้าท่าเต้นจากวิดีโอของ Project21 หรือ Avantgardey
    • สงสัยว่าเจ้าของโปรเจกต์เต้นด้วยตัวเองด้วยหรือเปล่า
  • ลองสรุปข้อเสียของ SVG ไว้ดังนี้
    • ตัดบรรทัดข้อความไม่ได้
    • ฝัง glyph ของฟอนต์ไม่ได้ — ถ้าเครื่องผู้ใช้ไม่มีฟอนต์นั้นก็จะอ่านไม่ได้
    • การรองรับเวอร์ชันและฟีเจอร์ต่างกันไปตามแต่ละเบราว์เซอร์
    • สามารถมี JS หรือ resource ภายนอกฝังอยู่ได้ จึงดูได้ยากใน สภาพแวดล้อมที่แยกเพื่อความปลอดภัย
      วิธีแก้คือมี SVG สองเวอร์ชัน: เวอร์ชันต้นฉบับสำหรับ Inkscape และ เวอร์ชันสำหรับแจกจ่าย ที่แปลงข้อความเป็นเส้นโค้งแล้ว
    • ยังมีปัญหาอื่นอีกมาก
      การเรนเดอร์ต่างกันระหว่างเบราว์เซอร์ทำให้ได้ผลลัพธ์ที่สม่ำเสมอยาก และ SVG ที่ซับซ้อนก็มักมีปัญหา memory leak หรือ ความเร็วในการเรนเดอร์ตกลงมาก
      นอกจาก Inkscape แล้ว บนลินุกซ์ก็แทบไม่มีเอดิเตอร์ที่ใช้การได้
      ถึงอย่างนั้นก็ยังใช้ SVG อยู่เพราะไม่มีทางเลือกที่ดีกว่า แต่พยายามทำให้มันเรียบง่ายที่สุดเท่าที่ทำได้
    • ถ้าฝัง HTML ด้วย <foreignObject> ก็จะ ตัดบรรทัดข้อความ ได้
      ใน SVG 2 มีแผนจะแก้ด้วยพร็อพเพอร์ตี inline-size
      การฝังฟอนต์ก็มีอยู่แล้วผ่านองค์ประกอบ <font> หรือการใส่ WOFF เป็น data URI
      แต่เรื่องอย่างเส้นฐานของข้อความหรือการควบคุมสเกลยังคงเป็น สเปกที่ไม่สมบูรณ์
      เอกสารที่เกี่ยวข้อง: SVG2 InlineSizeProperty, SVG11 Fonts
    • บน Safari สามารถฝัง ฟอนต์แบบ base64 encoded ผ่าน @font-face ใน <style> ได้
      แต่ไม่แนะนำเพราะขนาดไฟล์จะใหญ่ขึ้นมาก
    • ถ้าแปลงข้อความเป็นเส้นโค้งจะมีปัญหา เลือกข้อความไม่ได้
      บน Safari สามารถเลือกได้ถ้าใช้ <text> ดังนั้นไม่ว่าทางไหนก็ยังไม่ใช่คำตอบที่สมบูรณ์
  • ชอบวิสัยทัศน์ของการที่บทความวิทยาศาสตร์มาพร้อม สภาพแวดล้อมแบบ interactive ให้ผู้อ่านจัดการข้อมูลเองและทำการทดลองซ้ำได้
    บล็อก Illustrated Evo2 ของ NVIDIA ก็น่าประทับใจมาก
    • ทำให้นึกถึง งานวิจัย CloudSpecs ของเพื่อนร่วมงาน
      รูปทั้งหมดเชื่อมกับเว็บไซต์ และสามารถทำซ้ำในเบราว์เซอร์ได้ด้วย DuckDB + WebR + ggplot
      ตัวอย่าง: เดโม Figure 1
    • การรันการทดลองใหม่ในเบราว์เซอร์น่าจะทำได้เฉพาะ งานวิจัยที่อิงการสร้างแบบจำลอง
      แต่การเปิดให้สำรวจข้อมูลได้จากหลายมุมมองก็เป็นไอเดียที่น่าสนใจ
    • ดูเหมือนไม่ค่อยมีฟอร์แมตอื่นที่ใช้แทน SVG ได้เหมาะนัก
      PDF มีข้อจำกัดด้าน interactive และทั้ง Word กับ PDF ก็อ่อนเรื่อง การฝังมัลติมีเดีย
    • แค่ฝัง GIF หรือวิดีโอได้ก็น่าจะมีคุณค่ามากแล้ว
    • SVG ใช้เวลาเรนเดอร์นานเมื่อซับซ้อน จึง ไม่ค่อยเหมาะกับความเป็น interactive
      ถ้าต้องการแค่เวกเตอร์กราฟิก PostScript ก็อาจเป็นทางเลือกได้
  • ตอนรีนิวโปรเจกต์ “Spurious Correlations” เมื่อ 2 ปีก่อน ได้ทำ ตัวสร้างกราฟ SVG ด้วย Python ขึ้นมาเอง
    เพราะไม่ชอบเครื่องมือทำกราฟแบบ JS/PHP เดิม ๆ อย่าง pCharts, HighCharts ฯลฯ เลยเขียนเอง และมันก็ทำงานได้ดีอย่างน่าประหลาด
    คุณสร้าง SVG ที่สะอาดสวยได้ด้วยคณิตศาสตร์ล้วน ๆ และยังได้ การขยายแบบไร้ขีดจำกัด เป็นของแถม
    • ถ้ากำลังหาเฟรมเวิร์กทำกราฟด้วย JS ขอแนะนำ Observable Plot
      เป็นเครื่องมือจากผู้สร้าง D3 ที่กระชับและมี การใช้งาน API ที่ยอดเยี่ยม
      ไม่มี animation แต่เพียงพอมากสำหรับกราฟในงานวิจัย
    • เสียดายที่ Postscript ไม่ได้ถูกใช้อย่างแพร่หลายกว่านี้
      ในอีกเส้นเวลา มันอาจกลายเป็นมาตรฐานแทน HTML หรือ SVG ก็ได้
    • เว็บไซต์นี้ช่วยให้เอาไปใช้เป็น ตัวอย่างความสัมพันธ์ลวง ในคาบแรกของวิชาสถิติได้
    • คิดว่าวงการควรเลิกกลัวแนวคิดที่ว่า “ถ้าทำเองจะพังแน่” ได้แล้ว
  • งานชิ้นแรกของ Distill Augmented RNNs น่าประทับใจมาก
    เป็นตัวอย่างของการใส่ interaction แบบน้อยที่สุดด้วย D3.js บน SVG และเป็นครั้งแรกที่เห็นสไตล์ของ Shan Carter แล้วอยากไปร่วมทีมของเขา
  • เมื่อ 15 ปีก่อนเคยทำ คอนโทรลเลอร์เตาบาร์บีคิว ที่ใช้เซ็นเซอร์อุณหภูมิ 4 ตัวและอัลกอริทึมควบคุมแบบ PID
    ผ่าน HTTP server แบบฝังตัว จึงแสดงกราฟอุณหภูมิและหน้าปัดผ่าน เว็บ UI ที่ใช้ SVG ได้ ซึ่งทำงานร่วมกับ JS ได้ดี
    • เป็นโปรเจกต์ที่เจ๋งมาก สงสัยว่าเคยถ่ายวิดีโอตอนมันทำงานไว้ไหม
  • ในฐานะผู้เขียนบทความ จุดที่อยากเน้นตอนแก้บทความครั้งนี้คือ SVG ที่มีอายุ 20 ปีก็ยังใช้งานได้อยู่
    โค้ดอื่นที่เขียนในยุคนั้นส่วนใหญ่ต้องแก้ แต่ SVG ยังใช้ได้เหมือนเดิม
    • ช่วงแรก ๆ มันใช้งานยากเพราะ ความเข้ากันได้ของ SVG ระหว่างเบราว์เซอร์ ยังต่ำ
      แต่ตอนนี้แม้แต่ SVG เมื่อ 20 ปีก่อนก็ยังทำงานได้ในเบราว์เซอร์ส่วนใหญ่โดยไม่มีปัญหา
  • ชอบ SVG แต่ ปัญหาเรื่องความเร็ว ก็ยังมีอยู่
    ถ้าเป็น QR code หรือแผนที่ซับซ้อนที่มี DOM element เกิน 100 ตัวก็จะเริ่มช้า และ animation ก็ช้ากว่า canvas หรือ Lottie
    • เคยทำให้ ฝัง chess engine ไว้ใน SVG ของกระดานหมากรุก เพื่อให้มันเดินเองได้
      ลิงก์โปรเจกต์
      ในงานศิลปะจัดวางของเพื่อน มีการฉาย SVG กระดานหมากรุกหลายสิบอันพร้อมกัน และขีดจำกัดที่เบราว์เซอร์รับไหวก็ค่อนข้างต่ำ
    • ฉันเองก็เคยทำ ตัวดูแผนที่ด้วย SVG+JS ไว้ใช้ในเกม แต่พอความหนาแน่นของอ็อบเจ็กต์สูงขึ้นมันช้าเกินไป สุดท้ายเลยเปลี่ยนไปใช้ canvas
      แต่ก็ต้องแลกกับการเสียความสามารถบางอย่างของ SVG ไป
  • สงสัยว่ามี ฟอร์แมตน้ำหนักเบาคล้าย SVG สำหรับงาน 3D อยู่ไหม
    ตอนทำ visualization ของโมเดล CAD กำลังมองหาวิธี สะท้อนเฉพาะการเปลี่ยนแปลงบางส่วน โดยไม่ต้องส่งออกไฟล์ .step ทั้งหมด
  • ตอนทำ คู่มือประกอบ Shapeoko v2 CNC เคยใช้ SVG เพื่อให้ผู้ใช้คลิกชิ้นส่วนแล้ว ไฮไลต์ชิ้นส่วนนั้นในแบบภาพ
    ลิงก์ตัวอย่าง
    ทำด้วย Inkscape และทำงานได้ทันทีในเบราว์เซอร์
    • เป็นการทำที่เจ๋งมาก