SVG ที่ให้ความรู้สึกเหมือน GIF

 (koaning.io)
33 คะแนน โดย GN⁺ 2025-07-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ภาพ SVG แบบเคลื่อนไหว ยังคงความ ความละเอียดสูง ไว้ได้ ขณะเดียวกันก็มีขนาดไฟล์ เล็กมาก (49KB)
  • ให้ เอฟเฟกต์ภาพคล้าย GIF แบบเดิม แต่จริง ๆ แล้วใช้ความสามารถของ SVG animation
  • สามารถ ใช้งานได้โดยตรงแม้ในไฟล์ Github README.md
  • ใช้เครื่องมือ asciinema และ svg-term-cli เพื่อบันทึกเซสชันเทอร์มินัล → แปลงเป็น SVG animation ได้
  • ใช้องค์ประกอบ แอนิเมชันของ SVG (<animate>, <animateTransform>, <animateMotion>)

จุดเด่นของ SVG แบบเคลื่อนไหว

  • ภาพเคลื่อนไหวที่สร้างด้วย SVG ดูคล้าย GIF แบบเดิม แต่จริง ๆ แล้วใช้ความสามารถ แอนิเมชันแบบเวกเตอร์ของ SVG
  • วิธีนี้ทำให้ ขนาดไฟล์เล็กมาก และสามารถ ปรับขนาดหรือซูมได้โดยไม่เสียคุณภาพ
  • ข้อดีสำคัญคือสามารถนำไปใช้ได้ทันทีในที่อย่าง README.md ของ Github
  • ตัวอย่างที่ยกมาคือ parrot SVG แบบเคลื่อนไหวความละเอียดสูงที่มีขนาดเพียง 49KB

วิธีสร้าง

  • บันทึกเซสชันเทอร์มินัลผ่าน asciinema
  • นำไฟล์ asciinema ที่บันทึกไว้มาแปลงด้วยเครื่องมือ svg-term-cli เพื่อสร้างไฟล์ SVG animation
  • ไฟล์ SVG ที่สร้างขึ้นสามารถเพิ่มลงใน README.md ได้อย่างง่ายดาย
  • ผู้เขียนกำลังใช้วิธีนี้อย่างจริงจังในหลายโปรเจ็กต์ เช่น bespoken

