SVGO: Optimalkan SVG Tanpa Kehilangan Struktur yang Dibutuhkan

Untuk mengoptimalkan SVG dengan SVGO tanpa merusak penggunaannya pada halaman, simpan sumber asli, identifikasi struktur yang menjadi ketergantungan halaman, lalu uji salinan yang dioptimalkan secara terpisah pada halaman itu. File lebih kecil dan pratinjau mandiri yang tidak berubah tidak membuktikan bahwa selector CSS, skrip, atau referensi masih berfungsi.

Lencana orisinal kami membuat perbedaan itu terlihat. Preset default SVGO mengurangi sumbernya dari 437 menjadi 263 byte, tetapi menghapus ID yang digunakan HTML di sekitarnya untuk mewarnai ulang matahari. Menonaktifkan cleanupIds menghasilkan salinan 281 byte yang mempertahankan hook. Pengukuran itu menjelaskan satu fixture ini dengan SVGO 4.1.0, bukan jaminan kompresi untuk artwork lain.

SVGO mengedit markup SVG yang sudah ada. Jika Anda hanya memiliki PNG atau JPG, buat atau pulihkan geometri vektor terlebih dahulu. Optimasi tidak dapat mengubah objek di dalam bitmap menjadi path yang dapat diedit.

Tentukan struktur SVG yang perlu Anda pertahankan

Sebelum menjalankan optimizer, bedakan apa yang terlihat dari apa yang dirujuk dokumen atau aplikasi lain. Preset default SVGO mencakup operasi yang mengubah ID, grup, gaya, dan data path. Integrasi juga dapat memilih kumpulan plugin berbeda, jadi periksa konfigurasi alat yang benar-benar memproses file Anda.

Ini adalah pemeriksaan terpisah. Mempertahankan ID tidak mempertahankan setiap grup, node, atau objek yang dapat diedit. Demikian pula, rendering yang benar tidak membuktikan bahwa editor akan memulihkan struktur lapisan pilihan Anda. Simpan master yang dapat diedit dan hasilkan salinan penyerahan untuk konteks target.

Untuk simbol yang dapat digunakan ulang, panduan sprite SVG membahas sisi pengguna referensi. Artikel ini berfokus pada apa yang dapat diubah langkah optimasi sebelum pengguna tersebut melihat file.

Reproduksikan hook CSS eksternal yang rusak

Gunakan folder scratch kosong dengan Node.js dan npm tersedia. Simpan ilustrasi buatan tangan ini sebagai input.svg, termasuk newline akhir. Ini adalah fixture konfigurasi, bukan hasil konversi 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>

Instal versi persis yang digunakan untuk contoh ini, lalu hasilkan file output baru:

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

Jalankan dalam folder bersih agar svgo.config.mjs yang sudah ada tidak memberikan pengaturan tak terduga. Repositori resmi SVGO mendokumentasikan nama file output terpisah dan pemuatan konfigurasi. Untuk build proyek, simpan versi dan konfigurasi dalam version control agar peningkatan versi menjadi perubahan yang disengaja.

Buka default.svg sebagai teks. Lingkarannya masih memiliki isian koral, tetapi ID badge-accent hilang. ID itu tidak dirujuk di dalam dokumen SVG. Dokumentasi cleanupIds menjelaskan bahwa plugin menghapus ID yang tidak digunakan dan memendekkan ID yang dirujuk. Selector halaman eksternal berada di luar input fixture ini.

Untuk melihat konsekuensinya, letakkan markup SVG langsung dalam halaman HTML dengan gaya ini di luar SVG:

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

Gunakan satu salinan per halaman untuk pengujian ini. Matahari SVG asli menjadi emas karena selector cocok. Matahari yang dioptimalkan dengan default tetap koral karena ID-nya hilang. Memuat salah satu file melalui elemen img merupakan pengujian berbeda: halaman host tidak akan memilih bentuk di dalamnya dalam dokumen yang sama.

Pertahankan hook, lalu ulangi pengujian

