Optimizer SVG

Cara kerjanya

1. Tempel atau unggah SVG: masukkan markup SVG secara langsung atau unggah file .svg yang diekspor dari Illustrator, Figma, atau Sketch.
2. Konfigurasi pass optimasi: pilih optimasi mana yang akan diterapkan, penghapusan komentar, penghapusan metadata, penyederhanaan jalur, dan normalisasi viewBox.
3. Optimalkan: alat menjalankan pass yang dipilih dan menampilkan persentase pengurangan ukuran.
4. Unduh atau salin: simpan SVG yang dioptimalkan atau salin markup untuk ditempel di kode Anda.

Mengapa mengoptimalkan SVG Anda?

File SVG yang diekspor dari alat desain penuh dengan data yang tidak perlu, metadata editor, deklarasi gaya inline pada nilai default, grup kosong, atribut transformasi berlebih, dan komentar. Bobot tambahan ini meningkatkan ukuran tanpa mengubah rendering. SVGO (pengoptimal SVG standar industri yang digunakan di sini) biasanya dapat mengurangi ukuran 50 hingga 80% sambil mempertahankan rendering pada level piksel. SVG yang lebih kecil dimuat lebih cepat, terintegrasi lebih cepat di HTML, dan mengurangi bandwidth, terutama penting untuk sistem ikon yang memuat puluhan SVG per halaman.

Optimasi yang diterapkan

• Komentar dihapus, komentar generator dan editor dihapus
• Metadata dihapus, elemen title, desc, dan XMP
• Grup kosong digabung, elemen <g> pembungkus yang tidak perlu dihapus
• Jalur disederhanakan, perintah jalur berlebih digabung dan dipersingkat
• Atribut dibersihkan, nilai default dan atribut presentasi dihapus
• ViewBox dinormalisasi, sistem koordinat yang konsisten

Sejarah singkat SVG dan SVGO

Scalable Vector Graphics dimulai sebagai persaingan antara dua proposal W3C: Precision Graphics Markup Language (PGML) dari Adobe, IBM, Netscape dan Sun, dan Vector Markup Language (VML) dari Microsoft. Keduanya diserahkan pada 1998; kompromi W3C menjadi SVG, direkomendasikan sebagai SVG 1.0 pada September 2001. Internet Explorer terkenal menolak mengirimkan dukungan SVG hingga IE9 (2011), sementara Firefox, Safari, dan Opera mendukungnya sejak pertengahan 2000-an. SVG 1.1 muncul pada 2003, dengan Edisi Kedua pada 2011. SVG Tiny 1.2 menargetkan perangkat seluler pada 2008. SVG 2 mulai dirancang sekitar 2016 tetapi terhenti; saat ini tetap sebagai Candidate Recommendation Draft (terakhir disentuh pada 2018), dengan browser mengirim bagian secara individual. Optimasi datang kemudian. SVGO dibuat oleh Kir Belevich (svg-go) dan pertama kali dipublikasikan di GitHub pada Oktober 2012, ditulis dalam JavaScript. Itu menjadi standar de facto, terintegrasi ke dalam webpack-loader, Vite, Sketch, plugin ekspor Figma, dan UI web SVGOMG oleh Jake Archibald (tim Chrome) yang diluncurkan pada 2015. SVGO 3 (dirilis pada 2023) memodernisasi basis kode. Alat ini mengimplementasikan subset aman dari plugin SVGO yang paling berdampak, berjalan sepenuhnya di browser Anda.

Apa yang sebenarnya dilakukan pengoptimal SVG

