ย่อและเพิ่มประสิทธิภาพ SVG ฟรี

วิธีการทำงาน

เครื่องมือนี้ลดขนาดไฟล์ SVG ด้วยตัวปรับแต่งที่เขียนขึ้นเองซึ่งทำงานในเบราว์เซอร์ทั้งหมด — ไม่มีไลบรารี ไม่มีเซิร์ฟเวอร์ รวมสองรอบ: DOMParser/XMLSerializer ในตัวของเบราว์เซอร์สำหรับงานความแม่นยำระดับแอตทริบิวต์ และการแทนที่ regex เฉพาะจุดสำหรับตัดคอมเมนต์ ลบเมทาดาทา และยุบช่องว่าง

1. 1
   DOMParser กรองความปลอดภัยของ SVG

   ก่อนการปรับแต่งใด ๆ DOMParser ของเบราว์เซอร์อ่าน SVG เป็น XML และไล่ทุกองค์ประกอบ แท็กสคริปต์ ตัวจัดการเหตุการณ์ (แอตทริบิวต์ on* ใด ๆ) องค์ประกอบแอนิเมชัน และการอ้างอิง URL ภายนอกถูกลบโดยไม่มีเงื่อนไข — ทำงานไม่ว่าคุณจะเลือกตัวเลือกการปรับแต่งใด
2. 2
   ปัดทศนิยมผ่าน DOM

   หากเปิดการปัดทศนิยม ตัวปรับแต่งจะไล่ DOM ที่แยกวิเคราะห์แล้วอีกครั้งและปัดเฉพาะแอตทริบิวต์ตัวเลขที่รู้จัก (ข้อมูล path d พิกัด ค่า transform ความกว้างเส้น ฯลฯ) ด้วย regex ที่จับตัวเลขทศนิยมลอยตัวทีละตัวโดยไม่ทำลายค่า path ที่ต่อกันอย่าง .5.5
3. 3
   regex หลายรอบทำความสะอาดมาร์กอัปที่แปลงแล้ว

   XMLSerializer สร้าง XML ที่เป็นมาตรฐาน จากนั้นการแทนที่สตริงเฉพาะจุดจะตัดคอมเมนต์ HTML เมทาดาทาของตัวแก้ไข Inkscape/Sodipodi การประกาศ XML แอตทริบิวต์ค่าเริ่มต้นที่ซ้ำซ้อน (เช่น version="1.1") และช่องว่างระหว่างแท็ก — แต่ละรอบจำกัดขอบเขตแคบ เนื้อหาโหนดข้อความจึงไม่ถูกแตะต้อง
4. 4
   ขนาด gzip และรูปแบบการส่งออก

   CompressionStream API ของเบราว์เซอร์คำนวณขนาด gzip จริงของทั้งอินพุตและผลลัพธ์ เพราะนั่นคือสิ่งที่กำหนดต้นทุนการส่งบนเว็บจริง SVG ที่ปรับแต่งแล้วดาวน์โหลดได้ คัดลอกเป็น SVG ดิบ แปลงเป็นแอตทริบิวต์ camelCase ที่พร้อมใช้ใน React JSX หรือเข้ารหัสเป็น CSS data URI — การแปลงทั้งหมดเกิดขึ้นในเครื่อง

เครื่องมือที่เกี่ยวข้อง