ไฟล์ SVG คืออะไร (และคุณใช้งานอย่างไร)

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

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

ไปกันเถอะ!

สมัครสมาชิกช่อง Youtube ของเรา

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

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

นี่เป็นไฟล์รูปภาพอีกประเภทหนึ่งที่เรียกว่า Portable Network Graphic (PNG) ใช้สำหรับภาพประกอบและภาพวาด หากคุณต้องการทำซ้ำสิ่งที่คล้ายคลึงกันโดยใช้กราฟิกแบบเวกเตอร์ คุณจะต้องสร้างมันด้วยโค้ด XML (เหมือนกับที่ใช้กับแผนผังเว็บไซต์) โค้ดต่อไปนี้สามารถให้ผลลัพธ์เดียวกันได้:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

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

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

เหตุใดจึงต้องใช้ไฟล์ SVG

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

รูปแบบ SVG เป็นตัวเลือกที่ยอดเยี่ยมสำหรับสถานการณ์อื่นๆ ทั้งชุด:

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

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

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

วิธีสร้างไฟล์ SVG (2 วิธี)

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

1. สร้างไฟล์ SVG ด้วยตนเอง

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

• Adobe Illustrator, Photoshop, Animate และ InDesign
• Microsoft Visio
• Inkscape
• GIMP

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

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

2. แปลงรูปภาพที่มีอยู่เป็น SVG

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

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

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

แน่นอนว่านี่เป็นเพียงทางเลือกเดียว บริการแปลง PNG และ JPG เป็น SVG อื่นๆ ได้แก่ Convertio และ Img2Go คุณจะต้องค้นคว้าเพื่อหาวิธีแก้ปัญหาที่เหมาะสมที่สุดสำหรับความต้องการของคุณ

จากประสบการณ์ของเรา ตัวแปลง SVG ส่วนใหญ่ให้ผลลัพธ์ที่มีคุณภาพใกล้เคียงกัน เพื่อผลลัพธ์ที่ดีที่สุด ตัวแปลงที่คุณใช้ไม่สำคัญเท่ากับภาพที่คุณเลือก

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

วิธีใช้ไฟล์ SVG (เข้าและออกจาก WordPress)

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

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

กระบวนการจะเปลี่ยนไปหากคุณใช้ WordPress ระบบจัดการเนื้อหา (CMS) ไม่รองรับ SVG แบบสำเร็จรูป หากคุณต้องการเปิดใช้งานการสนับสนุน SVG เพื่อให้คุณสามารถอัปโหลดไฟล์ไปยังเว็บไซต์ของคุณได้โดยตรง คุณจะต้องใช้ปลั๊กอิน เช่น Safe SVG:

เป็นไปได้ที่จะเปิดใช้งานการสนับสนุน SVG ใน WordPress ด้วยตนเอง แต่กระบวนการนี้เกี่ยวข้องมากกว่ามาก ในกรณีนี้ การใช้ปลั๊กอินเป็นตัวเลือกที่ปลอดภัยกว่า

บทสรุป

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

ตัวเลือกที่ยอดเยี่ยม ได้แก่ Adobe Illustrator, InDesign และ GIMP คุณสามารถสร้างและแปลงรูปภาพที่มีอยู่เป็น SVG ได้โดยใช้เครื่องมือเหล่านั้น หากคุณใช้ WordPress คุณสามารถอัปโหลด SVG เหล่านั้นได้โดยใช้ปลั๊กอิน Safe SVG จากนั้นสนุกไปกับการสร้างภาพเคลื่อนไหว

คุณมีคำถามเกี่ยวกับวิธีใช้ไฟล์ SVG หรือไม่? พูดคุยเกี่ยวกับพวกเขาในส่วนความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความโดย VectorsMarket / shutterstock.com