เครื่องมือเพิ่มประสิทธิภาพ SVG

ขึ้นอยู่กับแหล่งที่มาอย่างมาก ไฟล์ SVG ที่ส่งออกจาก Adobe Illustrator มักจะรวม metadata เฉพาะของ Illustrator, ข้อมูลเลเยอร์, การอ้างอิงฟอนต์ และ XML namespaces จำนวนมากที่ถูกตัดออก ส่วนการส่งออกจาก Inkscape จะมี editor namespaces และคอมเมนต์ของตัวเอง ส่วน Figma SVGs โดยทั่วไปจะสะอาดกว่า การประหยัดพื้นที่โดยประมาณ: 20-40% สำหรับ SVG ที่สะอาดอยู่แล้ว, 40-70% สำหรับการส่งออกจาก Illustrator หรือ Inkscape ที่มี metadata หนักๆ เครื่องมือจะแสดงจำนวน byte ที่แน่นอนก่อนและหลังการปรับปรุงเพื่อให้คุณทราบผลลัพธ์เสมอ

เครื่องมือออกแบบจะฝังข้อมูลเฉพาะของตนเองไว้ในไฟล์ SVG เพื่อรักษาฟีเจอร์การแก้ไขของตนเอง: Inkscape จะเก็บชื่อเลเยอร์และตำแหน่งไกด์ใน sodipodi: และ inkscape: namespaces, Illustrator ฝังข้อมูลใน i: และ dc: namespaces และเครื่องมือรุ่นเก่าอาจรวม metadata ของ Sketch หรือ Adobe การทำงานเหล่านี้ไม่จำเป็นสำหรับการแสดงผล SVG ในเบราว์เซอร์ การลบ editor data มักจะช่วยลดขนาดไฟล์ได้มากที่สุด โดยเฉพาะสำหรับไฟล์ Illustrator ที่มีความซับซ้อน

Decimal precision ควบคุมจำนวนหลักที่เก็บไว้หลังจุดทศนิยมในค่าพิกัด (เช่น d="M 10.3456789 20.1234567") การลดจาก 6 เป็น 2 จะเปลี่ยนเป็น d="M 10.35 20.12" ซึ่งช่วยประหยัด byte โดยแลกกับการปัดเศษพิกัดเล็กน้อย สำหรับไอคอนและการวาดภาพประกอบง่ายๆ ค่าความละเอียด 2-3 จะไม่มีผลต่อสายตา แต่สำหรับการวาดแบบทางเทคนิคที่มีรายละเอียดหรือภาพประกอบที่มีเส้นโค้งละเอียด ให้คงไว้ที่ 4-5 ตรวจสอบตัวอย่างด้วยการซูม 100% หลังจากลดความละเอียดเพื่อดูว่ามีการปัดเศษที่ผิดปกติหรือไม่

องค์ประกอบของ SVG มักจะมี ID ที่ยาวเกินความจำเป็นซึ่งสร้างโดยเครื่องมือออกแบบ เช่น id="rect_123456789" หรือ id="Layer_1_xA0_Background" การทำความสะอาด IDs จะแทนที่ด้วยชื่อที่สั้นลงเช่น id="a" หรือ id="b" ช่วยประหยัด bytes ในไฟล์ SVG ขนาดใหญ่ที่มีองค์ประกอบอ้างอิงจำนวนมาก วิธีนี้ปลอดภัยสำหรับไฟล์ SVG ที่แยกอิสระ หาก ID ของ SVG ของคุณถูกอ้างอิงโดย CSS selectors ภายนอกหรือ JavaScript ในหน้าเว็บของคุณ (เช่น document.getElementById("myIcon")) ให้ปิดตัวเลือกนี้หรืออัปเดตการอ้างอิงของคุณหลังจากปรับแต่ง

ได้ คลิก "Or paste SVG code" เพื่อเปลี่ยนไปยังแผงป้อนข้อมูลโค้ดและวาง SVG markup ของคุณลงไปโดยตรง วิธีนี้จะมีประโยชน์เมื่อคุณมี SVG ฝังอยู่ในไฟล์ HTML, คัดลอกมาจากเครื่องมือออกแบบ หรือสร้างโดยไลบรารีแผนภูมิ หลังจากปรับแต่งแล้ว ให้คัดลอกผลลัพธ์ด้วยปุ่ม Copy Code และนำไปวางในตำแหน่งที่ต้องการ

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

ควรปรับแต่งก่อนการ commit ไฟล์ SVG ที่เล็กลงหมายถึงการทำงานของ git ที่เร็วขึ้น ขนาด repository ที่เล็กลง และ diff ที่สะอาดขึ้น (เนื่องจาก editor metadata มักจะเปลี่ยนแปลงทุกครั้งที่บันทึกใน Illustrator) เวิร์กโฟลว์ที่ดีคือ: ส่งออกจากเครื่องมือออกแบบของคุณ, รันผ่านเครื่องมือปรับแต่งนี้, ตรวจสอบตัวอย่าง, จากนั้นค่อย commit เวอร์ชันที่ปรับปรุงแล้ว เก็บไฟล์ต้นฉบับไว้ในโฟลเดอร์สินทรัพย์การออกแบบแยกต่างหากหากคุณจำเป็นต้องแก้ไขใหม่ในภายหลัง