Optimizer SVG Online

Dalam sebagian besar kasus, tidak. Optimasi aman yang dilakukan oleh alat ini (penghapusan metadata, komentar, elemen tersembunyi, atribut redundan, dan penyederhanaan path tanpa kehilangan presisi) tidak mempengaruhi tampilan visual. Namun ada sejumlah kecil optimasi yang dapat menyebabkan perubahan dalam kasus tepi: mengurangi presisi desimal dalam koordinat dapat sedikit mempengaruhi bentuk path yang sangat detail (meski secara visual tidak terlihat dalam kebanyakan kasus), dan menghapus atribut CSS tertentu dapat mempengaruhi SVG dengan gaya yang kompleks. Untuk SVG yang akan digunakan sebagai ikon sederhana atau ilustrasi statis, optimasi sepenuhnya aman. Untuk SVG dengan animasi CSS atau JavaScript yang bergantung pada ID atau kelas tertentu, disarankan meninjau hasilnya sebelum digunakan dalam produksi.

Optimasi SVG menghapus semua yang tidak diperlukan untuk rendering visual. Dalam kategori metadata yang tidak diperlukan: deklarasi XML versi 1.0 saat tidak dibutuhkan, deklarasi DOCTYPE, komentar (kecuali komentar lisensi yang beberapa organisasi mensyaratkan dipertahankan), elemen metadata XML, dan namespace Inkscape, Adobe Illustrator, serta CorelDRAW. Dalam kategori atribut redundan: atribut dengan nilai default (seperti fill=black saat hitam sudah merupakan default), atribut style yang dapat dikonsolidasikan. Dalam kategori geometri: path dengan perintah redundan, subpath kosong, dan transform identitas (transform=translate(0,0)). Optimasi path mengonversi kurva Bezier ke bentuk yang lebih pendek bila memungkinkan dan mengurangi presisi desimal koordinat.

Penghematan bervariasi secara signifikan tergantung sumber SVG. SVG yang diekspor dari Adobe Illustrator terkenal kembung: dapat berisi puluhan kilobyte metadata aplikasi, layer tersembunyi, definisi yang tidak terpakai, dan path yang tidak dioptimalkan. Ikon sederhana yang diekspor dari Illustrator dengan ukuran 50 KB dapat dikurangi menjadi 3-5 KB setelah optimasi (pengurangan 90%+). SVG dari Figma lebih bersih tetapi masih punya ruang untuk perbaikan: pengurangan 30-50% adalah hal umum. SVG Inkscape memiliki metadata khusus aplikasi (namespace sodipodi dan inkscape) yang menambah beban yang tidak perlu untuk produksi: pengurangan 40-60% adalah khas. Untuk SVG yang sudah dioptimalkan secara manual, keuntungannya lebih kecil (10-20%). Secara rata-rata, SVGO melaporkan pengurangan median 55-65% dalam benchmark-nya.

Mutlak ya. SVG yang tidak dioptimalkan memiliki dampak langsung pada performa web. SVG 80 KB versus yang dioptimalkan 8 KB mewakili 10x lebih sedikit data yang harus diunduh, diurai, dan dirender oleh browser. Dampaknya sangat terlihat pada perangkat mobile dengan koneksi lambat. Untuk ikon SVG (yang paling umum di web), ukuran optimal setelah optimasi harus di bawah 1 KB untuk ikon sederhana dan di bawah 10 KB untuk ilustrasi kompleks. Selain pengurangan ukuran langsung, SVG yang dioptimalkan terkompresi lebih baik dengan gzip atau Brotli (algoritma kompresi HTTP), karena file yang lebih bersih memiliki entropi lebih rendah. Alat audit performa seperti Lighthouse dari Google memberi penalti pada aset yang tidak dioptimalkan, termasuk SVG berukuran besar, dalam skor Performa mereka.

Ya, optimasi agresif tertentu dapat merusak SVG yang memiliki interaktivitas. Kasus utama adalah: (1) Penghapusan ID: jika SVG memiliki animasi CSS atau JavaScript yang merujuk elemen berdasarkan ID mereka, menghapus ID tersebut akan merusak fungsionalitas. (2) Penghapusan class: mirip dengan kasus sebelumnya dengan kelas CSS. (3) Penggabungan group: menggabungkan kelompok g dapat mengubah urutan rendering atau menghilangkan titik referensi untuk animasi. (4) Inlining style: mengonversi kelas CSS ke atribut style inline dapat mengganggu CSS eksternal yang menargetkan kelas tersebut. Untuk SVG yang dianimasikan atau interaktif, rekomendasinya adalah menggunakan profil optimasi konservatif yang mempertahankan ID dan kelas, atau meninjau hasil secara manual.

SVGO (SVG Optimizer) adalah alat optimasi SVG yang paling banyak digunakan dalam ekosistem JavaScript/Node.js. Dibuat oleh Kir Belevich pada 2012 dan tersedia sebagai paket npm (npm install -g svgo). SVGO menggunakan arsitektur plugin: setiap jenis optimasi adalah plugin independen yang dapat diaktifkan atau dinonaktifkan secara individual. Plugin diorganisir dalam dua kategori: preset-default (plugin yang diaktifkan secara default, dianggap aman) dan plugin opsional (lebih agresif, dinonaktifkan secara default). SVGO v3 (dirilis 2022) adalah versi saat ini, dengan dukungan penuh SVG 2.0. Alat ini terintegrasi ke dalam sistem build paling populer: ada svgo-loader untuk webpack, vite-plugin-svgo untuk Vite, dan plugin untuk Rollup serta esbuild. Pada 2020, Jake Archibald membuat SVGOMG, antarmuka web untuk SVGO yang memungkinkan memvisualisasikan hasil dan menyesuaikan plugin secara interaktif.