ข้ามไปยังเนื้อหา
EVOA Toolbox

ปรับ SVG ให้เล็กลง

ลดขนาดไฟล์ SVG ด้วย SVGO ลบเมทาดาทาและส่วนที่ไม่จำเป็น ควบคุมความแม่นยำ คง ID และ viewBox และเปรียบเทียบก่อนและหลัง

ประมวลผลในเบราว์เซอร์ของคุณ ไฟล์ของคุณไม่ถูกอัปโหลด

กำลังโหลดเครื่องมือ…

เครื่องมือนี้ทำอะไรได้

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

ตัวเลือกครอบคลุมสิ่งที่สำคัญจริง ๆ ได้แก่ คง viewBox เพื่อให้ภาพยังปรับสเกลได้ คงชื่อ id และ class เมื่อ CSS หรือ JavaScript อ้างอิงถึง ลบเมทาดาทา คอมเมนต์ หรือ title เลือกจำนวนทศนิยมที่พาธเก็บไว้ และลบสคริปต์ เมื่อไฟล์เล็กที่สุดอยู่แล้ว เครื่องมือจะแจ้งตามจริงแทนที่จะแสร้งว่าประหยัดไบต์ได้

ตัวอย่างถูกเรนเดอร์ผ่านองค์ประกอบ image สคริปต์ภายใน SVG จึงไม่ทำงานบนหน้านี้ และโค้ดจะแสดงเป็นข้อความ หาก SVG มีสคริปต์ ตัวจัดการเหตุการณ์ foreignObject หรือการอ้างอิงภายนอก คุณจะเห็นคำเตือน ไม่มีการอัปโหลดใด ๆ

วิธีใช้งาน

  1. 1เพิ่มไฟล์ SVG
  2. 2ตรวจสอบคำเตือน (ถ้ามี) เกี่ยวกับสคริปต์หรือการอ้างอิงภายนอก
  3. 3ปรับตัวเลือก ผลลัพธ์จะอัปเดตอัตโนมัติ
  4. 4เปรียบเทียบขนาดและตัวอย่างก่อนและหลัง
  5. 5คัดลอกโค้ดที่ปรับแล้ว หรือดาวน์โหลดไฟล์ .min.svg

รูปแบบที่รองรับ

อินพุตและเอาต์พุต: SVG (.svg)

ความเป็นส่วนตัว

เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณ ข้อมูลที่คุณป้อนจะถูกประมวลผลบนอุปกรณ์ของคุณและไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ข้อจำกัด

  • ความแม่นยำที่ต่ำลงทำให้ไฟล์เล็กลงแต่อาจทำให้รายละเอียดละเอียดบิดเบี้ยวเห็นได้ชัด ควรเปรียบเทียบตัวอย่างก่อนนำผลลัพธ์ไปใช้
  • การลบ ID หรือ class อาจทำให้ CSS, JavaScript หรือการอ้างอิง <use> เสียหาย เปิดใช้คง ID หากคุณต้องพึ่งพาสิ่งเหล่านี้
  • การลบ viewBox ทำให้ภาพไม่ปรับสเกลตามคอนเทนเนอร์ ค่าเริ่มต้นคือคงไว้
  • ไฟล์ที่ปรับให้เหมาะสมแล้วอาจไม่เล็กลงเลย และในบางกรณีที่พบได้น้อยอาจใหญ่ขึ้นเล็กน้อย
  • รองรับเฉพาะภาพ SVG เท่านั้น ภาพแรสเตอร์ที่ฝังอยู่ใน SVG จะไม่ถูกบีบอัดใหม่

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

การปรับให้เหมาะสมนี้ไม่สูญเสียคุณภาพหรือไม่

ด้วยการตั้งค่าเริ่มต้น ภาพควรดูเหมือนเดิม แต่การลดความแม่นยำ การรวมพาธ หรือการลบ title จะเปลี่ยนเนื้อหาไฟล์ จึงควรเปรียบเทียบตัวอย่างเสมอ

ทำไม SVG ของฉันไม่เล็กลง

ไฟล์อาจถูก minify มาแล้ว ลองลดทศนิยม หรือลบ title และเมทาดาทาหากไม่จำเป็น

การเปิดไฟล์ SVG ที่มีสคริปต์ปลอดภัยหรือไม่

ตัวอย่างใช้องค์ประกอบ image ซึ่งไม่รันสคริปต์ และโค้ดแสดงเป็นข้อความ อย่างไรก็ตาม อย่านำ SVG จากแหล่งที่ไม่น่าเชื่อถือมาใส่แบบ inline ในหน้าเว็บของคุณ เปิดใช้ลบสคริปต์เพื่อตัดสคริปต์ออก

คง ID ทำอะไร

โดยปกติ SVGO จะย่อหรือลบ ID ที่เห็นว่าไม่ได้ใช้ การคงไว้จะรักษาจุดเชื่อมสำหรับ CSS แอนิเมชัน และการอ้างอิง <use>

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