ไฟล์ 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
- เมื่อคุณได้สร้างรูปภาพขึ้นมาใน Photoshop เรียบร้อยแล้วให้คลิกที่ File (ไฟล์) > Export (ส่งออก) > Export As (ส่งออกเป็น)
- คลิกที่เมนูเลื่อนลง Format (รูปแบบ) ภายในกล่องที่ปรากฎขึ้นแล้วเลือก SVG
- เลือก 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
เปรียบเทียบไฟล์ SVG กับไฟล์ประเภทอื่นๆ
รูปแบบไฟล์ใดที่เป็นผู้ชนะในด้านการออกแบบเว็บ
ลองพิจารณาความสามารถด้านการพิมพ์ของไฟล์เหล่านี้ให้ละเอียดยิ่งขึ้น
ค้นหาแผนที่เหมาะกับคุณ
Adobe Illustrator Single App
สร้างงานศิลปะและภาพประกอบเวกเตอร์ที่สวยงาม
ใช้งานฟรี 7 วัน หลังจากนั้นจ่าย ฿800.36/เดือน (รวม VAT)
Adobe InDesign Single App
สร้างเค้าโครงหน้าที่หรูหราสําหรับสื่อสิ่งพิมพ์และสื่อดิจิทัล
ใช้งานฟรี 7 วัน หลังจากนั้นจ่าย ฿800.36/เดือน (รวม VAT)
All Apps
รับคอลเลกชันแอปสร้างสรรค์ทั้งหมดและอีกมากมาย
ทดลองใช้ฟรี 7 วัน จากนั้น ฿1,143.83/เดือน