Three ways to animate SVG

2 min readJun 20, 2021

SVG คืออะไร

SVG ย่อมาจาก Scalable Vector Graphics โดยชื่อตัวมันเอง ก็บอกได้ตรงตัวอยู่แล้ว ว่ามันคือกราฟฟิกที่เป็นรูปแบบเว็กเตอร์ ซึ่งสามารถขยายได้โดยไม่เสียความคมชัด

พูดง่ายๆ ว่า ไม่ว่าจะเอา SVG ไปย่อให้เล็ก หรือใหญ่ขนาดไหน ก็จะไม่เบลอ !!!

กราฟฟิก ในที่นี้คือ Shape ต่างๆ ไม่ว่าจะเป็นวงกลม สามเหลี่ยม สีเหลี่ยม custom shape และอื่นๆ รวมถึง Text ก็ถือว่าเป็นกราฟฟิกเช่นกัน

โดยรูปแบบของไฟล์ SVG จะอยู่ในรูปแบบของ XML format ตัวอย่าง

ตัวอย่างของ SVG animation

by jjperezaguinaga

by Nikhil Krishnan

by Fabio

by Swarup Kumar Kuila

by Jonathan Silva

by Issey

เราจะ animate SVG ได้อย่างไรบ้าง

ปัจจุบันวิธีการ animate SVG จะมีด้วยกัน 3 วิธี โดยจะมีข้อดี ข้อเสียต่างกันออกไป
1. SMIL (native)
2. Using CSS
3. Using JavaScript

SMIL

ข้อดี
เป็นวิธี native ในการทำ animate ของ SVG ซึ่งทำให้การ animate จบได้ด้วยตัวไฟล์ SVG เอง เวลาเราเรียกใช้งานไฟล์ SVG ด้วย tag <img> รูปที่ออกมาก็จะมีการ animate ได้เลย โดยที่เราไม่ต้องเขียนโค้ดเพิ่มเติม และที่สำคัญ มันสามารถทำ image lazy load ได้ด้วย ซึ่งเป็นวิธีเดียวที่ทำได้ครับ

ข้อเสีย
ใช้เวลาเรียนรู้นาน และความสามารถของการ animate ทำให้เพียงพื้นฐาน เช่น ขยับ ย่อ/ขยายขนาด เปลี่ยนสี เปลี่ยน shape แต่มีข้อจำกัดคือ point ของ 2 shape ต้องเท่ากัน

ข้อมูลเพิ่มเติม
SVG Animation Specification
A Guide to SVG Animations (SMIL)

Using CSS

ข้อดี
สำหรับเพื่อนๆ ที่ถนัด CSS อยู่แล้ว ก็ไม่ต้องเสียเวลาเรียนรู้อะไรเพิ่มเลยครับ เพราะใช้วิธีเดียวกันเลย

ข้อเสีย
ถ้ารูป SVG ที่ใช้มี element หลายๆ ชิ้น เวลาเอามาใช้งาน ก็จะทำให้เว็บไซต์เรนเดอร์ช้าลงครับ เพราะว่าตัวข้อมูล SVG ก็เหมือนเราเขียน HTML tag ปกติครับ ยิ่ง element เยอะ ก็ยิ่งเรนเดอร์ช้าครับ

Using JavaScript

ข้อดี
สามารถ animate ได้หลากหลายรูปแบบ และสำหรับเพื่อนๆ ที่ถนัด JavaScript ก็จะง่ายเลยครับ อาจจะใช้เวลาเรียนรู้คำสั่งของ library ในช่วงแรกสักพักหนึ่ง แต่หลังจากนั้น จะ animate ได้รวดเร็วกว่าทุกวิธีครับ

ข้อเสีย
จะคล้ายกันกับแบบ Using CSS ครับ มันจะทำให้เว็บไซต์เรนเดอร์ช้า ซึ่งแบบ Using JavaScript จะยิ่งช้าขึ้นไปอีกครับ เพราะว่าต้องไปเรนเดอร์ตัวโค้ดคำสั่ง JavaScript อีก เรียกได้ว่า ช้ากว่าทุกๆ วิธีเลยครับ

ตัวอย่าง library
1. Lottie เจ้าตัวนี้จะง่ายสำหรับเหล่า developer ครับ เพราะว่าการ animate ทุกอย่างจะทำเสร็จอยู่ในโปรแกรม Adobe After Effects และใช้เจ้า Lottie ที่เป็น plugin ในการ generate ออกมาเป็น JSON ให้ developer ไปใช้งานต่ออีกทีครับ ซึ่งก็เพียงแค่ import ไฟล์ และเรียกใช้ แค่นั้นเองครับ
เพื่อนๆ สามารถเข้าไปดูตัวอย่างได้ที่เว็บนี้ครับ https://lottiefiles.com/

2. anime.js เจ้าตัวนี้จะมา animate ด้วยโค้ด JavaScript ครับ ทำได้หลายแบบ หลายวิธี สามารถเข้าไปดูให้ที่ Document ของเขาได้เลย ละเอียดมากครับ

ต้องเลือกใช้วิธีไหนกับงาน

ถ้าคุณมีเวลาในการศึกษาแบบ SMIL และการ animate ที่คุณอยากได้ ไม่เกินขอบเขตที่สามารถทำได้ ก็ไปในวิธี SMIL ครับ

แต่ถ้าคุณไม่ได้มีเวลาศึกษาขนาดนั้น ให้ไปแบบ Using CSS/JavaScript แล้วแต่จะถนัดเลยครับ แต่ว่าแบบ CSS ก็จะมีขอบเขตแค่ในส่วนที่ CSS สามารถทำได้ ซึ่งแบบ JavaScript จะทำได้มากกว่า ครอบคลุมมากกว่าครับ