Simpan ini sebagai svgo.config.mjs dalam folder yang sama:

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

Sekarang tulis salinan lain:

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

Override menonaktifkan satu plugin ini sambil mempertahankan sisa preset default. Ini adalah titik awal untuk ketergantungan ID yang diperagakan. Konfigurasi ini bukan konfigurasi aman universal untuk artwork sembarang, animasi, hubungan aksesibilitas, atau struktur khusus aplikasi.

Kami menjalankan perintah di atas dalam folder bersih dan secara independen menjalankan konfigurasi setara melalui API JavaScript SVGO 4.1.0. Output CLI dan API identik byte demi byte, tanpa newline akhir ditambahkan ke file yang dioptimalkan. Kami kemudian merender setiap hasil dalam dokumen HTML sendiri dengan aturan CSS eksternal yang sama. Browser melaporkan hasil berikut:

Output yang mempertahankan ID menghemat 156 byte, sekitar 35.7% sumber ini. Output itu menggunakan 18 byte lebih banyak daripada output default dan mempertahankan perilaku yang kami butuhkan. Spasi, akhir baris, versi, dan format output dapat mengubah jumlah byte Anda.

Ketiga salinan mempertahankan viewBox="0 0 160 160" dalam pengujian ini. Kami memeriksa hasil yang terlihat dan isian yang dihitung browser. Kami tidak mengukur waktu transfer jaringan atau menguji setiap browser, editor, fitur SVG, atau integrasi build.

Sesuaikan pengaturan untuk ketergantungan tertentu

Jika hanya beberapa ID merupakan hook publik, cleanupIds juga menyediakan opsi preserve dan preservePrefixes. Gunakan ketika Anda dapat menyebutkan ketergantungannya, lalu ulangi pengujian pengguna yang sama. Jika beberapa SVG akan di-inline bersama, periksa juga ID duplikat. Mempertahankan ID yang sudah terduplikasi tidak membuatnya unik; mengganti nama salah satunya mengharuskan pembaruan penggunanya.

Gaya atau skrip di dalam SVG dapat mengubah perilaku optimizer. Dokumentasi cleanupIds menjelaskan pengaman yang menghindari pembersihan ketika elemen tersebut ada. Jangan menerapkan asumsi pengaman itu pada CSS dalam dokumen lain, atau memaksakan pembersihan tanpa memahami referensi mana yang bergantung pada ID.

Perlakukan presisi numerik secara terpisah. Lebih sedikit angka desimal dapat mengurangi markup, tetapi perubahan yang dapat diterima bergantung pada skala koordinat artwork dan ukuran tampilan akhir. Periksa celah kecil, sudut, dan kurva pada ukuran penggunaan grafis. Pemeriksaan ID yang berhasil tidak menyatakan apa pun tentang detail tersebut.

Pertahankan viewBox ketika tata letak bergantung pada perilaku penskalaannya. Dokumentasi plugin removeViewBox memperingatkan tentang konsekuensi penskalaan dan clipping. Plugin itu tidak ada dalam preset default yang didokumentasikan dan digunakan di sini; menambahkannya secara eksplisit merupakan keputusan terpisah. Hindari menyalin konfigurasi lama tanpa memeriksa versi dan preset tujuan penulisannya.

Untuk outline hasil penelusuran yang padat, optimasi markup dan pembersihan node yang disengaja juga menjawab pertanyaan berbeda. Gunakan panduan node SVG untuk menilai apakah geometri membutuhkan penyederhanaan, dan bandingkan siluet setelah pengeditan. Sumber lebih kecil tidak otomatis berarti path potong yang lebih bersih.

Validasi salinan penyerahan di tempat penggunaannya

Setelah memilih konfigurasi, tempatkan file yang dioptimalkan dalam alur kerja penerima sebenarnya. Periksa keadaan default dan keadaan hover, terpilih, bertema, atau beranimasi yang bergantung padanya. Pratinjau statis dapat melewatkan selector yang hanya berjalan setelah interaksi.

