บีบอัดไฟล์ SVG

SVG คือโค้ด ไม่ใช่พิกเซล

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

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

อะไรทำให้ไฟล์ SVG หนักเกินจำเป็น

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

เครื่องมือปรับแต่ง SVG อย่างไร

เครื่องมือจะรัน SVGO ตัวปรับแต่ง SVG โอเพนซอร์สที่ใช้กันแพร่หลายในเบราว์เซอร์ของคุณ โดยลบข้อมูลเมตาและความคิดเห็น ยุบกลุ่มที่ไม่มีประโยชน์ ย่อข้อมูลพาธ ปัดตัวเลขเป็นทศนิยม 3 ตำแหน่งโดยค่าเริ่มต้น (เลือกได้ตั้งแต่ 0 ถึง 6) และรวมสไตล์เข้าด้วยกัน แล้วทำซ้ำจนกว่าจะไม่มีอะไรเปลี่ยน ผลลัพธ์ยังเป็น SVG ปกติที่เปิดได้ในโปรแกรมแก้ไขใดก็ได้หรือวางลงใน HTML ได้ ในการทดสอบของเรากับ SVG แปดไฟล์ ตั้งแต่ไอคอนที่ปรับแต่งด้วยมือไปจนถึงไฟล์ส่งออกจาก Inkscape ที่เต็มไปด้วยข้อมูลของโปรแกรม ประหยัดได้ตั้งแต่ 8 % ถึง 42 %

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

เซิร์ฟเวอร์มักส่ง SVG ด้วยการบีบอัดแบบ gzip หรือ Brotli ซึ่งย่อข้อความอีกครั้งระหว่างทางไปยังเบราว์เซอร์ การปรับแต่งและการบีบอัดของเซิร์ฟเวอร์เสริมกัน เพราะข้อมูลที่ลบไปแล้วไม่ต้องถูกบีบอัดเลย

เมื่อ SVG ที่ปรับแต่งแล้วใช้งานไม่ได้

• CSS หรือ JavaScript หาองค์ประกอบไม่เจอ ตัวปรับแต่งจะย่อหรือลบ ID และชื่อคลาสที่ดูเหมือนไม่ได้ใช้ภายในไฟล์ หากสไตล์หรือสคริปต์ของหน้าเว็บอ้างถึงสิ่งเหล่านั้น ให้ตรวจผลลัพธ์ก่อนเผยแพร่
• ไอคอนปรับขนาดไม่ได้อีกต่อไป SVG ต้องมีแอตทริบิวต์ viewBox จึงจะปรับขนาดได้อย่างถูกต้อง เครื่องมือเก็บแอตทริบิวต์นี้ไว้ ดังนั้นให้ตรวจดูว่าต้นฉบับมีหรือไม่ SVG ที่มีแค่ความกว้างและความสูงตายตัวไม่เคยปรับขนาดได้ดีอยู่แล้ว
• รูปทรงขนาดจิ๋วดูผิดเพี้ยน ไอคอนขนาดเล็กมากที่วาดบนผืนผ้าใบขนาดใหญ่อาจได้รับผลจากการปัดเศษ ซึ่งเกิดขึ้นได้ยากที่ความละเอียดเริ่มต้น
• ไฟล์ส่วนใหญ่เป็นรูปถ่ายที่ฝังไว้ ส่งออกรูปถ่ายเป็นไฟล์ JPG หรือ WebP แยกต่างหากแล้วลิงก์ไว้ หรือแปลงกราฟิกทั้งหมดเป็นบิตแมป

คำถามเกี่ยวกับ SVG

หน้าที่เกี่ยวข้อง

ภาพบิตแมปใช้เครื่องมือบีบอัดรูปภาพ สำหรับข้อมูลพื้นฐานว่าอะไรทำงานบนเครื่องและเพราะเหตุใด ดูที่วิธีการทำงาน