SVG อินพุต
ผลลัพธ์ที่ปรับแต่งแล้ว
ต้นฉบับ
0 ไบต์
ปรับแต่งแล้ว
0 ไบต์
ลดลง
0.00%
ตัวอย่าง
เกี่ยวกับการปรับแต่ง SVG
ไฟล์ SVG เป็น XML แบบข้อความ ดังนั้นการทำความสะอาดสามารถลดขนาดได้อย่างมากโดยไม่สูญเสียคุณภาพ เครื่องมือนี้ลบมาร์กอัปที่ไม่จำเป็นและทำให้ค่าเป็นมาตรฐานเพื่อให้กราฟิกเวกเตอร์เบาขึ้นสำหรับการส่งผ่านเว็บ
คู่มือฉบับสมบูรณ์สำหรับการปรับแต่ง SVG
ปรับแต่ง SVG ออนไลน์ฟรี
ปรับแต่งไฟล์ SVG ออนไลน์โดยลบเมตาดาต้า คอมเมนต์ แอตทริบิวต์เฉพาะโปรแกรมแก้ไข และช่องว่างส่วนเกินที่ไม่จำเป็น เนื่องจาก SVG เป็นแบบข้อความ แม้ขั้นตอนการทำความสะอาดเล็ก ๆ ก็สามารถลดขนาดไฟล์ได้อย่างมากโดยไม่ลดคุณภาพภาพ เครื่องมือของเราทำงานในเบราว์เซอร์ทั้งหมด ไฟล์ของคุณจึงเป็นส่วนตัว
ไฟล์ SVG คืออะไร?
SVG (Scalable Vector Graphics) เป็นรูปแบบภาพที่ใช้ XML สำหรับโลโก้ ไอคอน แผนภูมิ ภาพประกอบ UI และกราฟิกแบบ responsive ต่างจากรูปแบบแรสเตอร์เช่น JPEG หรือ PNG SVG สามารถปรับขนาดได้ทุกขนาดโดยไม่มีพิกเซลเพราะรูปร่างถูกกำหนดทางคณิตศาสตร์
ทำไมต้องปรับแต่ง SVG?
โหลดหน้าเว็บเร็วขึ้น: ไฟล์ SVG ที่เล็กลงลดขนาดการถ่ายโอน ซึ่งปรับปรุงความเร็วหน้าเว็บและประสบการณ์ผู้ใช้
Core Web Vitals ดีขึ้น: ขนาดทรัพยากรที่ลดลงช่วยเมตริกความเร็วเช่น Largest Contentful Paint เมื่อ SVG อยู่ above the fold
ซอร์สโค้ดสะอาดขึ้น: การลบแอตทริบิวต์เฉพาะโปรแกรมแก้ไขและเมตาดาต้าทำให้ SVG ดูแลรักษาง่ายขึ้นในโค้ดเบส
ไม่สูญเสียคุณภาพภาพ: การทำความสะอาดโครงสร้างสามารถลดไบต์ได้โดยไม่เปลี่ยนแปลงลักษณะที่แสดงผล
สิ่งที่เครื่องมือปรับแต่ง SVG นี้ลบ
การทำความสะอาดมาร์กอัป
- คอมเมนต์ XML
- แท็ก metadata, title และ description
- ช่องว่างเกินระหว่างอิลิเมนต์
- width/height ที่ไม่จำเป็นเมื่อมี viewBox
ข้อมูลเฉพาะโปรแกรมแก้ไข
- แอตทริบิวต์ namespace ของ Inkscape
- แอตทริบิวต์ metadata ของ Sodipodi
- แอตทริบิวต์ที่สร้างจากเครื่องมือที่ไม่แสดงผล
- ความแม่นยำตัวเลขที่มากเกินไป
อธิบายความแม่นยำทศนิยม
ค่า path และ transform ของ SVG มักมีตัวเลขทศนิยมยาวเช่น 12.3456789 การลดความแม่นยำเป็น 2 หรือ 3 ทศนิยมมักให้การลดขนาดที่ดีในขณะที่รักษาความแม่นยำทางภาพ สำหรับไอคอนเล็ก 1-2 ทศนิยมมักเพียงพอ สำหรับเส้นโค้งที่มีรายละเอียดสูง ลอง 3-4 ทศนิยม
วิธีใช้เครื่องมือนี้
- อัปโหลดหรือวาง: เพิ่มไฟล์ SVG หรือมาร์กอัปลงในแผงอินพุต
- เลือกตัวเลือก: เปิดสวิตช์การทำความสะอาดเช่น ลบคอมเมนต์ ลบเมตาดาต้า และยุบช่องว่าง
- ตั้งค่าความแม่นยำ: เลือกความแม่นยำทศนิยมตามความต้องการคุณภาพของคุณ
- ปรับแต่ง: เรียกใช้ตัวปรับแต่งเพื่อสร้างผลลัพธ์ SVG ที่สะอาด
- ตรวจสอบสถิติ: เปรียบเทียบขนาดไฟล์ต้นฉบับและที่ปรับแต่งแล้วรวมถึงเปอร์เซ็นต์การลดลง
- คัดลอกหรือดาวน์โหลด: ส่งออก SVG ที่ปรับแต่งแล้วสำหรับการใช้งาน
แนวทางปฏิบัติที่ดีที่สุดสำหรับการปรับแต่ง SVG
เก็บสำเนาต้นฉบับเสมอ: บันทึก SVG ต้นฉบับก่อนการทำความสะอาดอย่างเข้มข้น โดยเฉพาะสำหรับงานศิลป์ที่ซับซ้อน
ใช้ viewBox สำหรับ responsiveness: การรักษา viewBox ที่ถูกต้องทำให้ SVG ปรับขนาดได้อย่างน่าเชื่อถือในอุปกรณ์ต่าง ๆ
ทดสอบหลังการปรับแต่ง: ตรวจสอบไอคอนและโลโก้ในขนาดต่าง ๆ เพื่อให้แน่ใจว่ารูปร่างยังคงแม่นยำ
Inline SVG ที่สำคัญ: สำหรับไอคอน above-the-fold การ inline SVG สามารถลดคำขอเพิ่มเติมและปรับปรุงประสิทธิภาพที่รับรู้ได้
เลือก path ที่เรียบง่าย: ข้อมูล path ที่ซับซ้อนเกินไปอาจทำให้ไฟล์บวม ลดความซับซ้อนของเวกเตอร์เมื่อส่งออกถ้าเป็นไปได้
กรณีใช้งาน SVG ทั่วไป
- โลโก้เว็บไซต์และเครื่องหมายแบรนด์
- ไอคอนนำทางและการดำเนินการ
- ภาพประกอบในหน้า Landing
- การแสดงข้อมูลและแผนภูมิ
- กราฟิก UI สำหรับแดชบอร์ด
- กราฟิกเวกเตอร์ที่ปลอดภัยสำหรับอีเมล
- ไลบรารีไอคอนระบบการออกแบบ
- ทรัพยากร Progressive Web App
- ภาพสำหรับแคมเปญการตลาด
- กราฟิกที่ฝังได้ในเอกสาร
การปรับแต่ง SVG ที่เน้นความเป็นส่วนตัว
การปรับแต่ง SVG ทั้งหมดดำเนินการในเบราว์เซอร์ของคุณ ไฟล์จะไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังบุคคลที่สาม