หลักการทำงานของ SVG animation

  • ในสเปกของ SVG มี ความสามารถด้านแอนิเมชัน ฝังมาอยู่แล้ว
    • <animate>: ทำให้แอตทริบิวต์แต่ละรายการเคลื่อนไหวตามเวลา
    • <animateTransform>: ใช้กับแอนิเมชันการแปลง เช่น การหมุน การปรับขนาด และการย้ายตำแหน่ง
    • <animateMotion>: ทำให้วัตถุเคลื่อนที่ไปตามเส้นทาง
  • svg-term-cli ทำงานโดยอาศัยความสามารถแอนิเมชันที่มีอยู่ใน SVG เหล่านี้

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

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

 
GN⁺ 2025-07-09
ความคิดเห็นจาก Hacker News

  • กำลังทึ่งมากว่าแค่ใช้ SVG อย่างเดียวก็ทำงานที่หลากหลายและน่าประทับใจได้มากจริง ๆ ตัวอย่างที่เจอในวิกิพีเดียและสะดุดตาได้แก่ แอนิเมชันโคลน Missile Command, แผนที่ London Tube, แอนิเมชัน rolling shutter

    • SVG เดิมทีมีประวัติเริ่มต้นในฐานะคู่แข่งแบบเปิดของ Shockwave/Flash Player และเป็นฟอร์แมตแอปสำหรับ PDA อีกทั้งยังเคยมีการพิจารณาเพิ่มการรองรับเครือข่ายจริง ๆ ด้วย

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

    • สงสัยว่าทำไมลิงก์ Missile Command อันแรกถึงทำงานไม่ถูกต้องใน Safari กดปุ่มได้ แต่คลิกหัวรบแล้วไม่ตอบสนอง ใน Firefox ยังเห็นเคอร์เซอร์แบบกากบาท แต่ Safari เหมือนมีอะไรบางอย่างใช้ไม่ได้

    • ฟังก์ชัน checkbox ในแผนที่ Tube เจ๋งมาก ทำให้อยากฝึกสกิล SVG ให้มากขึ้น จดบุ๊กมาร์กไว้แล้ว

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

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

  • ถ้าเป้าหมายคือ Github README ก็สามารถฝังวิดีโอโดยตรงได้เหมือนกัน พร้อมยกตัวอย่างลิงก์ git-recent README แต่ถ้าเป็นแค่การแคปเจอร์เทอร์มินัลธรรมดา การใช้วิธี SVG ของ OP อาจเป็นตัวเลือกที่ฉลาดกว่า

    • ข้อดีของการใช้วิดีโอคือมี UI สำหรับเล่น/หยุด/เลื่อนสไลด์ บางแพลตฟอร์มก็เติม UI ควบคุมให้ GIF ด้วย JavaScript ได้ แต่เพราะเบราว์เซอร์ไม่ได้รองรับเป็นพื้นฐานจึงมีข้อจำกัด เลยเป็นเหตุผลที่บางครั้งชอบวิดีโอมากกว่า ตอนทำ SVG animation สำหรับ RevealJS ก็จะควบคุมด้วย CSS/JS ตามต้องการ

    • ถ้าจะเพิ่มไฟล์วิดีโอ การอัปโหลดผ่านการแก้ README บน Github โดยตรงเพื่อให้ไฟล์ไปเก็บบน githubusercontent ก็เป็นทางเลือกที่ดีกับขนาดของ repository ด้วย

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

    • มีการเอ่ยถึง Paul หลังจากไม่ได้พูดถึงมานาน พร้อมแสดงความชอบต่องานเก่าอย่าง Echo Nest และงานกับ Rdio API

    • ในความเห็นของฉัน ถ้าเป็นการแคปเจอร์เทอร์มินัล วิธี SVG ยังใช้งานจริงได้ไม่มากเพราะขาดความสามารถในการควบคุม เหมาะกับการอธิบาย motion สั้น ๆ ราว 5 วินาทีเพื่อเดโมซอฟต์แวร์ แต่ในบางกรณีวิดีโอก็อาจดีกว่า

  • ความสามารถในการคัดลอกข้อความได้ตรงจากแอนิเมชันดูเป็นสิ่งที่ไม่ได้ชัดเจนในทันที แต่กลับดูเป็นฟีเจอร์ที่เจ๋งที่สุด

    • ถ้าแอนิเมชันหยุดชั่วคราวได้เมื่อเอาเมาส์ไปชี้ก็คงน่าสนใจยิ่งขึ้น แต่ถ้าเทอร์มินัลมีการเลื่อนหน้าจอ ความสามารถคัดลอก/วางก็อาจกลายเป็นความท้าทายในแง่การใช้งานจริง

  • มีคำเตือนว่า SVG บางไฟล์มีบั๊กที่ทำให้หน้าเว็บค้างได้ ดังนั้นควรหลีกเลี่ยงการฝังลิงก์ SVG จากบุคคลที่สาม ทั้งฝั่ง Google Chrome และ Firefox ก็ไม่มีแผนจะแก้บั๊กนี้ พร้อมแนบ ตัวอย่าง SVG อันตรายสำหรับทดสอบ แต่เตือนว่าคลิกแล้วเบราว์เซอร์อาจล่ม

    • มีความเห็นว่าปัญหาหน้าเว็บหรือเบราว์เซอร์ค้างไม่ใช่ประเด็นด้านความปลอดภัยเสียทีเดียว แต่เป็นเรื่องทั่วไปที่เกิดได้จากการใช้ฟังก์ชันในตัวหลายแบบมากเกินไป ตัวอย่างเช่นการใช้ blur filter chain ยาว ๆ อาจทำให้เรนเดอร์หนักจน Chrome ค้างได้ ถ้าผลกระทบลามเกินแท็บก็ยิ่งแย่ แต่โดยพื้นฐานแล้วน่าจะเป็นปัญหาด้านการใช้งาน UI มากกว่า

    • มีคนตั้งคำถามว่าช่องโหว่ที่เกี่ยวกับ SVG แบบนี้ เช่นการโจมตี XXE ยังทำได้หรือไม่ในสภาพแวดล้อมที่ถูกจำกัดอย่าง Github README และถ้าทำได้ Github ป้องกันไว้อย่างไร

  • ความจริงที่ว่า "SVG เป็นแอนิเมชันโดยเนื้อแท้" ทำให้รู้สึกสดใหม่มากและจุดประกายไอเดียหลายอย่าง เลยสงสัยว่าสามารถทำให้เล่นวนไม่สิ้นสุดได้หรือไม่

    • ตั้งค่า repeatCount หรือ repeatDur ของแท็ก <animate> เป็น indefinite ก็ทำให้เล่นวนไม่สิ้นสุดได้ เนื่องจากการวนเป็นระดับแอตทริบิวต์ องค์ประกอบแต่ละส่วนของภาพจึงขยับคนละจังหวะกันได้

    • มีการแชร์โค้ดตัวอย่างที่ดูได้จาก เอกสารทางการของ SVG animation

    • นอกจากแอนิเมชันแบบอิงแอตทริบิวต์แล้ว SVG ยังฝัง Ecmascript (Javascript) ได้ด้วย จึงสามารถเติมฟังก์ชันอะไรก็ได้ผ่านสคริปต์ตามต้องการ เอกสารสคริปต์ของ W3C

    • มีการแชร์ ตัวอย่างและโค้ดตัวอย่าง SVG animation เพิ่มเติมด้วย บางอันจะเห็นเมื่อรีเฟรชหน้าเว็บ

  • มีคนฝันถึงระบบที่ในอนาคตเบราว์เซอร์จะรองรับการเสียบ execution engine อะไรก็ได้ เช่น WASM, JVM, CLR โดยให้ผลลัพธ์ออกมาเป็น SVG (ข้อความ/ไบนารี) เพื่อให้นักพัฒนาเลือกจับคู่ execution model กับ view ได้อย่างอิสระ และไม่ต้องผูกติดกับ DOM อีกต่อไป

    • แอปอย่าง AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, Flutter for Web(CanvasKit) ก็เข้าใกล้วิธีนี้อยู่แล้ว เพราะเลือกเลี่ยง DOM หรือใช้ rendering engine แบบอื่น กล่าวคือเราไม่ได้อยู่ในยุคที่ DOM เป็นข้อบังคับเพียงอย่างเดียวแล้ว

    • ในอดีตเคยมี runtime จากภายนอกอย่าง Flash, Java, Silverlight, ActiveX ที่ครองเว็บ แต่ตอนนี้หลายคนยังเชื่อว่าการมีภาษา/แพลตฟอร์มร่วมกันคือข้อได้เปรียบ และในสภาพแวดล้อมด้านความปลอดภัยทุกวันนี้ เทคโนโลยีเสริมแบบยุคก่อนก็อยู่รอดได้ยาก

    • ข้อดีของ DOM (HTML) คือออกแบบให้ตอบสนองต่อสภาพแวดล้อมการแสดงผลที่หลากหลายได้ดี ส่วน SVG มีอิสระด้านนี้น้อยกว่า

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

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

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

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