ไฟล์ SVG ใหญ่เกินไป? 8 เคล็ดลับบีบอัดและเพิ่มประสิทธิภาพ

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

1. ระดับเส้นทาง: ลดจุดยึดและรวมเส้นทาง

เคล็ดลับ 1: ลดจุดยึด (ทำให้เส้นทางง่ายขึ้น)

ยิ่งจุดยึดมาก ไฟล์ยิ่งใหญ่และยิ่งวาดช้า เพิ่มความเรียบตอนแปลงเพื่อลดจุดยึดตั้งแต่ต้นทาง สำหรับไฟล์ SVG ที่มีอยู่แล้ว ใช้ Object → Path → Simplify ของ Illustrator หรือ Path → Simplify (Ctrl+L) ของ Inkscape เพื่อตัดจุดยึดที่ไม่จำเป็นออก การปรับความเรียบและจำนวนสีใน เครื่องมือแปลงของ PolySVG ช่วยให้ชั่งน้ำหนักระหว่างคุณภาพกับขนาดไฟล์ได้แบบเรียลไทม์

เคล็ดลับ 2: รวมเส้นทางและชั้น

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

2. ภายในไฟล์: ตัด metadata และลดความละเอียด

เคล็ดลับ 3: ลบ metadata ของโปรแกรมแก้ไข

ไฟล์ SVG ที่ส่งออกจาก Illustrator หรือ Inkscape มักพ่วง namespace ของโปรแกรม <metadata> คอมเมนต์ และการตั้งค่าการส่งออกมาด้วย สิ่งเหล่านี้ไม่มีผลต่อการแสดงผล จึงลบด้วยมือหรือให้ SVGO จัดการอัตโนมัติ แต่ควรเก็บ <title> และ <desc> ไว้ เพราะช่วยเรื่องการเข้าถึง

เคล็ดลับ 4: ลดความละเอียดของตัวเลขทศนิยม

พิกัดของเส้นทางมักมีทศนิยมหกถึงแปดตำแหน่ง ขณะที่การวาดบนจอต้องการเพียงหนึ่งถึงสองตำแหน่ง ตั้ง floatPrecision ในไฟล์ตั้งค่า SVGO ให้เหลือ 1-2 ไฟล์จะเล็กลงอย่างเห็นได้ชัดโดยไม่มีความต่างที่มองเห็นได้ สำหรับไอคอนที่เล็กมาก ระวังอย่าบีบพิกัดจนเกินจนรูปร่างเพี้ยน

3. อัตโนมัติ: บีบอัดด้วย SVGO ในคำสั่งเดียว

เคล็ดลับ 5: เพิ่มประสิทธิภาพอัตโนมัติด้วย SVGO

SVGO เป็นเครื่องมือมาตรฐานในการเพิ่มประสิทธิภาพ SVG และมีปลั๊กอินหลายสิบตัว: ลบคอมเมนต์และ metadata รวมเส้นทาง เพิ่มประสิทธิภาพคำสั่งเส้นทาง และจัดการตัวเลข การใช้งานพื้นฐาน:

npx svgo input.svg -o output.svg

ไฟล์ทั่วไปเล็กลง 30%-70% ข้อควรระวังสองข้อ: อย่าลบพร็อพเพอร์ตี viewBox ไม้เช่นนั้นการขยายจะพัง และสำหรับไอคอนที่ต้องการเปลี่ยนสีด้วย CSS ให้คงการสืบทอด fill ไว้ อย่าฝังสีตายตัว

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

4. โครงสร้างและการใช้ซ้ำ: สัญลักษณ์และจำนวนชั้นสี

เคล็ดลับ 6: ใช้ defs และ use เพื่อใช้รูปซ้ำ

เมื่อไอคอนเดียวกันปรากฏหลายครั้งในหน้าเดียว ให้นิยามด้วย <defs> ครั้งเดียวแล้วอ้างอิงด้วย <use> หลายครั้ง หรือทำเป็น sprite sheet ของ SVG ขนาดไฟล์และจำนวน request จะลดลงพร้อมกัน

เคล็ดลับ 7: ควบคุมชั้นสีและหลีกเลี่ยงการฝังบิตแมป

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

5. การส่งมอบ: บีบอัดระหว่างส่งข้อมูลและแคช

เคล็ดลับ 8: เปิด gzip/Brotli และแคช

SVG เป็นข้อความ เมื่อเปิด gzip หรือ Brotli บนเซิร์ฟเวอร์ ขนาดที่ส่งมักลดลงอีก 60%-80% และควรตั้ง cache header ระยะยาวให้ไฟล์ SVG แบบคงที่ ไอคอนที่เล็กมากสามารถฝังลงใน HTML ได้ ซึ่งช่วยตัด request ทิ้งทั้งหมด หลักการเบื้องหลังอธิบายไว้ใน ข้อดีของ SVG และหากอยากควบคุมขนาดตั้งแต่ขั้นตอนแปลง อ่าน วิธีแปลงรูปเป็น SVG

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