SVGO: ลดขนาด SVG โดยไม่สูญเสียโครงสร้างที่ต้องใช้

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

ตราที่เราสร้างทำให้เห็นความต่าง SVGO preset ปริยายลดต้นฉบับจาก 437 เป็น 263 ไบต์ แต่ลบ ID ที่ HTML รอบนอกใช้เปลี่ยนสีดวงอาทิตย์ การปิด cleanupIds ให้สำเนา 281 ไบต์ที่รักษาจุดอ้างอิง ค่าวัดเหล่านั้นอธิบายตัวอย่างนี้กับ SVGO 4.1.0 ไม่ใช่คำรับประกันการบีบขนาดงานอื่น

SVGO แก้มาร์กอัป SVG ที่มีอยู่ หากมีเพียง PNG หรือ JPG ให้สร้างหรือกู้คืนรูปทรงเวกเตอร์ก่อน การปรับไฟล์ไม่เปลี่ยนวัตถุในบิตแมปเป็นพาธที่แก้ไขได้

เลือกโครงสร้าง SVG ที่ต้องเก็บ

ก่อนรันตัวปรับไฟล์ แยกสิ่งที่มองเห็นจากสิ่งที่เอกสารหรือแอปอื่นอ้างอิง preset ปริยายของ SVGO รวมการทำงานที่เปลี่ยน ID กลุ่ม สไตล์ และข้อมูลพาธ การผสานใช้งานอาจเลือกชุดปลั๊กอินต่างกัน จึงตรวจการตั้งค่าเครื่องมือที่ประมวลผลไฟล์จริง

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

สำหรับสัญลักษณ์ใช้ซ้ำ คู่มือสไปรต์ SVG ครอบคลุมฝั่งผู้ใช้การอ้างอิง บทความนี้เน้นสิ่งที่ขั้นตอนปรับไฟล์เปลี่ยนได้ก่อนผู้ใช้นั้นเห็นไฟล์

ทำซ้ำปัญหาจุดอ้างอิง CSS ภายนอกเสีย

ใช้โฟลเดอร์ทดลองว่างที่มี Node.js และ npm บันทึกภาพประกอบเขียนเองนี้เป็น input.svg รวมบรรทัดใหม่ท้ายไฟล์ เป็นตัวอย่างทดสอบการตั้งค่า ไม่ใช่ผลแปลง PerfectVector

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

ติดตั้งเวอร์ชันเดียวกับตัวอย่างแล้วสร้างไฟล์เอาต์พุตใหม่:

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

รันในโฟลเดอร์สะอาดเพื่อไม่ให้ svgo.config.mjs ที่มีอยู่ส่งการตั้งค่าผิดคาด รีโพซิทอรีทางการของ SVGO อธิบายชื่อไฟล์เอาต์พุตแยกและการโหลดการตั้งค่า สำหรับบิลด์โปรเจกต์ เก็บเวอร์ชันและการตั้งค่าในระบบควบคุมเวอร์ชันเพื่อให้อัปเกรดเป็นการเปลี่ยนที่ตั้งใจ

เปิด default.svg เป็นข้อความ วงกลมยังมีสีปะการัง แต่ ID badge-accent หายไป ID นั้นไม่ได้ถูกอ้างอิงภายในเอกสาร SVG เอกสาร cleanupIds อธิบายว่าปลั๊กอินลบ ID ที่ไม่ใช้และย่อ ID ที่มีการอ้างอิง ตัวเลือกของหน้าภายนอกอยู่นอกอินพุตตัวอย่างนี้

หากต้องการเห็นผล ให้วางมาร์กอัป SVG โดยตรงในหน้า HTML พร้อมสไตล์นี้อยู่นอก SVG:

<style>
  #badge-accent { fill: #f5bf42; }
</style>

ใช้หนึ่งสำเนาต่อหน้าสำหรับทดสอบนี้ ดวงอาทิตย์ SVG ต้นฉบับกลายเป็นสีทองเพราะตัวเลือกตรงกัน ดวงอาทิตย์ที่ปรับด้วยค่าปริยายยังเป็นปะการังเพราะไม่มี ID การโหลดไฟล์ใดผ่านองค์ประกอบ img เป็นการทดสอบต่างกัน: หน้าแม่ไม่ได้เลือกชิ้นภายในในเอกสารเดียวกัน

