SVG คืออะไร? เข้าใจหลักการและการใช้งานของภาพเวกเตอร์แบบอ่านง่าย
SVG คืออะไร? อธิบายกลไกของภาพเวกเตอร์ SVG ความต่างจาก PNG และ JPG ข้อดีข้อจำกัด การใช้งานที่พบบ่อย และวิธีเปิดกับแก้ไข
1. SVG คืออะไร
SVG ย่อมาจาก Scalable Vector Graphics เป็นรูปแบบกราฟิกเวกเตอร์แบบเปิดที่สร้างบนพื้นฐาน XML และกำหนดมาตรฐานโดย W3C ต่างจาก PNG และ JPG ที่บันทึกภาพเป็นตารางพิกเซล SVG ใช้สูตรทางคณิตศาสตร์อธิบายรูปร่าง เส้นตรง วงกลม หรือเส้นโค้งเบเซียร์ ทุกอย่างถูกเขียนลงไฟล์ในรูปแบบพิกัดและคำสั่งเส้นทาง
เหตุผลที่ SVG ไม่มีวันเบลอเมื่อขยายคือ เบราว์เซอร์แค่วาดสูตรใหม่ตามขนาดที่ต้องการ แทนที่จะยืดพิกเซล นี่คือความหมายของคำว่า "เวกเตอร์"
2. ต่างกันอย่างไรระหว่าง SVG กับ PNG / JPG
| หัวข้อ | SVG | PNG / JPG |
|---|---|---|
| วิธีเก็บภาพ | เส้นทางทางคณิตศาสตร์ (เวกเตอร์) | ตารางพิกเซล (บิตแมป) |
| เมื่อขยาย | ขยายได้ไม่จำกัดโดยไม่เพี้ยน | เกิดรอยหยักและเบลอ |
| ขนาดไฟล์ | เล็กมากสำหรับกราฟิกง่าย ๆ (ไม่กี่ KB) | โตตามความละเอียดแบบเชิงเส้น |
| ความสามารถในการแก้ไข | แก้ไขเป็นข้อความได้ เปลี่ยนสีและทำแอนิเมชันได้ | ต้องใช้โปรแกรมปรับแต่งภาพ |
| เหมาะกับ | ไอคอน โลโก้ ภาพประกอบ แผนภาพ | ภาพถ่าย แสงและเงาที่ซับซ้อน |
3. SVG มักถูกใช้ทำอะไร
- ไอคอนและโลโก้บนเว็บไซต์: ชุด SVG เดียวใช้ได้ทุกความละเอียดหน้าจอ บนจอ Retina ยังคมชัด;
- ภาพประกอบและแผนภาพ: ไลบรารีแสดงข้อมูลอย่าง ECharts และ Recharts ส่งออกเป็น SVG โดยค่าเริ่มต้น;
- งานพิมพ์และงานแกะสลัก: เครื่องตัดเลเซอร์ เครื่องตัดสติกเกอร์ และเครื่องพิมพ์ UV รับเส้นทาง SVG กันอย่างแพร่หลาย;
- แอนิเมชัน: เส้นทาง SVG สั่งการได้โดยตรงด้วย CSS / SMIL / JavaScript จึงทำเอฟเฟกต์วาดเส้นตามได้
4. เปิดและแก้ไข SVG อย่างไร
เบราว์เซอร์สมัยใหม่ทุกตัว (Chrome / Edge / Firefox / Safari) เปิดไฟล์ SVG ได้โดยตรง และโปรแกรมออกแบบอย่าง Illustrator, Figma และ Inkscape (ฟรี) แก้ไขได้ หากต้องการเพียงเปลี่ยนสี ลบพื้นหลัง หรือลบบางส่วน ให้ใช้ ตัวแก้ไข SVG ออนไลน์ของ PolySVG ไม่ต้องติดตั้งโปรแกรมใด ๆ
5. แปลง PNG / JPG ที่มีอยู่เป็น SVG อย่างไร
ใช้ เครื่องมือแปลงรูปเป็น SVG ของ PolySVG: อัปโหลดภาพบิตแมปเข้าไป โมเดลที่พัฒนาเองจะทำ quantize สี ติดตามเส้นขอบ และฟิตเส้นโค้งให้อัตโนมัติ ในไม่กี่วินาทีก็ได้ SVG ที่แก้ไขได้ พร้อมปุ่มลบพื้นหลังคลิกเดียว ทั้งหมดนี้ฟรีและไม่ต้องสมัครสมาชิก
สรุป: SVG คือรูปแบบที่ "วาดด้วยสูตร" จึงเหมาะกับไอคอน โลโก้ และทุกอย่างที่ต้องขยาย ส่วนเนื้อหาภาพถ่ายยังควรใช้ JPG / WEBP
คำถามที่พบบ่อย
เปิดไฟล์ SVG ด้วยโปรแกรมอะไร
เบราว์เซอร์สมัยใหม่ทุกตัวเปิดดูได้ทันที ถ้าจะแก้ไขให้ใช้ Illustrator, Figma หรือ Inkscape หรือใช้ตัวแก้ไขออนไลน์ของ PolySVG ที่ไม่ต้องติดตั้งอะไร
แปลง SVG เป็น PNG ได้ไหม
ได้ ตัวแก้ไขของ PolySVG ส่งออก SVG เป็น PNG ได้ทุกความละเอียด และการจับภาพหน้าจอในเบราว์เซอร์หรือการส่งออกจากโปรแกรมออกแบบก็ทำได้เช่นกัน