ปรับแต่ง SVG (ทำความสะอาดและลดขนาดไฟล์ SVG)

SVG ที่ส่งออกจาก Inkscape หรือ Illustrator มีข้อมูลของโปรแกรมแก้ไข คอมเมนต์ และพิกัดที่มีทศนิยมหลายตำแหน่ง ทำให้ไฟล์ใหญ่กว่าที่ภาพต้องการ วางโค้ดหรือวางไฟล์เพื่อตัดส่วนเกินเหล่านี้ ดูจำนวนไบต์ที่ประหยัดได้ และเปรียบเทียบภาพก่อนและหลัง

วิธีใช้

1. วางโค้ดใน "โค้ด SVG" หรือวางไฟล์ .svg ในกล่องด้านล่าง
2. เลือกสิ่งที่จะลบใน "ตัวเลือก" ค่าเริ่มต้นไม่เปลี่ยนภาพ ส่วน "ลบ title และ desc" และ "ลบ id ที่ไม่มีอะไรอ้างอิง" จะปิดไว้จนกว่าคุณจะต้องการ
3. ลด "จำนวนตำแหน่งทศนิยม" เพื่อให้พิกัดสั้นลง สำหรับไอคอนใช้หนึ่งหรือสองตำแหน่งก็พอ
4. ตรวจว่า "ตัวอย่างก่อน" และ "ตัวอย่างหลัง" ตรงกัน แล้วกด "คัดลอก" หรือ "บันทึก SVG" หากมีหลายไฟล์ "บันทึกทั้งหมดเป็น ZIP" จะดาวน์โหลดรวมกัน

หลักการทำงาน

• สคริปต์ แอตทริบิวต์เหตุการณ์ที่ขึ้นต้นด้วย on foreignObject และการอ้างอิงที่อยู่ http หรือไฟล์อื่นจะถูกลบเสมอ และจำนวนจะแสดงเหนือผลลัพธ์
• ข้อมูลโปรแกรมแก้ไขหมายถึงแอตทริบิวต์และองค์ประกอบที่มีคำนำหน้าอย่าง inkscape: หรือ sodipodi: และการประกาศเนมสเปซที่ไม่ได้ใช้ การลบค่าเริ่มต้นจะแตะเฉพาะแอตทริบิวต์อย่าง fill-opacity="1" ที่ไม่มีก็วาดภาพเดิม
• การจัดตัวเลขจะปัดค่า path viewBox points transform และพิกัดเป็นจำนวนตำแหน่งที่เลือก ไม่แปลงพิกัดหรือรวมรูปทรง ทุกอย่างทำงานในเบราว์เซอร์และไม่มีไฟล์ถูกส่งไปที่ใด

คำถามที่พบบ่อย

ทำไม SVG ถึงใหญ่กว่าที่ภาพดูมาก

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

ภาพอาจเปลี่ยนหลังทำความสะอาดไหม

ตัวเลือกเริ่มต้นลบเฉพาะสิ่งที่ไม่มีผลต่อการแสดงผล การปัดเป็นทศนิยม 0 หรือ 1 ตำแหน่งอาจทำให้เส้นในภาพเล็กมากเลื่อนได้ จึงควรเทียบตัวอย่างทั้งสอง

ทำไมจึงเก็บ title และ desc ไว้เป็นค่าเริ่มต้น

โปรแกรมอ่านหน้าจออ่านข้อความเหล่านี้เพื่ออธิบายภาพ สำหรับ SVG ที่ใช้ตกแต่งล้วน ๆ คุณเปิด "ลบ title และ desc" ได้

ผลลัพธ์เหมือน SVGO ไหม

ไม่ เครื่องมือนี้ทำเฉพาะการทำความสะอาดที่ปลอดภัย เช่น ลบเมตาดาตาและปัดตัวเลข ไม่รวม path แต่ไม่ต้องติดตั้งและตรวจผลลัพธ์ด้วยตาได้