เครื่องมือปรับแต่งและแสดงตัวอย่าง SVG
แสดงตัวอย่างและปรับแต่งโค้ด SVG ได้ทันที
แสดงตัวอย่างและปรับแต่งโค้ด SVG ได้ทันที
การปรับแต่งไฟล์ SVG ช่วยเพิ่มประสิทธิภาพการทำงานของวิศวกรเว็บอย่างมากในสถานการณ์ต่อไปนี้:
ไอคอน SVG หรือโลโก้ที่ได้รับจากนักออกแบบจะมีข้อมูลเมตาที่สร้างโดยเครื่องมืออย่าง Adobe Illustrator หรือ Figma ทำให้ขนาดไฟล์ใหญ่ขึ้น การปรับแต่งสามารถลดขนาดไฟล์ SVG ที่ฝังใน HTML หรือ CSS ได้ 30-50% และปรับปรุงความเร็วในการโหลดหน้าเว็บ
ในสภาพแวดล้อมมือถือ ปริมาณการสื่อสารและความเร็วในการเรนเดอร์เป็นสิ่งสำคัญ SVG ที่มีน้ำหนักเบาโดยการลบข้อมูลที่ไม่จำเป็นสามารถปรับปรุงประสบการณ์ผู้ใช้มือถืออย่างมาก โดยเฉพาะใน UI ที่ใช้ไอคอนจำนวนมากจะเห็นผลชัดเจน
เครื่องมือออกแบบอย่าง Illustrator, Sketch, Figma จะรวมข้อมูลเลเยอร์ ไกด์ องค์ประกอบที่ซ่อนอยู่ และข้อมูลการแก้ไขอื่นๆ ไว้ใน SVG ข้อมูลเหล่านี้ไม่จำเป็นสำหรับการแสดงผล สามารถลบออกได้ทั้งหมดด้วยเครื่องมือนี้
เมื่อฝัง SVG โดยตรงใน HTML ความสามารถในการอ่านโค้ดเป็นสิ่งสำคัญ การปรับแต่งจะลบความคิดเห็นและช่องว่างที่ไม่จำเป็น ช่วยรักษาซอร์สโค้ด HTML ให้สะอาดและลดขนาดไฟล์ด้วย
ในระบบไอคอนที่จัดการไอคอน SVG หลายตัวเป็นสัญลักษณ์ การปรับแต่งแต่ละ SVG สามารถลดขนาดบันเดิลโดยรวมได้อย่างมาก โดยเฉพาะใน React, Vue และการพัฒนาแบบคอมโพเนนต์อื่นๆ จะมีประสิทธิภาพมาก
ก่อนที่จะแนะนำเครื่องมืออัตโนมัติอย่าง SVGO การใช้เครื่องมือนี้ในการตรวจสอบด้วยตนเองสามารถประเมินผลของการปรับแต่งล่วงหน้าได้ ยังมีประโยชน์เป็นการทดสอบก่อนที่จะรวมเข้ากับไปป์ไลน์ CI/CD
การปรับแต่ง SVG คือการประมวลผลเพื่อลบข้อมูลที่ไม่จำเป็นออกจากไฟล์ SVG เพื่อลดขนาดไฟล์โดยไม่เปลี่ยนรูปลักษณ์ของภาพ เครื่องมือนี้จะลบองค์ประกอบต่อไปนี้โดยอัตโนมัติ:
ไม่ การปรับแต่งจะลบเฉพาะข้อมูลเมตาและความคิดเห็นที่ไม่มีผลต่อการแสดงผล ดังนั้นรูปลักษณ์ของ SVG จะไม่เปลี่ยนแปลงเลย สี รูปร่าง ขนาดจะถูกเก็บไว้ทั้งหมด
สำหรับ SVG ที่เอาต์พุตจากเครื่องมือออกแบบ โดยทั่วไปสามารถคาดหวังการลดขนาด 30-50% ไฟล์ที่เอาต์พุตจาก Adobe Illustrator หรือ Sketch จะมีผลการลดขนาดที่สูงเป็นพิเศษ
SVG ที่เขียนด้วยมือแบบง่ายๆ ไม่มีข้อมูลเมตา ดังนั้นผลการลดขนาดอาจน้อย ส่วนใหญ่จะมีผลกับ SVG ที่เอาต์พุตจากเครื่องมือออกแบบ
เครื่องมือนี้จะไม่เปลี่ยนแปลงองค์ประกอบที่เกี่ยวข้องกับการแสดงผล (<path>, <circle>, <animate> ฯลฯ) เลย ดังนั้นแอนิเมชัน สไตล์ CSS หรือการจัดการด้วย JavaScript จะทำงานได้ตามปกติ
ใช่ เครื่องมือนี้ให้ความสำคัญกับการลดขนาดไฟล์ ดังนั้น <title> และ <desc> จะถูกลบด้วย หากการเข้าถึงเป็นสิ่งสำคัญ กรุณาเพิ่มด้วยตนเองหลังจากปรับแต่ง หรือใช้เครื่องมือขั้นสูงอย่าง SVGO
เวอร์ชันปัจจุบันจะประมวลผลทีละไฟล์ หากต้องการประมวลผลไฟล์จำนวนมาก แนะนำให้ใช้เครื่องมือบรรทัดคำสั่งอย่าง SVGO
ข้อมูลที่ถูกลบไม่สามารถกู้คืนได้ แนะนำให้บันทึกไฟล์ SVG ต้นฉบับแยกไว้เสมอ กรุณาสำรองข้อมูลต้นฉบับก่อนที่จะประมวลผลด้วยเครื่องมือนี้
SVGO เป็นเครื่องมือปรับแต่งฟังก์ชันสูงที่ใช้ Node.js สามารถทำการปรับแต่งขั้นสูงเช่นการทำให้เส้นทางง่ายขึ้น เครื่องมือนี้ทำงานในเบราว์เซอร์และเชี่ยวชาญในการปรับแต่งพื้นฐานเช่นการลบข้อมูลเมตา คุณสมบัติเด่นคือความสะดวกและการแสดงตัวอย่างทันที