ทริคTools

ลดขนาด SVG

ลดโค้ดส่วนเกินในไฟล์ SVG ให้โหลดเร็วขึ้นและแก้ไขต่อได้ง่าย

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

ลดขนาด SVG คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

ไฟล์ SVG มีขนาดใหญ่ผิดปกติทั้งที่เป็นไอคอนเรียบๆ

อ่านแล้วทำอะไรต่อ

รัน SVGO กับโฟลเดอร์ไอคอน 30 ไฟล์ ลดขนาดรวมลงราวครึ่งหนึ่งโดยภาพไม่เปลี่ยน

เห็นภาพ: ทริคนี้เป็นยังไง

ก่อนบีบ

icon.svg — 4.2 KB มี metadata, comment ทศนิยมยาวเกินจำเป็น

หลัง SVGO

icon.svg — 2.0 KB ตัดส่วนเกินทิ้ง ภาพคมเหมือนเดิม

SVGO ตัดส่วนเกินออก — เล็กลงราวครึ่ง ภาพเหมือนเดิม

ใช้ตอนไหน?

ไฟล์ SVG มีขนาดใหญ่ผิดปกติทั้งที่เป็นไอคอนเรียบๆ
คุณต้องวางโค้ด SVG ลงในหน้าเว็บโดยตรง (inline) และอยากให้สั้น
คุณต้องแก้สีหรือเส้นต่อ แต่โค้ดรกจนหาไม่เจอ

ความหมาย

ไฟล์ SVG ที่ส่งออกจากโปรแกรมออกแบบมักมีโค้ดส่วนเกิน เช่น เมตาดาตา (ข้อมูลกำกับที่ไม่แสดงผล), ความละเอียดทศนิยมเกินจำเป็น และเลเยอร์ที่ไม่ได้ใช้ การ optimize คือการตัดส่วนเกินเหล่านี้ออกด้วยเครื่องมืออย่าง SVGO โดยที่ภาพยังเหมือนเดิม

ลดขนาดด้วย SVGO

SVGO เป็นเครื่องมือบรรทัดคำสั่งสำหรับบีบโค้ด SVG ใช้ได้ทั้งทีละไฟล์และทั้งโฟลเดอร์

# ลดทีละไฟล์
npx svgo truck.svg -o truck.min.svg

# ลดทั้งโฟลเดอร์
npx svgo -f icons/ -o icons-min/

ตัวอย่างการใช้

บีบไอคอนชุดเดียว