หน้าแรกเครื่องมือสำหรับนักออกแบบตัวดูและเพิ่มประสิทธิภาพ SVG

ตัวดูและเพิ่มประสิทธิภาพ SVG

เครื่องมือดูและปรับแต่ง SVG แสดงผลโค้ด SVG ที่วางไว้เป็นตัวอย่างแบบสด และย่อขนาดด้วยการลบ XML declaration, คอมเมนต์, element title, desc และ metadata รวมถึงช่องว่างที่เกิน พร้อมแสดงขนาดที่ลดลง

เกี่ยวกับเครื่องมือนี้

เครื่องมือดูและปรับแต่ง SVG แสดงผลโค้ด SVG ที่วางไว้เป็นตัวอย่างแบบสด และย่อขนาดด้วยการลบ XML declaration, คอมเมนต์, element title, desc และ metadata รวมถึงช่องว่างที่เกิน พร้อมแสดงขนาดที่ลดลง

วิธีใช้

  1. วางโค้ด SVG ลงในช่องป้อนข้อมูล
  2. ดูตัวอย่างแบบสด
  3. คลิก Optimize SVG เพื่อย่อขนาดและดูว่าลดลงไปเท่าไร
  4. คัดลอกผลลัพธ์ หรือดาวน์โหลดเป็นไฟล์ .svg

ข้อควรรู้

  • โปรแกรมอย่าง Illustrator และ Inkscape มักเพิ่มคอมเมนต์ metadata และช่องว่างที่เบราว์เซอร์ไม่จำเป็นต้องใช้
  • การลบโค้ดส่วนนี้มักทำให้ SVG เล็กลงอย่างเห็นได้ชัดโดยไม่เปลี่ยนหน้าตา
  • เครื่องมือนี้ลบ element title และ desc ออก หาก SVG ต้องมีชื่อสำหรับการเข้าถึง (accessible name) ให้เก็บ title ไว้
  • ตัวอย่างแสดง SVG เป็นรูปภาพ สคริปต์ที่อยู่ในไฟล์จึงไม่ทำงาน
  • ไฟล์ SVG บีบอัดด้วย gzip หรือ Brotli บนเว็บเซิร์ฟเวอร์ได้ดี

ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ

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

จะเปิดดูไฟล์ SVG ได้อย่างไร?

เปิดด้วยเบราว์เซอร์รุ่นใหม่ใดก็ได้ หรือวางโค้ดที่นี่เพื่อดูตัวอย่างทันที

จะลดขนาดไฟล์ SVG ได้อย่างไร?

ลบ metadata จากโปรแกรมแก้ไข คอมเมนต์ และช่องว่างที่ไม่จำเป็น ซึ่งเป็นสิ่งที่ Optimize SVG ทำ หากต้องการลดมากกว่านั้น เครื่องมืออย่าง SVGO ยังช่วยทำให้ path เรียบง่ายขึ้นได้

วางโค้ด SVG ที่นี่ปลอดภัยหรือไม่?

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

การปรับแต่งจะเปลี่ยนหน้าตาของ SVG หรือไม่?

ไม่เปลี่ยน ระบบจะลบเฉพาะเนื้อหาที่ไม่ใช่ภาพ เช่น คอมเมนต์ metadata และช่องว่าง รูปทรงและสียังคงเหมือนเดิม