SVG ย่อมาจาก Scalable Vector Graphics เป็นมาตรฐานเปิดของ W3C สำหรับรูปภาพที่อธิบายเป็นคำสั่งแทนพิกเซล: วาดวงกลมตรงนี้ ตามเส้นโค้งนี้ เติมสีให้รูปทรงนั้น ใช้ฟอนต์นี้กับข้อความนั้น เนื่องจากรูปภาพเป็นชุดของคำสั่ง จึงสามารถวาดได้ทุกขนาดโดยไม่เบลอหรือเป็นสี่เหลี่ยม ซึ่งเป็นเหตุผลว่าทำไมโลโก้ ไอคอน แผนที่ และกราฟจำนวนมากจึงใช้ SVG
SVG จัดเก็บรูปภาพอย่างไร
ไฟล์ SVG เป็น XML คือข้อความที่อ่านได้และเปิดในตัวแก้ไขใดก็ได้ อิลิเมนต์ <path> จะเก็บสตริงคำสั่งวาดรูปแบบย่อ <rect>, <circle> และ <polygon> ทำงานตามชื่อของมัน <text> เก็บข้อความจริงที่เลือกได้ และ <g> ใช้จัดกลุ่มอิลิเมนต์เพื่อให้ย้ายหรือตกแต่งร่วมกันได้ แอททริบิวต์ viewBox ใช้กำหนดระบบพิกัด ซึ่งทำให้การสเกลภาพทั้งหมดคมชัด
เนื่องจากเป็นข้อความ SVG จึงบีบอัดได้ดีมาก ไฟล์ SVG ที่บีบอัดด้วย gzip (บางครั้งใช้ส่วนขยาย .svgz) มักมีขนาดเพียงเศษหนึ่งของไฟล์ต้นฉบับ การเป็นข้อความยังหมายความว่า SVG สามารถตกแต่งด้วย CSS ทำแอนิเมชัน และเขียนสคริปต์ได้ เบราว์เซอร์จะมองว่าเป็นส่วนหนึ่งของเอกสาร ไม่ใช่ภาพทึบ
ความสามารถสุดท้ายนั้นมีมิติด้านความปลอดภัยที่ควรรู้: SVG สามารถมีอิลิเมนต์ <script> ได้ ทุกที่ที่อนุญาตให้อัปโหลด SVG จากผู้ใช้ จำเป็นต้องทำให้ปลอดภัยหรือให้บริการในลักษณะที่ไม่สามารถรันสคริปต์ได้ ซึ่งเป็นเหตุผลว่าทำไมบางเว็บไซต์จึงไม่ยอมรับ SVG แม้จะยอมรับไฟล์ภาพแบบ raster ทุกชนิด
SVG ไม่เหมาะกับการเก็บรูปถ่าย คุณสามารถฝังภาพแบบ raster ลงไปได้ แต่สุดท้ายจะกลายเป็นภาพพิกเซลที่ห่ออยู่ใน XML โดยไม่ได้ประโยชน์จากการสเกลเลย
SVG มีเมทาดาทาอะไรบ้าง
SVG มีอิลิเมนต์ <metadata> แยกต่างหาก และเนื่องจากมาตรฐานไม่ได้กำหนดว่าต้องใส่อะไรไว้บ้าง โปรแกรมแก้ไขจึงเก็บข้อมูลไว้ในนั้นจำนวนมาก โดยทั่วไปจะเก็บ RDF ที่ใช้เทอมของ Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights และ URI ของลิขสิทธิ์ อิลิเมนต์ <title> และ <desc> ยังสามารถอยู่ที่ root หรือที่รูปทรงใดๆ ก็ได้ โดยใช้เป็นข้อความเพื่อการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอไปพร้อมกัน
นอกจากนี้ยังมีข้อมูลบันทึกของตัวโปรแกรมแก้ไขเอง ซึ่งมักเป็นส่วนที่ใหญ่ที่สุด Inkscape จะเขียนเนมสเปซของตัวเองทั้งชุด: ขนาดหน้าต่างของเอกสาร ระดับการซูมและตำแหน่งเคอร์เซอร์ตอนบันทึกล่าสุด เส้นไกด์ การตั้งค่ากริด ชื่อเลเยอร์และการมองเห็น และสตริง inkscape:version ส่วน Illustrator จะฝังแพ็กเก็ต XMP พร้อมตัวระบุเอกสารและประวัติของตัวเอง ข้อมูลเหล่านี้ไม่ช่วยวาดอะไรเลย
จากนั้นจึงมีข้อแนะนำเชิงปฏิบัติ 2 ข้อ ข้อมูลจากโปรแกรมแก้ไขอาจกินพื้นที่ส่วนใหญ่ของไฟล์ได้ง่ายๆ ดังนั้นรัน SVG ผ่านตัวปรับให้เหมาะสมก่อนเผยแพร่ก็มักจะลดขนาดไฟล์ได้ครึ่งหนึ่ง และชื่อเลเยอร์คือข้อความที่คุณเขียนเอง: <g inkscape:label="client logo v3 REJECTED"> มองไม่เห็นในรูปภาพ แต่เห็นได้ชัดเจนในไฟล์
เมื่อใดควรใช้ SVG
ใช้ SVG สำหรับทุกอย่างที่เป็นภาพวาด ไม่ใช่ภาพถ่าย เช่น โลโก้ ไอคอน แผนภาพ กราฟ ภาพประกอบ แผนที่ เป็นตัวเลือกที่เหมาะสำหรับเว็บที่ไฟล์เดียวใช้ได้กับทุกความหนาแน่นหน้าจอ และสำหรับงานพิมพ์ที่ต้องสเกลได้ทุกขนาด
ใช้ PNG หรือ JPG สำหรับรูปถ่ายและภาพที่มีโทนสีต่อเนื่อง ส่งออกสำเนาแบบ raster แบนเพิ่มเมื่อคุณต้องใช้ภาพที่เปิดในซอฟต์แวร์รุ่นเก่าหรือจำกัดเกินกว่าจะรองรับ SVG และลบ metadata ของโปรแกรมแก้ไขก่อนเผยแพร่ ทั้งเพื่อลดขนาดไฟล์และเพราะชื่อเลเยอร์ไม่ใช่ข้อมูลที่ควรเปิดเผยเสมอไป