ไฟล์ SVG

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

• ไฟล์ SVG คืออะไร
  
• ประวัติของไฟล์ SVG
  
• ไฟล์ SVG มีไว้ใช้ทำอะไร
  
• ข้อดีและข้อเสียของไฟล์ 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 มีไว้ใช้ทำอะไร

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

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

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

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

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

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

ข้อดีและข้อเสียของไฟล์ 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

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

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

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

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

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

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

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

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

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

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

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

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

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