เครื่องมือจะโหลดเอนจิน SVGO สำหรับเบราว์เซอร์อย่างเป็นทางการหลังจากกดลดขนาดเท่านั้น โดยใช้ชุดปลั๊กอินมาตรฐานและลบสคริปต์กับตัวจัดการอีเวนต์ เพื่อให้เหมาะกับการใช้เป็นภาพบนเว็บมากขึ้น หาก CSS, JavaScript, เกรเดียนต์, มาสก์ หรือการอ้างอิงจากภายนอกต้องใช้ ID ก็เลือกเก็บ ID ไว้ได้
ลดขนาด SVG ฟรี
ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก
สคริปต์และตัวจัดการอีเวนต์จะถูกลบ
SVG ต้นฉบับ
SVG ที่ลดขนาดแล้ว
Ctrl หรือ Command + Enter
วางโค้ด SVG หรือเลือกไฟล์เพื่อเริ่มต้น
การลดขนาด SVG ช่วยอะไรได้บ้าง
การลดขนาด SVG จะตัดข้อมูลจากโปรแกรมออกแบบ คอมเมนต์ แอตทริบิวต์ที่ซ้ำซ้อน และทศนิยมที่ละเอียดเกินจำเป็นออกจากไฟล์เวกเตอร์ วางโค้ดหรือเลือกไฟล์เพื่อเรียกใช้ SVGO ในเบราว์เซอร์ แล้วเปรียบเทียบพรีวิวต้นฉบับกับผลลัพธ์ จากนั้นคัดลอกหรือดาวน์โหลด SVG ที่เล็กลงได้โดยไม่ต้องอัปโหลดงานออกแบบ
วิธีใช้งาน
- 1เพิ่ม SVG. วางโค้ด SVG ที่สมบูรณ์ ลากไฟล์ .svg จากเครื่องมาวางในช่องอัปโหลด หรือเปิดตัวอย่างที่มีให้
- 2เลือกการตั้งค่าที่ปลอดภัย. กำหนดจำนวนตำแหน่งทศนิยม เปิดการประมวลผลหลายรอบไว้หากต้องการลดเพิ่ม และเก็บ ID ไว้เมื่อมีโค้ดอื่นอ้างอิงถึง
- 3ลดขนาดและเปรียบเทียบ. เรียกใช้ SVGO แล้วดูจำนวนไบต์ก่อนกับหลัง พร้อมพรีวิวภาพทั้งสองแบบ
- 4คัดลอกหรือดาวน์โหลด. คัดลอกโค้ดที่กระชับแล้ว หรือดาวน์โหลดไฟล์ .optimized.svg ใหม่ โดยไฟล์ต้นฉบับจะไม่ถูกแก้ไข
เหมาะกับใคร
- นักพัฒนา frontend ที่ต้องการลดขนาดไอคอน โลโก้ และภาพประกอบก่อนนำไปใส่เว็บไซต์หรือ component library
- นักออกแบบ ที่ต้องการล้าง metadata และโค้ดเฉพาะโปรแกรมออกจากไฟล์ที่ส่งออกจาก Figma, Illustrator, Sketch หรือ Inkscape
- ทีมดูแลประสิทธิภาพ ที่ต้องการวัดจำนวนไบต์ UTF-8 ที่ประหยัดได้จริงก่อนใส่ไฟล์เวกเตอร์ลงใน web bundle
- ผู้เขียน component ที่เตรียมโค้ด SVG แบบ inline ให้กระชับสำหรับ React, Vue, Svelte หรือ HTML ปกติ
คำถามที่พบบ่อย
เครื่องมือลดขนาด SVG นี้ใช้ฟรีไหม
ใช้ฟรี ไม่ต้องมีบัญชี จ่ายเงิน หรือติดตั้งโปรแกรม เครื่องมือแสดงการเปลี่ยนแปลงเป็นไบต์ UTF-8 อย่างแม่นยำ และคัดลอกหรือดาวน์โหลดผลลัพธ์จากเบราว์เซอร์ได้ทันที
ไฟล์ SVG จะถูกอัปโหลดไปที่เซิร์ฟเวอร์ไหม
ไม่อัปโหลด การอ่านไฟล์ ประมวลผลด้วย SVGO วัดจำนวนไบต์ และสร้างพรีวิวเกิดขึ้นในเบราว์เซอร์บนเครื่องทั้งหมด โลโก้ ไอคอน และงานที่ยังไม่เผยแพร่จะไม่ถูกส่งออกจากเครื่องผ่านเครื่องมือนี้
ลดขนาดไฟล์ SVG ได้ใหญ่แค่ไหน
เครื่องมือรับโค้ด SVG ขนาดไม่เกิน 5 MB ขีดจำกัดนี้ช่วยให้การอ่านไฟล์ยังลื่นบนโทรศัพท์และแล็ปท็อปทั่วไป หากภาพประกอบที่ส่งออกมีขนาดใหญ่มาก ลองนำภาพ raster ที่ฝังอยู่ออก หรือแยกงานเป็นไฟล์ย่อย
ลดขนาด SVG แล้วภาพจะเปลี่ยนไหม
SVGO ถูกออกแบบมาให้คงการแสดงผลเดิมขณะลบข้อมูลที่ไม่จำเป็น แต่การปัดตัวเลขมากเกินไปหรือจัดการ ID อาจกระทบไฟล์ที่ซับซ้อน ควรเทียบพรีวิวทั้งสองและทดสอบ SVG ที่ลดขนาดแล้วในรูปแบบการฝังจริงก่อนแทนที่ไฟล์ที่ใช้งานอยู่
จำนวนตำแหน่งทศนิยมมีผลอย่างไร
ค่านี้กำหนดว่า SVGO จะเก็บทศนิยมกี่ตำแหน่งในพิกัด transform และตัวเลขที่เกี่ยวข้อง ค่าต่ำมักลดขนาดได้มากขึ้น แต่อาจทำให้รายละเอียดเล็กมากหรืองานขนาดใหญ่ขยับจนสังเกตเห็นได้ ค่าเริ่มต้น 3 ตำแหน่งเหมาะกับไอคอนและภาพประกอบบนเว็บส่วนใหญ่
ควรเก็บ ID ใน SVG ไว้ไหม
ควรเก็บไว้เมื่อ CSS, JavaScript, แอตทริบิวต์ aria, เกรเดียนต์, มาสก์, ฟิลเตอร์ หรือเอกสารภายนอกอ้างอิงถึง ID สำหรับภาพตกแต่งที่ใช้เดี่ยวๆ สามารถปิดตัวเลือกนี้เพื่อให้ SVGO ลบหรือย่อ identifier ที่ไม่ได้ใช้
เครื่องมือจะลบสคริปต์ออกจาก SVG ไหม
ลบ กระบวนการลดขนาดจะลบเอลิเมนต์ script แอตทริบิวต์ตัวจัดการอีเวนต์ และลิงก์ JavaScript ทำให้ไฟล์เหมาะกับการใช้เป็นภาพเว็บทั่วไปมากขึ้น แต่ไม่เหมาะกับแอป SVG ที่ต้องใช้สคริปต์ในการทำงาน
การประมวลผลหลายรอบทำงานอย่างไร
SVGO จะนำผลลัพธ์มาประมวลผลอีกครั้งตราบใดที่แต่ละรอบยังทำให้ไฟล์เล็กลง การแปลงบางอย่างเปิดจุดที่รอบถัดไปล้างได้เพิ่ม จึงอาจลดขนาดได้อีกเล็กน้อย แต่ส่วนใหญ่มักลดได้มากที่สุดในรอบแรก