รักษาจุดอ้างอิงแล้วทดสอบซ้ำ

บันทึกเป็น svgo.config.mjs ในโฟลเดอร์เดียวกัน:

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

จากนั้นเขียนอีกสำเนา:

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

การ override ปิดปลั๊กอินนี้ตัวเดียวโดยเก็บส่วนอื่นของ preset ปริยาย เป็นจุดเริ่มต้นสำหรับการพึ่ง ID ที่สาธิต ไม่ใช่การตั้งค่าปลอดภัยสากลสำหรับงานใด ๆ แอนิเมชัน ความสัมพันธ์การช่วยการเข้าถึง หรือโครงสร้างเฉพาะแอป

เรารันคำสั่งด้านบนในโฟลเดอร์สะอาดและรันการตั้งค่าเทียบเท่าแยกผ่าน JavaScript API ของ SVGO 4.1.0 เอาต์พุต CLI กับ API เหมือนกันทุกไบต์ โดยไม่มีบรรทัดใหม่เพิ่มท้ายไฟล์ที่ปรับแล้ว จากนั้นเรนเดอร์แต่ละผลในเอกสาร HTML ของตัวเองด้วยกฎ CSS ภายนอกเดียวกัน เบราว์เซอร์รายงานผล:

ผลที่เก็บ ID ลด 156 ไบต์ หรือประมาณ 35.7% ของต้นฉบับนี้ มีขนาดมากกว่าผลปริยาย 18 ไบต์และรักษาพฤติกรรมที่ต้องการ ช่องว่าง รูปแบบจบบรรทัด เวอร์ชัน และรูปแบบเอาต์พุตเปลี่ยนจำนวนไบต์ของคุณได้

ทั้งสามสำเนาเก็บ viewBox="0 0 160 160" ในการทดสอบนี้ เราตรวจผลที่เห็นและ fill ที่เบราว์เซอร์คำนวณ ไม่ได้วัดเวลาถ่ายโอนเครือข่ายหรือทดสอบทุกเบราว์เซอร์ โปรแกรมแก้ไข ฟีเจอร์ SVG หรือการผสานบิลด์

ปรับการตั้งค่าสำหรับสิ่งที่พึ่งพาเฉพาะ

หากมีเพียงไม่กี่ ID เป็นจุดอ้างอิงสาธารณะ cleanupIds มีตัวเลือก preserve และ preservePrefixes ด้วย ใช้เมื่อระบุสิ่งที่พึ่งพาได้ แล้วทดสอบผู้ใช้เดียวกันซ้ำ หากจะรวม SVG หลายไฟล์แบบอินไลน์ ตรวจ ID ซ้ำด้วย การเก็บ ID ที่ซ้ำอยู่แล้วไม่ทำให้ไม่ซ้ำ การเปลี่ยนชื่อหนึ่งตัวต้องอัปเดตผู้ใช้มัน

สไตล์หรือสคริปต์ภายใน SVG เปลี่ยนพฤติกรรมตัวปรับไฟล์ได้ เอกสาร cleanupIds อธิบายกลไกป้องกันที่งดทำงานเมื่อมีองค์ประกอบเหล่านั้น อย่าอนุมานว่ามันครอบคลุม CSS ในอีกเอกสาร หรือบังคับ cleanup โดยไม่เข้าใจว่าการอ้างอิงใดพึ่ง ID

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

เก็บ viewBox เมื่อเลย์เอาต์พึ่งพาพฤติกรรมปรับมาตราส่วน เอกสารปลั๊กอิน removeViewBox เตือนผลต่อการปรับมาตราส่วนและการตัดภาพ มันไม่อยู่ใน preset ปริยายที่มีเอกสารซึ่งใช้ที่นี่ การเพิ่มอย่างชัดเจนเป็นการตัดสินใจแยก อย่าคัดลอกการตั้งค่าเก่าโดยไม่ตรวจว่าเขียนสำหรับเวอร์ชันและ preset ใด

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

ตรวจสำเนาส่งมอบในที่ที่จะใช้

หลังเลือกการตั้งค่า วางไฟล์ที่ปรับในกระบวนการรับจริง ตรวจสถานะปริยายและสถานะชี้เมาส์ เลือก ธีม หรือแอนิเมชันที่พึ่งไฟล์ พรีวิวภาพนิ่งอาจพลาดตัวเลือกที่ทำงานหลังโต้ตอบเท่านั้น

