เครื่องมือปรับแต่ง SVG

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

ทำไมต้องปรับแต่งไฟล์ SVG?

ไฟล์ SVG ที่ส่งออกจากเครื่องมือออกแบบ เช่น Adobe Illustrator, Figma, Sketch หรือ Inkscape มักจะมีข้อมูลที่ไม่จำเป็นจำนวนมาก:

• ข้อมูลเมตาของเอดิเตอร์ (Editor Metadata): ข้อมูลเฉพาะของซอฟต์แวร์แก้ไขที่ไม่จำเป็นสำหรับการแสดงผล
• คอมเมนต์ XML: บันทึกของนักพัฒนาและคอมเมนต์ที่สร้างขึ้นโดยอัตโนมัติ
• ค่าเริ่มต้น: แอตทริบิวต์ที่ตั้งค่าเป็นค่าเริ่มต้นซึ่งเบราว์เซอร์รับรู้อยู่แล้ว
• ความแม่นยำที่มากเกินไป: ตัวเลขที่มีทศนิยม 10+ ตำแหน่ง ในขณะที่ 2-3 ตำแหน่งก็เพียงพอแล้ว
• องค์ประกอบที่ซ้ำซ้อน: กลุ่มที่ว่างเปล่า, คำจำกัดความ และทรัพยากรที่ไม่ได้ใช้งาน
• การระบุสีที่ยาวเกินไป: การใช้ rgb() และรหัสสี hex 6 หลัก ซึ่งสามารถย่อให้สั้นลงได้

การปรับแต่ง SVG จะช่วยขจัดข้อมูลส่วนเกินเหล่านี้ ส่งผลให้หน้าเว็บโหลดเร็วขึ้น ลดการใช้แบนด์วิดท์ และได้คะแนน Core Web Vitals ที่ดีขึ้น

เทคนิคการปรับแต่ง

ลบคอมเมนต์และข้อมูลเมตา

คอมเมนต์ XML () และองค์ประกอบข้อมูลเมตามีข้อมูลที่ไม่จำเป็นสำหรับการแสดงผล เครื่องมือออกแบบมักจะฝังข้อมูลเมตาจำนวนมาก รวมถึงเวอร์ชันซอฟต์แวร์ ข้อมูลผู้เขียน และประวัติการแก้ไข การลบสิ่งเหล่านี้สามารถลดขนาดไฟล์ได้อย่างมาก

ลบ DOCTYPE และการประกาศ XML

การประกาศ DOCTYPE และ XML prologue ไม่จำเป็นสำหรับ SVG ที่ฝังใน HTML5 เบราว์เซอร์สมัยใหม่จะแสดงผล SVG ได้อย่างถูกต้องโดยไม่ต้องมีการประกาศเหล่านี้ ทำให้ปลอดภัยที่จะลบออกสำหรับการใช้งานบนเว็บ

ลบแอตทริบิวต์ที่ว่างเปล่าและค่าเริ่มต้น

แอตทริบิวต์ที่ตั้งค่าเป็นค่าว่างหรือค่าเริ่มต้นนั้นไม่มีประโยชน์ ตัวอย่างเช่น fill-opacity="1" เป็นค่าเริ่มต้นและสามารถลบออกได้ การปรับแต่งนี้มักจะช่วยลดขนาดได้มากโดยไม่มีผลกระทบต่อภาพ

ย่อค่าสี

ค่าสีสามารถแทนได้หลายวิธี เครื่องมือนี้นี้จะเปลี่ยนรูปแบบที่ยาวให้เป็นรูปแบบที่สั้นลง:

• rgb(255, 0, 0) → #f00 หรือ red
• #ff0000 → #f00
• #ffffff → #fff

ปัดเศษตัวเลข

เครื่องมือออกแบบมักส่งออกพิกัดและขนาดด้วยความแม่นยำที่มากเกินไป (เช่น 50.123456789) สำหรับการใช้งานบนเว็บ ทศนิยม 2-3 ตำแหน่งมักจะเพียงพอ เครื่องมือนี้นี้จะปัดเศษตัวเลขตามความแม่นยำที่คุณกำหนดในขณะที่ยังรักษาความถูกต้องของภาพไว้

ปรับแต่ง Transform

การแปลงที่เป็น Identity เช่น translate(0,0), scale(1), และ rotate(0) ไม่มีผลต่อภาพและสามารถลบออกได้อย่างปลอดภัย เครื่องมือจะตรวจจับและกำจัดการแปลงที่ซ้ำซ้อนเหล่านี้

ลบช่องว่าง

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

วิธีใช้งานเครื่องมือปรับแต่ง SVG

1. อัปโหลดหรือวาง SVG ของคุณ: ลากและวางไฟล์ SVG ลงในพื้นที่อัปโหลด คลิกเพื่อเลือกไฟล์ หรือวางโค้ด SVG ของคุณลงในพื้นที่ข้อความโดยตรง
2. กำหนดค่าตัวเลือกการปรับแต่ง: เลือกเทคนิคการปรับแต่งที่จะใช้ ตัวเลือกทั้งหมดถูกเปิดใช้งานโดยเริ่มต้นเพื่อการบีบอัดสูงสุด ปรับแถบความแม่นยำของตัวเลขหากจำเป็น (ค่าน้อย = ไฟล์เล็กลง, ค่ามาก = ความแม่นยำมากขึ้น)
3. คลิก "ปรับแต่ง SVG": เครื่องมือจะประมวลผล SVG ของคุณและใช้การปรับแต่งที่เลือกทั้งหมด
4. ตรวจสอบผลลัพธ์: ดูสถิติโดยละเอียดรวมถึงขนาดเดิม, ขนาดที่ปรับแต่งแล้ว, ไบต์ที่ประหยัดได้ และเปอร์เซ็นต์การลดขนาด เปรียบเทียบตัวอย่างก่อนและหลังเพื่อตรวจสอบคุณภาพ
5. ดาวน์โหลดหรือคัดลอก: ดาวน์โหลดไฟล์ SVG ที่ปรับแต่งแล้วหรือคัดลอกโค้ดไปยังคลิปบอร์ดของคุณ

