ไฟล์ SVG

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

ภาพอักษรวิ่ง 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 ยังไม่รองรับภาพเคลื่อนไหวอีกด้วย

เรียนรู้เพิ่มเติมเกี่ยวกับประเภทไฟล์ที่คล้ายกับ SVG

ภาพไฟล์ PNG

ไฟล์ PNG

เรียนรู้เพิ่มเติมเกี่ยวกับรูปแบบไฟล์อีกรูปแบบหนึ่งที่ได้รับความนิยมสำหรับกราฟิกบนเว็บและโลโก้

รูปภาพไฟล์ JPEG

ไฟล์ JPEG

ดูว่าทำไมไฟล์ JPEG จึงถูกออกแบบมาเพื่อรองรับภาพถ่ายดิจิทัลที่มีความซับซ้อน

ไฟล์ภาพ HEIC

ไฟล์ HEIC

ทำความรู้จักไฟล์ราสเตอร์ประเภทใหม่นี้ซึ่งคิดค้นขึ้นโดย Apple

ภาพไฟล์ AI

ไฟล์ AI

ดูรูปแบบไฟล์เวกเตอร์ที่ใช้กันอย่างกว้างขวางซึ่งพัฒนาขึ้นมาสำหรับ Adobe Illustrator

เปรียบเทียบไฟล์ SVG กับไฟล์ประเภทอื่นๆ

ภาพไฟล์ SVG เทียบกับ PNG

SVG เทียบกับ PNG

รูปแบบไฟล์ใดที่เป็นผู้ชนะในด้านการออกแบบเว็บ

ภาพไฟล์ SVG เทียบกับ EPS

SVG เทียบกับ EPS

ลองพิจารณาความสามารถด้านการพิมพ์ของไฟล์เหล่านี้ให้ละเอียดยิ่งขึ้น

ค้นหาแผนที่เหมาะกับคุณ

Illustrator

Adobe Illustrator Single App

สร้างงานศิลปะและภาพประกอบเวกเตอร์ที่สวยงาม
ใช้งานฟรี 7 วัน หลังจากนั้นจ่าย ฿800.36/เดือน (รวม VAT)

InDesign

Adobe InDesign Single App

สร้างเค้าโครงหน้าที่หรูหราสําหรับสื่อสิ่งพิมพ์และสื่อดิจิทัล
ใช้งานฟรี 7 วัน หลังจากนั้นจ่าย ฿800.36/เดือน (รวม VAT)

Lightroom

All Apps

รับคอลเลกชันของแอปและบริการที่สร้างสรรค์ทั้งหมด
ใช้งานฟรี 7 วัน หลังจากนั้น ฿1,143.83/เดือน.(รวม VAT)