ย่อโค้ด SVG

เครื่องมือย่อทำอะไรกับโค้ดบ้าง

เครื่องมือทำงานกับข้อความของ SVG ตามลำดับที่กำหนดไว้ตายตัว: ลบการประกาศ XML และ doctype จากนั้นลบความคิดเห็น แล้วลบองค์ประกอบ metadata, title และ description จากนั้นปัดเศษทศนิยม และสุดท้ายรวมช่องว่าง ช่องว่าง แท็บ และการขึ้นบรรทัดใหม่ที่ติดกันทั้งหมดจะกลายเป็นช่องว่างเดียว และช่องว่างระหว่างแท็กปิดกับแท็กเปิดถัดไปจะถูกลบ ผลลัพธ์จึงเป็นบรรทัดเดียว

ก่อนและหลัง

อินพุต 126 ไบต์:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

ผลลัพธ์ด้วยการตั้งค่าเริ่มต้น 97 ไบต์ (ประหยัดได้ 23%):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

สังเกตว่า 8.000 กลายเป็น 8 และ 3.500 กลายเป็น 3.5 เพราะเลขศูนย์ท้ายจะถูกลบหลังการปัดเศษ

สิ่งที่ไม่เปลี่ยนแปลง

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

ข้อควรระวัง

• การรวมช่องว่างก็ใช้กับองค์ประกอบข้อความด้วย ดังนั้นป้ายที่มีช่องว่างหลายช่องติดกันจะแสดงเป็นช่องว่างเดียว
• การปัดเศษใช้กับทศนิยมทุกตัว รวมถึงหมายเลขเวอร์ชันในแอตทริบิวต์ เช่น 1.10 จะกลายเป็น 1.1
• โค้ดที่ย่อแล้วอ่านยาก ให้เก็บต้นฉบับไว้ในระบบควบคุมเวอร์ชัน และใช้ฉบับที่ย่อเฉพาะเพื่อการส่งออก

ตรวจสอบอย่างรวดเร็วหลังย่อ

วางบรรทัดที่ย่อแล้วลงในไฟล์ HTML เปล่า แล้วเปิดในเบราว์เซอร์คู่กับต้นฉบับ ทั้งสองควรดูเหมือนกัน หากการไล่เฉดสี มาสก์ หรือ clip path ใช้งานไม่ได้ ให้ตรวจว่ามี ID หรือการอ้างอิงถูกแก้ไขด้วยมือหรือไม่ เพราะเครื่องมือไม่ได้เปลี่ยนชื่อ ID หากรายละเอียดเล็กๆ บางส่วนเคลื่อนที่ ให้เพิ่มความแม่นยำของตัวเลขเป็น 3 ขึ้นไปแล้วรันใหม่

สถานที่ที่ใช้ผลลัพธ์ได้

SVG บรรทัดเดียววางในไฟล์ HTML ไฟล์คอมโพเนนต์ JSX data URI หรือกฎพื้นหลัง CSS ได้อย่างสะอาด ซึ่งหากเป็นหลายบรรทัดจะต้องมีการแปลงอักขระพิเศษ