• Pengurangan presisi desimal. Illustrator mengekspor jalur dengan 6 digit desimal seperti M127.348293. Tiga desimal secara visual identik untuk ukuran ikon tipikal; satu atau dua sering kali cukup. SVGO menggunakan default 3 desimal melalui plugin cleanupNumericValues. Presisi lebih rendah = file lebih kecil.
• Lipat grup tidak berguna. Alat desain membungkus setiap operasi dalam elemen <g>; banyak yang menjadi kosong setelah penyederhanaan. Plugin collapseGroups menggabungkan grup anak tunggal ke dalam induknya.
• Strip metadata. Illustrator menstempel setiap ekspor dengan blok <metadata>...</metadata> berisi paket XMP, Inkscape dengan atribut namespace sodipodi, Figma dengan ID editor. Tidak ada yang memengaruhi rendering. removeMetadata, removeEditorsNSData, dan removeXMLProcInst menanganinya.
• Optimasi perintah jalur. Konversi koordinat absolut ke relatif (sering lebih pendek), gabungkan segmen garis berurutan (l 5,0 l 0,5 tetap dua; L 5,0 L 5,5 menjadi v 5), hapus Z tidak berguna setelah z. Plugin convertPathData dapat menghemat 30-50% pada string jalur.
• Penghapusan atribut default. fill="black", stroke="none", stroke-width="1" adalah default; SVGO menghapusnya. Dikombinasikan dengan mergeStyles, ini sering memotong ekspor bergaya inline setengahnya.
• Penyingkatan warna. #ffffff → #fff; rgb(255,255,255) → #fff; warna bernama (aliceblue) → hex jika lebih pendek. Plugin convertColors.
• Penghapusan ID yang tidak digunakan. ID yang dihasilkan editor seperti id="path-7423" biasanya tidak pernah dirujuk. cleanupIds SVGO menghapus ID yatim piatu dan minifikasi sisanya menjadi a, b, c...

Di mana optimasi SVG penting

• Sistem ikon. Halaman dengan 30 ikon SVG masing-masing 2 KB adalah 60 KB; dioptimalkan menjadi 800 byte masing-masing menghemat 36 KB. Heroicons, Lucide, Phosphor, Feather semua mengirim SVG yang sudah dioptimalkan sebelumnya; jika Anda mengekstraknya dari file desain, Anda perlu melakukannya sendiri.
• Logo dan aset merek. Logo yang dikirim ke klien sering 50-100 KB dari Illustrator; dioptimalkan menjadi 5-10 KB. Fidelitas visual yang sama, bandwidth lebih rendah, pemuatan halaman lebih cepat. SVG logo Wikipedia turun dari 39 KB ke 11 KB setelah satu kali optimasi.
• SVG inline dalam HTML. Saat Anda menyisipkan SVG (tanpa permintaan HTTP tambahan), setiap byte SVG membengkak payload HTML yang memblokir parser browser. Ikon 200 byte vs 2 KB penting untuk waktu cat pertama.
• Visualisasi data. D3.js, Observable, output SVG ECharts, dan React-vis menghasilkan SVG besar dengan ribuan elemen. Plot pencar dengan 5.000 titik dengan mudah 500 KB mentah; dioptimalkan dapat turun ke 150 KB sambil tetap identik.
• Pembuatan font ikon. Alat seperti IcoMoon, Fontello, dan Fontastic mengonversi SVG ke font ikon. Pra-optimasi SVG sumber memastikan output font lebih bersih dan file font lebih kecil.
• Aset cetak dan PDF. Menyematkan SVG di PDF (melalui alat web-to-PDF seperti Puppeteer, wkhtmltopdf) berarti bloat SVG berakhir di PDF akhir. Optimalkan dulu.
• SVG aman untuk email. Banyak klien email (Outlook, beberapa aplikasi Gmail) tidak merender SVG sama sekali; untuk yang melakukannya (Apple Mail, Gmail web), SVG inline yang lebih kecil menjaga email di bawah ambang batas kliping Gmail 102 KB.

Kesalahan optimasi yang merusak SVG

