สิ่งเจ๋ง ๆ ที่ทำได้ด้วย SVG

 (fuma-nama.vercel.app)
3 คะแนน โดย GN⁺ 2025-04-13 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • SVG เป็นเครื่องมือทรงพลังสำหรับการแสดงกราฟิกแบบเวกเตอร์บนเว็บ
  • สามารถทำให้องค์ประกอบ SVG น่าสนใจยิ่งขึ้นได้ด้วย แอนิเมชัน
  • สามารถใช้ มาสก์ เพื่อเน้นหรือซ่อนบางส่วนขององค์ประกอบ SVG ได้
  • สามารถทำ TOC ได้ด้วย การเรนเดอร์ฝั่งเซิร์ฟเวอร์ โดยไม่ต้องใช้ JavaScript ฝั่งไคลเอนต์
  • สามารถผสาน CSS และ SVG เพื่อสร้างองค์ประกอบแบบอินเทอร์แอ็กทีฟได้

แอนิเมชัน SVG

  • SVG ใช้สำหรับแสดงกราฟิกแบบเวกเตอร์บนเว็บ
  • มีโค้ดตัวอย่างที่เขียนด้วย JSX (React)
  • สามารถใช้ line หรือ path เพื่อสร้างเส้น และใช้เส้นนั้นเป็นมาสก์เพื่อเพิ่มแอนิเมชันได้
  • สามารถกำหนดแอนิเมชันด้วย @keyframes และเปลี่ยนตำแหน่งขององค์ประกอบผ่านพร็อพเพอร์ตี transform ได้
  • สามารถนำส่วนที่ออกแบบไว้ใน Figma หรือโปรแกรมแก้ไข SVG อื่น ๆ มาใช้เป็นบล็อกแอนิเมชันแบบมาสก์ได้

สารบัญสไตล์ Clerk

  • นำสารบัญสไตล์ Clerk ไปทำใน Fumadocs
  • เรนเดอร์สารบัญบนเซิร์ฟเวอร์เพื่อให้รองรับ SSR โดยไม่ต้องใช้ JavaScript ฝั่งไคลเอนต์
  • เรนเดอร์สารบัญในสภาพแวดล้อมฝั่งเซิร์ฟเวอร์ที่ไม่สามารถรู้ตำแหน่งที่แน่นอนขององค์ประกอบได้ โดยใช้การจัดวางแบบ absolute
  • เพิ่มส่วนแอนิเมชันชื่อ thumb เพื่อเน้นรายการที่กำลังใช้งานอยู่
  • ใช้ข้อมูลตำแหน่งที่เรนเดอร์จากฝั่งไคลเอนต์มาสร้าง "mask map" ด้วย SVG
  • ใช้พร็อพเพอร์ตี mask-image เพื่อมาสก์บล็อก div ที่มีแอนิเมชัน แล้วเรนเดอร์ส่วนที่ถูกเน้นของสารบัญ

ได้แรงบันดาลใจจาก Clerk เพื่อทำสารบัญของเว็บไซต์เอกสารให้น่าสนใจยิ่งขึ้น

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

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

 
ndrgrd 2025-04-14

ดูเท่อยู่หรอก แต่ถ้าเน้นให้ชัดแค่รายการปัจจุบันรายการเดียวน่าจะสะดุดตากว่า
 
GN⁺ 2025-04-13
ความคิดเห็นจาก Hacker News

  • งานบรรยาย "SVG Can Do That?" ของ Sarah Drasner แม้จะผ่านไป 8 ปีแล้วก็ยังทำให้หลายคนประหลาดใจอยู่เสมอ CSS พัฒนาไปมากตั้งแต่นั้นมา แต่ยังไม่ค่อยมั่นใจว่า SVG เองพัฒนาไปมากแค่ไหน อย่างไรก็ตาม แนะนำอย่างยิ่ง

  • หนึ่งในสิ่งสนุก ๆ ที่ทำได้ด้วยไฟล์ SVG คือการใช้เอนทิตีใน inline DTD เพื่อกำหนดค่าคงที่ที่แชร์ร่วมกันได้หลายจุดในไฟล์ ดูตัวอย่างที่ดีได้จากหน้า "Squares in Squares" ของ David Ellsworth

    • เบราว์เซอร์หลัก ๆ ไม่มีปัญหาในเรื่องนี้ แต่เครื่องมือบางตัวอย่าง Inkscape จะไม่ parse DTD หรือขยายเอนทิตี
    • kingbird.myphotos.cc/packing/squares_in_squares.html

  • SVG แบบแอนิเมชันที่ซับซ้อนนั้นสนุก แต่ก็ทำได้ยากเพราะความซับซ้อนของ SMIL และปัญหาอย่าง Safari มีปัญหาเมื่อไม่มี 0 นำหน้าค่าทศนิยม

  • "A Deep Dive Into SVG Path Commands" ของ Nanda Syahrasyad มีประโยชน์มากในการทำความเข้าใจว่า SVG path ถูกประกอบขึ้นอย่างไร แม้จะเป็นเนื้อหาจากเกือบ 2 ปีก่อน แต่ก็ช่วยเปิดหูเปิดตาเกี่ยวกับทุกสิ่งที่ SVG ทำได้และวิธีทำ

  • ถ้าใครกำลังใช้ JS อย่างสร้างสรรค์เพื่อสร้าง SVG แบบไดนามิก กรุณาส่ง DM มาหาผม

  • เคยทำงานสนุก ๆ กับ SVG ในโปรเจกต์ที่สร้างด้วย React มีทั้งชุดภาพประกอบแบบนิ่งและองค์ประกอบแบบแอนิเมชัน และสีถูกควบคุมจาก CMS

  • SVG+CSS ทรงพลังมาก หนึ่งในฟีเจอร์ง่าย ๆ ที่ผมชอบคือการสร้างไดอะแกรมที่รองรับโหมดมืด/สว่างโดยไม่ต้องใช้ JavaScript ตัวอย่างไดอะแกรม: blog.davidv.dev/posts/ipvs-lb/

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

    • อ้อ คือ Axidraw ของ Evil Mad Scientist Labs เป็นอุปกรณ์ที่ยอดเยี่ยมและทีมก็เจ๋งมาก

  • เป็นโพสต์ที่ยอดเยี่ยม และดีไซน์ของเว็บไซต์ก็สวยมาก SVG มีมานานแล้ว แต่ยังรู้สึกว่าศักยภาพของมันยังไม่ถูกดึงออกมาใช้จนหมด นึกไม่ออกว่ามีองค์ประกอบอื่นไหนที่สามารถ encapsulate HTML, CSS, JS ได้อย่างเป็นฟังก์ชันแบบนี้ โดยพื้นฐานแล้วมันใช้งานได้ง่ายราวกับเป็นเอกสาร HTML อีกชุดหนึ่งเต็ม ๆ

  • SVG ให้ความรู้สึกเหมือนเป็นพื้นที่ที่ยังไม่ได้รับการสำรวจและใช้งานมากนัก คุณทำอะไรได้มากมายตามจินตนาการของคุณ แต่ก็อาจต้องทำหลายอย่างแบบ "ฮาร์ดคอร์" ดังนั้นจึงขึ้นอยู่กับ use case