การเลือกความแม่นยำที่เหมาะสม

ตัวเลือกความแม่นยำของตัวเลขจะควบคุมจำนวนตำแหน่งทศนิยมที่เก็บไว้เมื่อปัดเศษพิกัดและขนาด:

• ทศนิยม 1 ตำแหน่ง: การปรับแต่งแบบเข้มงวด เหมาะสำหรับไอคอนและโลโก้ง่ายๆ ที่ความแตกต่างเล็กน้อยไม่สามารถมองเห็นได้
• ทศนิยม 2 ตำแหน่ง: ความสมดุลที่ดีสำหรับกราฟิกเว็บส่วนใหญ่
• ทศนิยม 3 ตำแหน่ง (ค่าเริ่มต้น): แนะนำสำหรับภาพประกอบที่มีรายละเอียด ในขณะที่ยังคงประหยัดขนาดไฟล์ได้ดี
• ทศนิยม 4-5 ตำแหน่ง: ความแม่นยำสูงสำหรับกราฟิกที่ซับซ้อนซึ่งตำแหน่งที่แน่นอนมีความสำคัญมาก

เมื่อใดที่ควรเก็บองค์ประกอบบางอย่างไว้

แม้ว่าการปรับแต่งสูงสุดมักจะเป็นสิ่งที่ต้องการ แต่มีบางกรณีที่คุณอาจต้องการรักษาองค์ประกอบบางอย่างไว้:

• ข้อมูลเมตาสำหรับการเข้าถึง (Accessibility): เก็บองค์ประกอบ title และ desc ไว้หากมีข้อมูลการเข้าถึงที่สำคัญสำหรับโปรแกรมอ่านหน้าจอ (screen readers)
• คอมเมนต์สำหรับการจัดทำเอกสาร: หาก SVG ของคุณมีคอมเมนต์ที่บันทึกโครงสร้างไว้สำหรับสมาชิกในทีม ให้พิจารณาเก็บไว้
• ความแม่นยำสูงสำหรับแอนิเมชัน: SVG ที่มีแอนิเมชันซับซ้อนอาจต้องการความแม่นยำของตัวเลขที่สูงขึ้นเพื่อหลีกเลี่ยงการเคลื่อนไหวที่สั่นไหว

ความเป็นส่วนตัวและความปลอดภัย

ไฟล์ SVG ของคุณได้รับการประมวลผลอย่างปลอดภัย:

• การปรับแต่งทั้งหมดเกิดขึ้นบนเซิร์ฟเวอร์ และไฟล์จะถูกลบทันทีหลังจากประมวลผล
• ไม่มีการจัดเก็บ บันทึก หรือเซฟเนื้อหา SVG ใดๆ
• ไฟล์ของคุณจะไม่หลุดออกจากเบราว์เซอร์จนกว่าคุณจะคลิก "ปรับแต่ง SVG"
• ผลลัพธ์จะถูกส่งผ่านช่องทางที่ปลอดภัยและไม่มีการแคชไว้

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

การปรับแต่ง SVG คืออะไรและทำไมจึงสำคัญ?

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

การปรับแต่ง SVG ส่งผลต่อคุณภาพการแสดงผลของกราฟิกหรือไม่?

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

ฉันสามารถลดขนาดไฟล์ SVG ได้มากแค่ไหน?

ปริมาณการลดขนาดขึ้นอยู่กับ SVG ต้นฉบับ ไฟล์ที่ส่งออกจากเครื่องมือออกแบบมักจะมีข้อมูลเมตา คอมเมนต์ และองค์ประกอบที่ไม่ได้ใช้งานจำนวนมากซึ่งสามารถลบออกได้ โดยทั่วไปการลดขนาดจะอยู่ที่ 20% ถึง 70% และไฟล์ที่มีข้อมูลส่วนเกินมากอาจลดขนาดได้มากกว่านั้น

ข้อมูล SVG ของฉันปลอดภัยหรือไม่เมื่อใช้เครื่องมือนี้?

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

ฉันควรใช้ตัวเลือกการปรับแต่งใดบ้าง?

สำหรับกรณีการใช้งานส่วนใหญ่ แนะนำให้ใช้ตัวเลือกเริ่มต้นทั้งหมดเพื่อการลดขนาดไฟล์สูงสุด อย่างไรก็ตาม คุณอาจต้องการเก็บข้อมูลเมตาไว้หาก SVG ของคุณมีข้อมูลการเข้าถึงที่สำคัญในองค์ประกอบ title หรือ desc ตัวเลือกความแม่นยำของตัวเลขจะควบคุมจำนวนตำแหน่งทศนิยมที่เก็บไว้ในพิกัด ซึ่งปกติ 2-3 ตำแหน่งก็เพียงพอสำหรับการใช้งานบนเว็บ

แหล่งข้อมูลเพิ่มเติม

• เอกสาร MDN SVG
• SVG - Wikipedia
• Web.dev - ปรับแต่ง Largest Contentful Paint