สำหรับกราฟิกเว็บ ตรวจผลบิลด์สุดท้ายรวมไฟล์ที่ปรับในเครื่องด้วย เฟรมเวิร์กหรือตัวรวมบันเดิลอาจปรับเองภายหลัง ทดสอบซ้ำหากมาร์กอัปที่ส่งต่างกัน

สำหรับส่งต่อให้แก้ได้ เปิดสำเนาในโปรแกรมเป้าหมายและเลือกส่วนที่ผู้รับต้องการ ยืนยันตัวอักษรเล็ก ช่องเปิด สีแยก และการตัดภาพ เก็บไฟล์หลักแม้สำเนาเว็บผ่าน

การปรับไฟล์แยกจากการบีบอัดขนส่งด้วย คู่มือ SVGZ เทียบ SVG สาธิตการบีบและคลาย gzip ที่คืนไบต์ต้นฉบับเหมือนเดิม SVGO เปลี่ยนต้นฉบับก่อนส่ง gzip จึงเข้ารหัสไบต์เหล่านั้นต่อได้ เปรียบเทียบแต่ละการทำงานกับเป้าหมายของมัน

เมื่อใดการแปลงเป็นเวกเตอร์ควรอยู่ก่อนปรับไฟล์

หากไฟล์หลักเวกเตอร์หายและเหลือเพียง PNG หรือ JPG แบน กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector ช่วยเตรียม SVG สำหรับประเมินได้ เปรียบเทียบกับต้นฉบับและตรวจช่องเปิด รายละเอียดเล็ก และพื้นที่แยกก่อนยอมรับ เพิ่ม ID หรือกลุ่มที่หน้าต้องการหลังตรวจงาน แล้วปรับสำเนาส่งมอบและทดสอบจุดอ้างอิงเหล่านั้น

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

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

ปิด cleanupIds แล้วทุก SVG ปรับได้ปลอดภัยไหม? ไม่ มันเก็บ ID จากการลบและย่อของปลั๊กอินนั้น แต่ปลั๊กอินอื่นยังเปลี่ยนสไตล์ กลุ่ม รูปทรง หรือข้อมูลพาธได้ ตรวจฟีเจอร์และการอ้างอิงที่กระบวนการรับใช้

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

ควรปรับไฟล์หลักที่แก้ได้เพียงไฟล์เดียวไหม? เก็บไฟล์หลักและเขียนสำเนาส่งมอบที่ปรับ ไฟล์เรนเดอร์ถูกหลังปรับได้แม้โครงสร้างวัตถุมีประโยชน์น้อยลงสำหรับแก้ภายหลัง

SVGO เปลี่ยน PNG เป็นพาธเวกเตอร์ได้ไหม? ไม่ได้ SVGO ประมวลผลมาร์กอัป SVG การลากพาธจากราสเตอร์เป็นเวกเตอร์เป็นการทำงานก่อนหน้าเมื่อต้องการรูปทรงแก้ได้และไม่มีไฟล์หลักเวกเตอร์ที่เหมาะ

แหล่งอ้างอิง

1. รีโพซิทอรี SVGO — อธิบายการติดตั้ง เอาต์พุตบรรทัดคำสั่ง การโหลดการตั้งค่า และ API optimize
2. preset ปริยาย SVGO — รายการปลั๊กอินและเอกสาร override กับความต่างการผสานใช้งาน
3. SVGO cleanupIds — อธิบายการลบ ID ย่อ ตัวเลือกเก็บ และกลไกป้องกันที่เกี่ยวข้อง
4. SVGO removeViewBox — อธิบายความเสี่ยงการปรับมาตราส่วนจากการลบ viewBox อย่างชัดเจน

เก็บสำเนาเล็กที่สุดที่ผ่านการตรวจงานและพฤติกรรม หากไฟล์เริ่มต้นยังไม่มีรูปทรงเวกเตอร์ที่แก้ได้ ให้ เตรียม SVG จากงานราสเตอร์ ตรวจรูปทรง และรักษาจุดอ้างอิงที่เพิ่มก่อนปรับสำเนาส่งมอบ