ไฟล์ SVG

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

• ไฟล์ SVG คืออะไร
• ประวัติของไฟล์ SVG
• ไฟล์ SVG มีไว้ใช้ทำอะไร
• ข้อดีและข้อเสียของไฟล์ SVG
• วิธีการเปิดไฟล์ SVG
• วิธีการสร้างและแก้ไขไฟล์ SVG
• ไฟล์ SVG: คำถามที่พบบ่อย

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

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

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

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

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

วิศวกรซอฟต์แวร์ชาวเนเธอร์แลนด์ชื่อ Martijn Koster ได้เปิดตัวรูปแบบไฟล์ SVG เป็นครั้งแรกในปี 1994

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

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

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

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

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

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

ข้อเสียของไฟล์ 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 ใน Illustrator มีดังนี้

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

1. เมื่อคุณได้สร้างงานศิลปะขึ้นมาใน Illustrator แล้ว ให้เลือกข้อความเพื่อสร้างโครงร่าง ซึ่งจะช่วยให้ไม่ต้องเจอกับปัญหาอย่างการใช้แบบอักษรอื่นทดแทนเมื่อเปิดดูงานศิลปะของคุณบนคอมพิวเตอร์เครื่องอื่น เลือกประเภท – สร้างโครงร่าง
2. บันทึกไฟล์ของคุณ เลือก File (ไฟล์) > Save As (บันทึกเป็น) คลิกที่เมนูดรอปดาวน์ Format (รูปแบบ) ภายในหน้าต่างที่ปรากฏขึ้นแล้วเลือก SVG
3. นอกจากนี้คุณยังสามารถส่งออกไฟล์ SVG ที่แก้ไขเรียบร้อยแล้วได้โดยคลิกที่ File (ไฟล์) > Export (ส่งออก) > Export As (ส่งออกเป็น) แล้วเลือก SVG เป็นรูปแบบไฟล์ ซึ่งจะช่วยให้คุณสามารถปรับแต่งการตั้งค่าการส่งออก เช่น ความแม่นยำและความเข้ากันได้

วิธีแก้ไขไฟล์ SVG ใน Illustrator

1. เลือกไฟล์และเปิดไฟล์ SVG ของคุณใน Illustrator หรือจะนำเข้าไฟล์ SVG ไปยังเอกสารใน Illustrator ที่มีอยู่ก็ได้โดยเลือก File (ไฟล์) > Place (วาง)
2. ใช้เครื่องมือ Selection (หรือเครื่องมือ Direct Selection) เพื่อเลือกเส้น รูปทรง หรือกลุ่มแบบแยกจากภายใน SVG โดยคุณสามารถปรับขนาด รูปทรง ปรับเปลี่ยน หรือแก้ไขเส้น เพิ่มสีและเอฟเฟกต์ได้