Untuk grafis web, periksa output build akhir serta file lokal yang dioptimalkan. Framework atau bundler mungkin menjalankan optimasinya sendiri nanti. Ulangi pengujian jika markup yang diserahkan berbeda.

Untuk penyerahan yang dapat diedit, buka salinan dalam editor yang dimaksudkan dan pilih bagian yang dibutuhkan penerima. Konfirmasi tulisan kecil, lubang, warna terpisah, dan clipping. Pertahankan master sumber meskipun salinan web lolos.

Optimasi file juga terpisah dari kompresi transportasi. Panduan SVGZ versus SVG memperagakan proses gzip bolak-balik yang memulihkan byte sumber identik. SVGO mengubah sumber itu sebelum diserahkan; gzip kemudian dapat mengenkode byte tersebut. Bandingkan setiap operasi dengan tujuannya sendiri.

Kapan vektorisasi dilakukan sebelum optimasi

Jika master vektor hilang dan satu-satunya sumber adalah PNG atau JPG datar, alur kerja gambar-ke-vektor PerfectVector dapat membantu menyiapkan kandidat SVG. Bandingkan hasil dengan sumber dan periksa lubang, detail kecil, serta wilayah terpisah sebelum menerimanya. Tambahkan ID atau grup yang dibutuhkan halaman Anda setelah memeriksa artwork, lalu optimalkan salinan penyerahan dan uji hook tersebut.

PerfectVector bukan optimizer untuk SVG yang sudah ada dan tidak merekonstruksi selector situs web Anda. Gunakan master vektor yang sudah ada ketika tersedia. Pertahankan foto sebagai raster ketika detail gradasi warna yang berkelanjutan lebih penting daripada outline yang dapat diedit. Panduan persiapan vektor di blog membahas pilihan sumber tersebut.

FAQ

Apakah menonaktifkan cleanupIds membuat setiap SVG aman untuk dioptimalkan? Tidak. Langkah itu mempertahankan ID dari penghapusan dan minifikasi plugin tersebut, tetapi plugin lain masih dapat mengubah gaya, grup, bentuk, atau data path. Validasi fitur dan referensi yang digunakan alur kerja penerima Anda.

Mengapa SVG yang dioptimalkan terlihat benar sendiri tetapi salah pada halaman saya? Pratinjau mandiri mungkin tidak menjalankan CSS atau skrip eksternal. Dalam contoh kami, isian koral SVG sendiri dirender normal, sementara pewarnaan ulang emas halaman gagal karena ID yang dipilih telah dihapus.

Haruskah saya mengoptimalkan satu-satunya master yang dapat diedit? Simpan master dan tulis salinan penyerahan yang dioptimalkan. File dapat dirender dengan benar setelah optimasi sementara struktur objeknya menjadi kurang berguna untuk pengeditan berikutnya.

Dapatkah SVGO mengubah PNG menjadi path vektor? Tidak. SVGO memproses markup SVG. Penelusuran raster-ke-vektor adalah operasi lebih awal ketika artwork membutuhkan geometri yang dapat diedit dan tidak ada master vektor yang sesuai.

Sources

1. Repositori SVGO — Menjelaskan instalasi, output command-line, pemuatan konfigurasi, dan API optimize.
2. Preset default SVGO — Mencantumkan pluginnya serta mendokumentasikan override dan perbedaan integrasi.
3. cleanupIds SVGO — Mendokumentasikan penghapusan ID, minifikasi, opsi pelestarian, dan pengaman terkait.
4. removeViewBox SVGO — Menjelaskan risiko penskalaan dari penghapusan viewBox secara eksplisit.

Pertahankan salinan terkecil yang lolos pemeriksaan artwork dan perilaku Anda. Jika file awal masih tidak memiliki geometri vektor yang dapat diedit, siapkan SVG dari artwork raster Anda, periksa bentuknya, dan pertahankan hook yang Anda tambahkan sebelum mengoptimalkan salinan penyerahan.