Softonic

บีบอัดไฟล์ SVG

ขั้นตอน 1 / 2
ถัดไป

SVG ที่ส่งออกจาก Figma, Illustrator หรือ Sketch มักมีข้อมูลการกำหนดรูปแบบมากเกินความจำเป็นถึง 2–5 เท่า ได้แก่ ชื่อพื้นที่ในตัวแก้ไข (editor namespaces), คำอธิบาย (comments), กลุ่มข้อมูลที่ว่างเปล่า (empty groups), การแปลงรูปทรงที่ซ้ำซ้อน และพิกัดที่มี 6 หลักทศนิยม เครื่องมือนี้จะประมวลผล SVG ผ่านกระบวนการแปลงในรูปแบบ SVGO เพื่อกำจัดข้อมูลที่ไม่จำเป็นออกไป ในขณะที่รักษารูปแบบของภาพแสดงผลให้เหมือนเดิมทุกประการ

วิธีการบีบอัดไฟล์ SVG

  1. 1

    วางหรืออัปโหลดไฟล์ SVG ของคุณ

    รับข้อความ XML แบบดิบ หรือไฟล์ .svg

  2. 2

    เลือกระดับการปรับแต่งให้เหมาะสมที่สุด

    ปลอดภัย (ลบความคิดเห็นและข้อมูลเมตาของตัวแก้ไข), รุนแรง (ย่อกลุ่มข้อมูล ปรับพิกัดให้เป็นจำนวนเต็ม รวมเส้นทาง) หรือแบบกำหนดเอง

  3. 3

    ตรวจสอบความแตกต่าง

    เปรียบเทียบจำนวนไบต์ก่อนและหลัง จากนั้นดูผลลัพธ์ที่แสดงเพื่อยืนยันว่าไม่มีการเปลี่ยนแปลงใดๆ ในรูปแบบภาพ

  4. 4

    คัดลอกหรือดาวน์โหลด

    ให้วางไฟล์ SVG ที่ผ่านการปรับแต่งแล้วเข้าไปในโค้ดของคุณโดยตรง หรือบันทึกเป็นไฟล์

สิ่งใดที่ทำให้ไฟล์ SVG มีขนาดใหญ่เกินไป

เปิดไฟล์ SVG ที่ส่งออกจาก Figma ในโปรแกรมแก้ไขข้อความ คุณจะเห็นเนื้อหาในลักษณะนี้โดยทั่วไป:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

แทบทุกบรรทัดสามารถลบออกได้ ผลลัพธ์ที่แสดงผลต้องการเพียง svg, viewBox และ path เท่านั้น

สิ่งที่เครื่องมือปรับแต่งจะลบออกไป

สิ่งที่ถูกลบ เหตุผลที่ปลอดภัย
ความคิดเห็น XML ไม่เคยถูกแสดงผล
เนมสเปซของตัวแก้ไข (sketch, figma) เบราว์เซอร์ไม่ได้ใช้งาน
<title> / <desc> (ไม่บังคับ) ข้อความเพื่อการเข้าถึง เก็บไว้หากมีความหมาย
กลุ่ม <g> ที่ว่างเปล่า ไม่มีผลทางภาพ
ค่าแอตทริบิวต์เริ่มต้น เบราว์เซอร์ใช้ค่าเริ่มต้นอยู่แล้ว
การแปลงแบบเอกลักษณ์ translate(0,0) ไม่มีผลใดๆ
ทศนิยมของพิกัด ทศนิยม 3 ตำแหน่งแสดงผลเหมือนกันบนหน้าจอ
ID ที่ไม่ได้ใช้งาน เก็บเฉพาะ ID ที่ถูกอ้างอิงในที่อื่นเท่านั้น

จุดที่ต้องระวัง

  • อย่าลบ ID ที่ถูกอ้างอิงโดย CSS หรือ url(#...) ในการเติมสี (fill) มาสก์ และฟิลเตอร์ เพราะโหมดรุนแรงอาจทำให้เกรเดียนต์เสียหายได้
  • เก็บ viewBox ไว้ หากไม่มี SVG จะไม่สามารถปรับขนาดแบบเรสปอนซิฟได้
  • เก็บ <title> ไว้ หากคุณใช้มันเพื่อการเข้าถึง (โปรแกรมอ่านหน้าจอจะอ่านออกเสียงข้อความนี้)
  • หลีกเลี่ยงการยุบรวมอินสแตนซ์ <use> เพราะเครื่องมือปรับแต่งอาจฝังมันลงในโค้ดโดยตรง และทำให้รูปแบบต้นฉบับที่เป็นแหล่งอ้างอิงสูญหายไป

เมื่อการบีบอัดช่วยประหยัดไบต์ได้จริง

SVG เป็นข้อความ ซึ่งหมายความว่า gzip บนเซิร์ฟเวอร์ได้กำจัดความซ้ำซ้อนส่วนใหญ่ไปแล้ว ไฟล์ SVG ที่ลดจาก 4 KB เหลือ 1 KB แบบไม่บีบอัด อาจลดลงเพียงจาก 1.2 KB เหลือ 0.7 KB เมื่อส่งผ่านเครือข่าย แต่ก็ยังคุ้มค่าอยู่ดี อีกทั้งไฟล์ต้นฉบับที่เล็กลงยังอ่านง่ายกว่าด้วย

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

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

ไฟล์ที่ส่งออกโดย Figma/Illustrator มักมีขนาดลดลงประมาณ 50–80% ในขณะที่ไฟล์ SVG ที่เขียนด้วยมือก็มีขนาดกะทัดรัดอยู่แล้ว และโดยทั่วไปจะลดลงเพียง 10–20% เท่านั้น

โดยค่าเริ่มต้นจะเป็นใช่, แอตทริบิวต์ <title>, <desc> และ aria-* จะถูกเก็บไว้ หาก SVG มีลักษณะเพียงเพื่อการตกแต่งเท่านั้น และข้อมูลป้ายกำกับอยู่ใน HTML ที่อยู่รอบๆ ก็สามารถลบแอตทริบิวต์เหล่านี้ออกไปได้

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

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

เครื่องสร้างบาร์โค้ด

สร้างบาร์โค้ด Code 128, EAN-13, UPC, ITF-14 และรูปแบบเชิงเส้นอื่นอีกเจ็ดแบบ ข้อมูลอยู่ในเบราว์เซอร์และดาวน์โหลดเป็น SVG หรือ PNG ได้

เครื่องมือสร้าง QR Code

สร้าง QR Code จากข้อความหรือ URL ในเบราว์เซอร์ แล้วดาวน์โหลดเป็น PNG

สร้างเกียรติบัตร

สร้างเกียรติบัตรรางวัล การเข้าร่วม หรือการจบหลักสูตรสำหรับพิมพ์ พร้อมข้อความ โลโก้ รูปแบบ และขนาดกระดาษของคุณ ไม่ใช่ใบรับรอง TLS/SSL

แปลง WebP เป็น JPG

แปลงรูปภาพ WebP เป็น JPG/JPEG ได้โดยตรงในเบราว์เซอร์ เลือกคุณภาพ ผสานความโปร่งใสเข้ากับสีพื้นหลัง แล้วดาวน์โหลดโดยไม่ต้องอัปโหลดไฟล์

เครื่องมือสร้างมีม

อัปโหลดรูป JPG, PNG หรือ WebP ใส่ข้อความด้านบนและด้านล่าง ปรับฟอนต์ สี และเส้นขอบ แล้วดาวน์โหลดมีมเป็น PNG โดยประมวลผลในเบราว์เซอร์