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

ไอคอนและโลโก้ที่ส่งออกจากโปรแกรมออกแบบอย่าง Illustrator, Figma หรือ Sketch มักพ่วงข้อมูลส่วนเกินมาด้วยจำนวนมากซึ่งไม่มีผลต่อหน้าตาของภาพเลย เช่น เมตาดาต้าจากโปรแกรมแก้ไข ความคิดเห็น XML กลุ่มครอบที่ไม่จำเป็น พิกัดที่เขียนยาวถึงสิบห้าตำแหน่งทศนิยม และ ID ที่ไม่มีใครอ้างอิงถึง สิ่งเหล่านี้ไม่มีผลต่อการแสดงผล แต่กลับทำให้ทุกการดาวน์โหลดมีขนาดใหญ่ขึ้น — และถ้าเว็บไซต์ของคุณใช้ไอคอน SVG หลายสิบตัว ภาระส่วนเกินนี้ก็จะสะสมเพิ่มขึ้นอย่างรวดเร็ว

เครื่องมือนี้รัน svgo ซึ่งเป็นเอนจินปรับแต่งตัวเดียวกับที่อยู่เบื้องหลัง SVGOMG โดยทำงานทั้งหมดภายในเบราว์เซอร์ของคุณ วางโค้ด SVG หรือวางไฟล์ลงไป แล้วมันจะลบความคิดเห็นและสิ่งรกจากโปรแกรมแก้ไข รวม path เข้าด้วยกันเมื่อทำได้ ยุบกลุ่มที่ไม่จำเป็น และปัดเศษพิกัดตามความละเอียดที่คุณกำหนด — ทั้งหมดนี้โดยไม่ต้องออกจากอุปกรณ์ของคุณเลย ไม่มีขั้นตอนอัปโหลดและไม่มีเซิร์ฟเวอร์เข้ามาเกี่ยวข้อง จึงใช้ได้ดีเท่ากันไม่ว่าจะเป็นโลโก้ส่วนตัวของลูกค้าหรือไอคอนสาธารณะ

ค่าเริ่มต้นถูกตั้งไว้อย่างระมัดระวังโดยตั้งใจ คือยังคง viewBox ไว้ (เพื่อให้ไอคอนปรับขนาดได้ถูกต้องไม่ว่าจะนำไปวางที่ไหน) และคง width/height ไว้ตามเดิม การเปิดใช้ "ลบ width/height" มีประโยชน์เมื่อคุณฝัง SVG แบบอินไลน์และกำหนดขนาดด้วย CSS แทน เพราะขนาดคงที่บนองค์ประกอบรากอาจขัดแย้งกับสไตล์ชีตของคุณ มัลติพาสจะรันตัวปรับแต่งมากกว่าหนึ่งรอบ เพื่อจับการประหยัดขนาดที่ปรากฏขึ้นหลังจากรอบแรกทำให้โค้ดเรียบง่ายขึ้นแล้วเท่านั้น — การเปิดใช้ทิ้งไว้แทบไม่มีข้อเสีย

ความละเอียดกำหนดว่าจะเก็บทศนิยมกี่ตำแหน่งไว้ในพิกัดของ path การลดค่านี้จะทำให้ไฟล์เล็กลงไปอีก แต่ก็อาจทำให้ภาพที่มีรายละเอียดสูงมากเกิดความคลาดเคลื่อนทางสายตาเล็กน้อย จึงควรตรวจสอบตัวอย่างแบบเรียลไทม์หลังปรับค่านี้ สำหรับไอคอนและโลโก้ส่วนใหญ่ เพียงแค่ค่าเริ่มต้นก็มักจะลดขนาดไฟล์ได้ 40–60% โดยไม่มีความแตกต่างที่มองเห็นได้ — ใช้ตัวอย่างและตัวนับขนาดก่อน/หลังเพื่อยืนยันก่อนดาวน์โหลด