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 เพียงแตะครั้งเดียว

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น