ตัวปรับแต่ง SVG

ปรับแต่งและย่อโค้ด SVG ด้วยตัวปรับแต่ง SVG แล้วตรวจผลลัพธ์ที่ล้างแล้ว.

⌘ ทำงานในเบราว์เซอร์ ◴ ไม่จัดเก็บข้อมูล ⌁ ฟรี

แนวคิด

SVG optimizer ช่วยลดขนาดไฟล์โดยยังคงผลลัพธ์ตามเดิม

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

การทำความสะอาดไฟล์เช่นการตัด XML declaration, คอมเมนต์, metadata และช่องว่างพิเศษ ช่วยให้ไฟล์เบาลง และโหลดเร็วขึ้นได้ง่ายขึ้น.

เมื่อใช้กับชุดไอคอนหรือชุดงานวาดที่มีการแจกจ่ายซ้ำหลายครั้ง จะช่วยลดภาระแบนด์วิดท์ได้มากขึ้นอย่างชัดเจน.

กรณีใช้งาน

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

สิ่งที่จัดระเบียบ

ลบ XML declaration, doctype, คอมเมนต์ และ metadata แล้วจัดช่องว่างระหว่างองค์ประกอบ รอบเครื่องหมายเท่ากับ และช่องว่างซ้ำให้กระชับ

จุดตรวจสอบก่อนปล่อย

เปรียบเทียบก่อน/หลังในแง่ viewBox, ขนาด, รูปร่าง และ attribute การเข้าถึงเช่น aria-label/role ว่ายังคงอยู่ครบ.

ก่อนเผยแพร่ ให้ยืนยันว่าแสดงผลไม่เปลี่ยน (รูปทรง, ขนาด, การจัดวาง) และยังคงข้อมูลช่วยเข้าถึงของสกรีนรีดเดอร์ครบถ้วน.

ตัวปรับแต่ง SVG พื้นที่ทำงานปรับแต่ง SVG

อินพุต SVG
SVG ที่ปรับแต่งแล้ว

วิธีใช้

  1. 1 วางโค้ด SVG หรือลากไฟล์ SVG ลงในพื้นที่อินพุต.
  2. 2 คลิกปรับแต่งเพื่อลดโค้ดที่ไม่จำเป็น.
  3. 3 ตรวจพรีวิวและการเปลี่ยนแปลงขนาด จากนั้นคัดลอกหรือดาวน์โหลด SVG ที่ปรับแต่งแล้ว.

กรณีใช้งานทั่วไป

  • ลบคอมเมนต์และ metadata ของ SVG
  • บีบอัดโค้ด inline SVG ด้วยตัวปรับแต่ง SVG
  • พรีวิวและดาวน์โหลด SVG ที่ปรับแต่งแล้ว

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

ป้อน SVG อย่างไร?

วางโค้ด SVG หรือลากไฟล์ .svg เพื่อเติมช่องอินพุต จากนั้นเริ่มปรับแต่ง.

การปรับแต่งลดอะไรบ้าง?

เครื่องมือนี้ลบ XML declaration, คอมเมนต์, doctype และแท็ก metadata แล้วล้าง whitespace เพื่อลดความยาวโค้ด SVG.

คัดลอกหรือดาวน์โหลดผลลัพธ์ได้หรือไม่?

ได้ คุณคัดลอกโค้ด SVG ที่ปรับแต่งแล้วหรือดาวน์โหลดเป็น optimized.svg ได้ และมีพรีวิวแสดงให้ดูด้วย.

เวิร์กโฟลว์ที่เกี่ยวข้อง