ไฟล์ SVG รองรับภาพเคลื่อนไหวหรือไม่

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

ฉันจะสังเกตหาไฟล์ SVG ได้อย่างไร

วิธีการที่ดีที่สุดในการมองหาไฟล์ SVG คือการตรวจสอบโค้ดนามสกุลไฟล์ นามสกุลของไฟล์ SVG คือ .svg นอกจากนี้ คุณยังสามารถมองหาภาพเวกเตอร์ เช่น SVG ได้ด้วยการขยายภาพเป็นขนาด 200% หรือมากกว่าบนจอคอมพิวเตอร์ของคุณ ภาพเวกเตอร์สามารถรักษาเส้นให้คมชัดและสีให้สดใสไว้ได้โดยไม่ทำให้ภาพเบลอหรือแตกเป็นพิกเซลแม้ขยาย

ไฟล์ SVG สามารถใช้ได้เฉพาะบนอินเทอร์เน็ตใช่หรือไม่

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

ไฟล์ SVG มีขนาดใหญ่เพียงใด

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

ไฟล์ SVG และ PNG แตกต่างกันอย่างไร

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

ไฟล์ SVG

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

สิ่งที่คุณจะได้เรียนรู้

ไฟล์ SVG คืออะไร

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

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

คุณสามารถสังเกตหาไฟล์ SVG ได้จากนามสกุลไฟล์ .svg

ประวัติของไฟล์ SVG

ประวัติของไฟล์ SVG นั้นย้อนกลับไปได้ถึงช่วงปลายทศวรรษ 1990 ซึ่งเป็นช่วงที่ World Wide Web Consortium (W3C) ได้รวบรวมข้อเสนอจากนักพัฒนาเพื่อสร้างรูปแบบกราฟิกเวกเตอร์ประเภทใหม่ W3C ได้รับข้อเสนอทั้งสิ้นจำนวนหกข้อ ซึ่งได้ช่วยให้เกิดรูปแบบไฟล์ SVG ในเวลาต่อมา

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

ข้อดีและข้อเสียของไฟล์ SVG

คุณควรพิจารณาข้อดีและข้อเสียของไฟล์ SVG ก่อนบันทึกรูปภาพของคุณในรูปแบบไฟล์นี้

ข้อดีของไฟล์ SVG

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

ข้อเสียของไฟล์ SVG

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

วิธีการเปิดไฟล์ SVG

เบราวเซอร์หลักๆ ทั้งหมดในปัจจุบัน ตั้งแต่ Chrome ไปจนถึง Edge, Safari และ Firefox สามารถเปิดไฟล์ SVG ได้ ไม่ว่าคุณจะใช้งานบน Mac หรือ Windows ก็ตาม เพียงแค่เปิดเบราวเซอร์ของคุณแล้วคลิกที่ File (ไฟล์)

Open (เปิด) เพื่อเลือกไฟล์ที่คุณต้องการดู จากนั้นไฟล์จะแสดงบนเบราว์เซอร์ของคุณ

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

วิธีการสร้างและแก้ไขไฟล์ SVG

ให้ดำเนินการตามขั้นตอนเหล่านี้เมื่อใช้ Adobe Photoshop

เมื่อคุณสร้างรูปภาพขึ้นมาใน Photoshop เรียบร้อยแล้วให้คลิกที่ File (ไฟล์) > Export (ส่งออก) > Export As (ส่งออกเป็น)
คลิกที่เมนูดรอปดาวน์ Format (รูปแบบ) ภายในกล่องที่ปรากฎขึ้นแล้วเลือก SVG
เลือก Export All (ส่งออกทั้งหมด) แล้วบันทึกไฟล์

หมายเหตุ: เนื่องจาก Photoshop เป็นโปรแกรมแก้ไขไฟล์ราสเตอร์ ผู้คนมากมายจึงเลือกที่สร้างและแก้ไขไฟล์ SVG ภายใน Adobe Illustrator ซึ่งเป็นโปรแกรมแก้ไขกราฟิกเวกเตอร์มากกว่า

ไฟล์ SVG: คำถามที่พบบ่อย

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

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

คุณสามารถสังเกตหาไฟล์ SVG ได้จากนามสกุลไฟล์ .svg

Scalable Vector Graphics ได้พัฒนาอย่างมากในช่วงไม่กี่ปีที่ผ่านมา แต่ในทางปฏิบัติแล้ว ผู้คนนำไฟล์ SVG ไปใช้ในการทำอะไรกันบ้างนะ

ไอคอนและโลโก้เว็บไซต์

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

อินโฟกราฟิกและภาพประกอบ

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

ดูไฟล์เวกเตอร์ประเภทอื่นๆ