• Menghapus ID yang dirujuk. SVG sering menggunakan <defs> dengan ID yang dirujuk melalui url(#gradient-1) dalam fill atau stroke. Penghapusan ID agresif merusak gradien, masker, jalur klip, filter. Gunakan alat yang melacak referensi, bukan regex buta.
• Menghapus atribut width/height secara buta. Menjatuhkan rasio aspek alami. Hasilnya: <img src="icon.svg"> membentang untuk memenuhi wadahnya tanpa ukuran intrinsik, menyebabkan CLS (Cumulative Layout Shift). Pertahankan minimal viewBox; sebaiknya pertahankan width/height juga.
• Pengurangan desimal yang terlalu agresif. Mengurangi ke 0 desimal pada ikon kecil membuat jalur terlihat bergerigi. 3 desimal adalah default yang aman; turun ke 1 hanya untuk ikon lebih besar dari 64×64 atau di mana kesempurnaan piksel tidak diperlukan.
• Menghapus xmlns saat inlining. File SVG mandiri memerlukan xmlns="http://www.w3.org/2000/svg". SVG inline dalam HTML tidak (parser HTML5 menanganinya), tetapi jika Anda mungkin mengekstrak SVG ke file nanti, pertahankan xmlns. Kebingungan di sini merusak rendering SVG Safari.
• Mengganti currentColor dengan fill yang di-hardcode. fill="currentColor" adalah hook CSS yang kuat: ikon mewarisi warna teks. Pengoptimal agresif menggantinya dengan nilai yang dihitung, merusak mode gelap dan sistem ikon bertema.
• Menggabungkan jalur yang seharusnya tetap terpisah. Beberapa animasi menargetkan ID jalur tertentu; beberapa alat aksesibilitas mengandalkan beberapa elemen <path> dengan teks <title> individu. Plugin mergePaths menghancurkan ini. Nonaktifkan untuk SVG animasi atau aksesibel.
• Mengupas <title> dan <desc> yang dapat diakses. SVG yang digunakan sebagai gambar mandiri atau dalam tag <img> memerlukan <title> untuk pembaca layar (mirip dengan teks alt). Penghapusan metadata agresif mengupas ini. Baik pertahankan judul, atau tambahkan aria-label pada elemen SVG inline.

Pertanyaan yang lebih sering diajukan

Berapa banyak optimasi SVG yang sebenarnya dapat menghemat?

Ini sangat bergantung pada sumber. Ekspor Adobe Illustrator sering menyusut 60-80% pada pass pertama, sebagian besar dari metadata, namespace editor, dan pengurangan presisi desimal. Ekspor Figma lebih bersih dari kotak (biasanya hemat 20-40%). SVG yang ditulis tangan oleh pengembang? Sering 5-15%, karena tidak banyak yang harus dilepas. Logo Wikipedia, kasus ekstrem bloat Illustrator, dari 39 KB ke 11 KB. Ikon 24×24 tipikal dari Figma turun dari 1,4 KB ke 0,6 KB.

Kapan saya harus menyisipkan SVG vs menggunakannya sebagai file eksternal?

Inline (<svg>...</svg> dalam HTML) untuk ikon kecil (di bawah 2 KB), konten kritis di atas lipatan, dan di mana pun Anda memerlukan CSS untuk memberi gaya SVG (mis. currentColor, status hover, mode gelap). File eksternal (<img src="icon.svg"> atau CSS background-image) untuk ikon identik yang digunakan berulang kali (browser menyimpan cache), ilustrasi yang lebih besar, konten yang tidak membutuhkan tema CSS. Sprite SVG (file tunggal dengan beberapa elemen <symbol>, dirujuk oleh <use>) adalah pola sistem ikon 2014-2019, sekarang sebagian besar digantikan oleh komponen inline-svg di React/Vue/Svelte.

Apakah ada risiko keamanan di SVG yang tidak dioptimalkan?

Ya. SVG dapat menyematkan tag <script> dan handler peristiwa onload, onclick; SVG yang diunggah pengguna adalah vektor XSS. SVG dapat merujuk sumber daya eksternal melalui <image href="...">, membocorkan IP pemirsa. Font SVG (usang tetapi masih dapat diuraikan) secara historis memiliki buffer overflow. Pengoptimal yang baik mengupas <script> dan handler peristiwa sebagai bagian dari pembersihan; jika Anda menerima unggahan SVG pengguna, jalankan melalui pembersih yang diperkuat (DOMPurify dengan profil SVG) sebelum menyajikan.

Dapatkah saya mengoptimalkan SVG menggunakan baris perintah?

Ya. npx svgo input.svg -o output.svg menggunakan pustaka SVGO kanonis. Konfigurasikan plugin melalui svgo.config.js. Integrasi CI: imagemin-svgo di webpack, vite-plugin-svgo, GitHub Action antfu/svg-opt. Untuk optimasi batch: svgo -f ./icons -o ./icons-optimised. Alat browser di sini lebih cepat untuk kasus satu kali dan bekerja tanpa Node terinstal.

Apakah SVG saya dikirim ke server saat saya mengoptimalkan di sini?

Tidak. Optimasi berjalan sepenuhnya di browser Anda melalui JavaScript pada markup SVG yang Anda tempel. Buka tab Network di DevTools saat mengoptimalkan; Anda akan melihat nol permintaan keluar. Aman untuk logo berpemilik, desain ikon yang belum dirilis, SVG perusahaan internal, dan apa pun yang tunduk pada NDA.

Alat terkait