ปรับแต่ง SVG

วางหรือวาง SVG แล้วลดขนาดด้วย SVGO ทุกอย่างอยู่ในเบราว์เซอร์

ปรับแต่ง SVG ทำงานอย่างไร

SVG Optimizer รัน SVGO (SVG Optimizer) ใน Web Worker ภายในเบราว์เซอร์ของคุณเพื่อทำ minify และทำความสะอาดไฟล์ SVG โดยไม่ต้องอัปโหลด SVGO ใช้ชุด plugins ที่กำหนดค่าได้ซึ่งลบความคิดเห็น ย่อ whitespace รวม path ที่เหมือนกัน แปลงรูปทรงเป็นการแสดงที่กะทัดรัดที่สุด และลบแอตทริบิวต์ที่ไม่มีผลทางสายตา ผลลัพธ์คือ SVG ที่เล็กกว่าซึ่งแสดงผลเหมือนกับต้นฉบับ

ไฟล์ SVG ที่สร้างโดยเครื่องมือออกแบบ เช่น Figma, Illustrator หรือ Inkscape มักมี overhead มาก: metadata เฉพาะ editor กลุ่มว่าง แอตทริบิวต์ transform ที่ซ้ำซ้อน และ namespace declarations ที่ไม่มีเบราว์เซอร์ต้องการ ชุด plugin เริ่มต้นของ SVGO ลบ overhead นี้อย่างน่าเชื่อถือ ไฟล์ที่ optimize แล้วเสนอเป็นการดาวน์โหลดและแสดงการลดขนาดเป็นเปอร์เซ็นต์เพื่อยืนยันว่าการ optimize คุ้มค่า

เขียนโดย Bastien Sulyan

วิธีใช้ ปรับแต่ง SVG ทีละขั้นตอน

วางไฟล์ SVG ลงบนพื้นที่อัปโหลดหรือคลิกเพื่อเรียกดู
SVGO Web Worker รันการ optimize ทันทีด้วยชุด plugin เริ่มต้น
ดูการลดเปอร์เซ็นต์และขนาดไฟล์ต้นฉบับเทียบกับที่ optimize แล้ว
คลิก Download เพื่อบันทึก SVG ที่ optimize แล้วลงอุปกรณ์ของคุณ
หาก plugin เฉพาะทำให้เกิดปัญหาการแสดงผล ให้ปรับการกำหนดค่า plugin และ optimize ใหม่

กรณีการใช้งานที่พบบ่อย

นักพัฒนา front-end optimize ไอคอนที่ส่งออกจาก Figma ก่อน commit เข้า asset pipeline ของ production ลดขนาดแต่ละไอคอนจาก 4 KB เป็นต่ำกว่า 1 KB
นักออกแบบเว็บทำความสะอาดภาพประกอบ SVG ที่ส่งออกจาก Illustrator ซึ่งมีชั้น metadata ของ editor ที่มองไม่เห็นในเบราว์เซอร์แต่ทำให้ไฟล์ใหญ่ขึ้น
นักพัฒนาที่สร้าง icon font จาก SVG glyphs ตรวจสอบให้แน่ใจว่า SVG ต้นฉบับแต่ละอันสะอาดและมีโครงสร้างที่สอดคล้องกันก่อนขั้นตอนสร้าง font
วิศวกรด้านประสิทธิภาพตรวจสอบ inline SVG ใน HTML และแทนที่ต้นฉบับที่ใหญ่แต่ละอันด้วยเวอร์ชันที่ optimize ด้วย SVGO เพื่อปรับปรุงน้ำหนักหน้า

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

SVGO จะเปลี่ยนลักษณะ SVG ของฉันหรือไม่?

plugins เริ่มต้นของ SVGO ถูกเลือกให้ไม่มีผลกระทบทางสายตา SVG ที่ optimize แล้วแสดงผลเหมือนกับต้นฉบับในเบราว์เซอร์มาตรฐานทั้งหมด บาง plugins ที่เข้มข้น (เช่น plugins ที่ round coordinates ของ path มาก) อาจทำให้เกิดความแตกต่างในการแสดงผลเล็กน้อย หากคุณสังเกตเห็นการเปลี่ยนแปลงทางสายตา ให้เปรียบเทียบไฟล์ต้นฉบับและที่ optimize แล้วในเบราว์เซอร์และปิดการใช้งาน plugin เฉพาะที่ทำให้เกิดปัญหา

ไฟล์ SVG ถูกส่งไปยังเซิร์ฟเวอร์เพื่อ optimize หรือไม่?

ไม่ SVGO ทำงานใน Web Worker ภายในแท็บเบราว์เซอร์ของคุณ ข้อความ SVG ถูกอ่านจากดิสก์ในเครื่อง ประมวลผลในหน่วยความจำ JavaScript และเอาต์พุตถูกส่งคืนไปยังหน้าเพื่อดาวน์โหลด เนื้อหาไฟล์ไม่ออกจากอุปกรณ์ของคุณ

SVG ของฉันจะเล็กลงแค่ไหน?

การลดขึ้นอยู่กับต้นฉบับ SVG ที่ส่งออกจากเครื่องมือออกแบบพร้อม metadata ของ editor มักจะเล็กลง 30 ถึง 70 เปอร์เซ็นต์ SVG ที่เขียนด้วยมือซึ่งเป็น lean อยู่แล้วอาจเห็นการลดเพียง 5 ถึง 15 เปอร์เซ็นต์ เครื่องมือแสดงจำนวนไบต์และเปอร์เซ็นต์ที่แน่นอนเพื่อให้คุณประเมินแต่ละไฟล์แยกกัน

การ optimize มีผลต่อ SVG animations หรือ JavaScript ภายในไฟล์หรือไม่?

การกำหนดค่านี้รักษา animation elements และ SMIL attributes ไว้ เครื่องมือนี้ลบ script elements จริง: เครื่องมือเพิ่ม plugin removeScripts เหนือ preset เริ่มต้นของ SVGO เพราะ SVG ที่คุณกำลังจะฝังไม่ควรมีโค้ดที่ execute ได้ บาง plugins ที่ทำความสะอาด attributes อาจโต้ตอบกับ animations หาก animation อ้างอิง attributes เหล่านั้นโดย ID ตรวจสอบเอาต์พุตที่แสดงผลหลังจาก optimize ไฟล์ที่ใช้ animations ที่ซับซ้อน

ฉันสามารถ optimize ไฟล์ SVG หลายไฟล์พร้อมกันได้หรือไม่?

เวอร์ชันปัจจุบันประมวลผลทีละไฟล์ SVG วางไฟล์ ดาวน์โหลดผลลัพธ์ จากนั้นวางไฟล์ถัดไป การประมวลผลแบบ batch สำหรับหลายไฟล์ในเซสชันเดียวไม่มีในรุ่นนี้

เครื่องมือใช้ SVGO เวอร์ชันใด?

เครื่องมือ bundle SVGO ที่ทำงานใน Web Worker เวอร์ชัน bundle ระบุไว้ในข้อมูลเกี่ยวกับเครื่องมือ SVGO ได้รับการดูแลอย่างแข็งขันและ plugin API เปลี่ยนแปลงอย่างมีนัยสำคัญระหว่าง v1, v2 และ v3 เครื่องมือปัจจุบันใช้รูปแบบ plugin v3

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

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือรูปภาพทั้งหมด

ปรับแต่ง SVG