เวกเตอร์ SVG (.svg)
W3C มาตรฐานScalable Vector Graphics (SVG) คือรูปแบบภาพเวกเตอร์ที่อิงตาม XML สำหรับกราฟิกสองมิติ พร้อมรองรับการโต้ตอบ การจัดสไตล์ด้วย CSS และแอนิเมชัน
แปลง SVG เป็น PNG
ตัวแปลงจาก SVG เป็น PNG ฟรีในเบราว์เซอร์ แปลงไฟล์ได้ทันทีบนอุปกรณ์ของคุณ
บีบอัด SVG ออนไลน์
เป็นส่วนตัว - ไฟล์จะไม่ออกจากอุปกรณ์ของคุณ
ตรวจสอบไฟล์และข้อมูลเมตา
ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ SVG โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:
ลายเซ็นส่วนหัวระดับไบต์
ระบบปฏิบัติการและเครื่องมือวิเคราะห์ไฟล์จะระบุไฟล์ SVG โดยการตรวจสอบลำดับไบต์ไบนารีส่วนต้น:
ลายเซ็น HEX (OFFSET 0):
3C 73 76 67การแสดงผลรูปแบบ ASCII: <svg
มาตรฐาน: W3C Recommendation (SVG 1.1 / SVG 2)
ข้อมูลจำเพาะทางเทคนิค
| สถาปัตยกรรมคอนเทนเนอร์ | เอกสารมาร์กอัปข้อความอิง XML ที่กำหนดเรขาคณิตเวกเตอร์ 2 มิติ |
| การบีบอัด | การบีบอัดข้อความแบบ Gzip / Brotli (SVGZ ใช้การบีบอัด gzip) |
| การจัดลำดับไบต์ | ไม่เกี่ยวข้อง (สตรีมอักขระ UTF-8 / UTF-16 แบบข้อความ) |
| พื้นที่สี | sRGB, โมดูลสี CSS 4 (Display P3, lab, lch) |
| ช่องสัญญาณและโครงสร้าง | รูปทรงเวกเตอร์ความละเอียดไม่จำกัด เส้นโค้งเบซิเยร์ การจัดตัวพิมพ์ และมาสก์ความทึบแสง |
| ขนาดสูงสุด | ไม่ขึ้นกับความละเอียด (ปรับขนาดได้อนันต์ไปยังทุกวิวพอร์ตโดยไม่มีพิกเซลแตก) |
| ความโปร่งใส | ความโปร่งใสอัลฟาแบบปรับค่าได้เต็มรูปแบบและโหมดผสมสี CSS |
| การสตรีมและแบบโปรเกรสซีฟ | รองรับการแยกวิเคราะห์สตรีมข้อความแบบโปรเกรสซีฟโดยตัวแยกวิเคราะห์ XML ของเบราว์เซอร์ |
ตารางเปรียบเทียบทางเทคนิค: SVG กับคู่แข่ง
| คุณลักษณะทางเทคนิค | SVG (ปัจจุบัน) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| รูปแบบการเรนเดอร์ | DOM เวกเตอร์แบบ retained mode | แคนวาสบิตแมปแบบ immediate mode | คอนเทนเนอร์หน้ากระดาษตายตัวแบบ retained mode | กริดพิกเซลแรสเตอร์ |
| การจัดสไตล์และ CSS | จัดสไตล์ได้อย่างเต็มที่ผ่านคลาสและตัวแปร CSS | ต้องมีการวาดภาพใหม่ด้วย API แคนวาส JavaScript | ไม่มีการจัดสไตล์ CSS แบบไดนามิก | พิกเซลแรสเตอร์คงที่ |
| การปรับขนาดแบบอนันต์ | ใช่ (เส้นโค้งเวกเตอร์ทางคณิตศาสตร์) | ต้องปรับขนาดความละเอียดด้วยตนเอง | ใช่ (องค์ประกอบเวกเตอร์) | ไม่ใช่ (แตกเป็นพิกเซลเมื่อขยายใหญ่ขึ้น) |
| การโต้ตอบ | เหตุการณ์ DOM ที่รองรับในตัว (วางเมาส์ คลิก แอนิเมชัน) | ต้องคำนวณการตรวจจับการคลิกด้วยตนเอง | เอกสารคงที่ | ต้องใช้แผนผังรูปภาพหรือแคนวาส |
รูปแบบความเสียหายทั่วไปและคู่มือการกู้คืน Hex
เบราว์เซอร์แสดงข้อผิดพลาดการแยกวิเคราะห์ XML: โทเค็นไม่ได้ปิดหรือแท็กไม่ตรงกัน
สาเหตุหลัก: ไวยากรณ์ XML ไม่ถูกต้อง, แท็กปิดหายไป, หรือแอมเพอร์แซนด์ที่ไม่ได้รับการหลีก ('&' แทนที่จะเป็น '&')
การกู้คืน: ตรวจสอบความถูกต้องด้วยเครื่องมือตรวจสอบ XML (xmllint file.svg) และแก้ไขแท็กที่ไม่สมดุล
การวิเคราะห์ความปลอดภัยและเวกเตอร์การโจมตีตัวแยกวิเคราะห์
เนื่องจาก SVG เป็น XML ที่สามารถเรียกการทำงานได้และรองรับแท็ก '<script>' รวมถึงเอนทิตีภายนอก จึงมีความเสี่ยงด้าน XSS และ SSRF อย่างมีนัยสำคัญหากแสดงผล SVG ที่ไม่น่าเชื่อถือ
เวกเตอร์การโจมตีที่ทราบ
- Cross-Site Scripting (XSS) แบบจัดเก็บผ่านแท็ก '<script>' ที่ฝังอยู่หรือตัวจัดการเหตุการณ์ 'onload='
- การโจมตีแบบ XML External Entity (XXE) ที่อ่านไฟล์เซิร์ฟเวอร์ภายในเมื่อถูกแยกวิเคราะห์บนเซิร์ฟเวอร์แบ็กเอนด์
- การขยายเอนทิตี XML แบบ Billion Laughs ที่ทำให้เกิดการปฏิเสธการให้บริการ (Denial of Service)
แนวทางปฏิบัติที่ดีที่สุดในการป้องกัน: ทำความสะอาด SVG เสมอโดยใช้ DOMPurify ก่อนฝัง หรือให้บริการ SVG ด้วย 'Content-Security-Policy: default-src 'none'' หรือเป็นแท็ก '<img>' ซึ่งจะปิดใช้งานสคริปต์โดยอัตโนมัติ
ประวัติความเป็นมาและเหตุการณ์สำคัญ
ข้อได้เปรียบและจุดเด่นสำคัญ
- ความเป็นอิสระจากความละเอียดแบบอนันต์: เส้นและตัวอักษรคมชัดในทุกระดับการแสดงผลหรือมาตราส่วนการพิมพ์
- ขนาดไฟล์เล็กมากสำหรับโลโก้ ไอคอน และองค์ประกอบส่วนติดต่อผู้ใช้
- สามารถเขียนสคริปต์และจัดสไตล์ได้อย่างเต็มที่ผ่าน CSS และ JavaScript ภายในเบราว์เซอร์ DOM
ข้อจำกัดทางเทคนิคและข้อควรพิจารณา
- ไม่เหมาะสมสำหรับภาพถ่ายหรือภาพโทนต่อเนื่องที่มีความซับซ้อน
- เส้นทางเวกเตอร์ที่ซับซ้อนด้วยโหนดนับพันอาจทำให้เกิดอาการหน่วงในการเรนเดอร์ของ CPU และการใช้พลังงานแบตเตอรี่สูง
- ลักษณะ XML อนุญาตให้ฝังสคริปต์ได้ จึงต้องทำความสะอาดอย่างเข้มงวดก่อนเรนเดอร์ไฟล์ที่ผู้ใช้อัปโหลดและไม่น่าเชื่อถือ
เกร็ดความรู้ทางเทคนิคที่น่าสนใจ
- Gzip อาจลดขนาดไฟล์ SVG บางไฟล์ได้มาก ระดับการลดขึ้นอยู่กับเนื้อหาเอกสารและการตั้งค่าการบีบอัด
- แอตทริบิวต์ viewBox กำหนดผืนผ้าใบพิกัดเชิงนามธรรมที่แมปแบบไดนามิกกับพิกเซลหน้าจอจริง
- เบราว์เซอร์เว็บยุคแรกๆ ขาดเอ็นจิ้น SVG ในตัว ส่งผลให้ Adobe ต้องแจกจ่ายปลั๊กอินเบราว์เซอร์ Adobe SVG Viewer ก่อนที่การรองรับในตัวของเบราว์เซอร์จะมั่นคงราวปี 2011
คำถามทางเทคนิคที่พบบ่อย
ไฟล์ SVG สามารถมีโค้ดอันตรายได้หรือไม่
ได้ เนื่องจาก SVG เป็น XML ที่ถูกต้อง จึงสามารถมี JavaScript ฝังตัว ('<script>') ที่จะทำงานหากโหลด SVG โดยตรงในเบราว์เซอร์หรือเปิดในองค์ประกอบ '<svg>' แบบอินไลน์ การให้บริการ SVG ผ่านแท็ก '<img>' จะทำให้การทำงานของสคริปต์เป็นกลางโดยอัตโนมัติ
ฉันควรใช้ SVG แทน PNG เมื่อใด
ใช้ SVG สำหรับไอคอน โลโก้ แผนภูมิ ภาพประกอบ และรูปแบบตัวพิมพ์ เมื่อต้องการภาพคมชัดทุกขนาดหน้าจอและไฟล์ขนาดเล็ก ส่วนภาพถ่ายควรใช้ PNG หรือ WebP
ฉันจะเพิ่มประสิทธิภาพไฟล์ SVG ขนาดใหญ่หรือมีความซับซ้อนได้อย่างไร
คุณสามารถปรับแต่งเส้นทางเวกเตอร์ได้โดยลบข้อมูลเมตาส่วนเกิน คอมเมนต์จากโปรแกรมแก้ไข (เช่น Inkscape หรือ Illustrator) กลุ่มที่มองไม่เห็น และการประกาศเนมสเปซที่ไม่ได้ใช้ ด้วยเครื่องมืออย่าง SVGO หรือการบีบอัด SVG
คู่การแปลงไฟล์ SVG ที่เกี่ยวข้อง
แปลงกราฟิก SVG ที่ปรับขนาดได้เป็นภาพแรสเตอร์ PNG แบบพิกเซลคงที่ เพื่อให้ใช้งานร่วมกับแอปพลิเคชันต่าง ๆ ได้
ฝังภาพ PNG แบบแรสเตอร์ไว้ในคอนเทนเนอร์ XML ของ SVG เพื่อให้ปรับขนาดเลย์เอาต์เว็บได้และใช้งานร่วมกับเลย์เอาต์เวกเตอร์
แปลงชุดคำสั่งวาดเวกเตอร์ Windows GDI แบบ 16 บิตรุ่นเก่าให้เป็นเส้นทาง SVG สมัยใหม่ที่ปรับขนาดได้โดยไม่มีการสูญเสียความละเอียด
แปลงกราฟิก Windows Enhanced Metafile แบบ 32 บิตให้เป็นเวกเตอร์ SVG ที่เรียบร้อยและปรับขนาดได้ สำหรับเว็บและซอฟต์แวร์ออกแบบ
การแปลงแบบร่าง DXF เป็น CAD SVG จะเปลี่ยนข้อมูลเวกเตอร์ทางวิศวกรรมที่ซับซ้อนให้เป็นกราฟิก XML น้ำหนักเบาสำหรับเบราว์เซอร์และโปรแกรมแก้ไขเวกเตอร์
การแปลง Scalable Vector Graphics เป็น Drawing Exchange Format จะแปลเวกเตอร์ภาพที่พร้อมสำหรับเว็บให้เป็นพิกัดทางคณิตศาสตร์ที่แม่นยำซึ่งจำเป็นสำหรับซอฟต์แวร์คอมพิวเตอร์ช่วยในการออกแบบ
แชร์โลโก้หรือภาพประกอบ SVG ในรูปแบบ PDF หนึ่งหน้า เส้นพาธที่ปรับขนาดได้จะกลายเป็นภาพที่มีความละเอียดคงที่ จึงไม่สามารถกู้รายละเอียดเวกเตอร์กลับคืนได้เมื่อซูม