Tunggu sebentar...(/)
Kami sedang mengoptimalkan gambar Anda. Harap tunggu sebentar saat kami memastikan hasil kualitas terbaik untuk Anda.
Hebat, kami berhasil mengompresi gambar Anda.
Gambar Dioptimalkan.
Kompres Gambar SVG Online
Hapus metadata, pertahankan vektor: SVG Anda tetap tampil sama persis
Mengoptimalkan...
Kompres file SVG dengan menghapus sisa-sisa dari editor
Buka sebuah file SVG di Notepad dan Anda akan melihat semuanya: tag, angka, teks. Itulah formatnya. Tidak ada piksel, tidak ada foto, hanya instruksi untuk menggambar bentuk. Ini penting karena mengubah arti kompresi di sini. Tidak ada yang dipadatkan atau didekati. Teks berlebih cukup dihapus, dan gambar tetap utuh.
Dari mana sebenarnya ukuran file berasal
Hampir tidak ada yang berasal dari karya seninya. Ekspor sebuah logo dari Illustrator, Figma, atau Inkscape dan file tersebut datang membawa 'dokumen' dari editor: komentar generator, DOCTYPE yang sudah tidak dibutuhkan sejak 2008, deklarasi XML, blok metadata yang menjelaskan dokumen dalam RDF, nama layer, dan blok style penuh kelas yang tidak digunakan elemen mana pun. Pada logo asli yang kami uji, semua itu mencapai sekitar dua pertiga dari ukuran file. Bentuk-bentuknya hanya bagian kecilnya.
Lalu ada angka-angka. Editor menulis koordinat dengan presisi floating point penuh, jadi sebuah persegi panjang yang berada di 10 dan lebarnya 180 akan disimpan sebagai 10.000000 dan 180.00000000. Kalikan itu untuk setiap titik di setiap path dan angka desimal saja bisa lebih besar dari gambar aslinya.
Masih berupa vektor, jadi tidak ada kualitas yang hilang
Ini bagian yang sering dikhawatirkan orang tanpa alasan. SVG tidak memiliki resolusi. Ia digambar ulang pada ukuran berapa pun saat ditampilkan, entah itu favicon 16 piksel atau papan reklame. Menghapus blok metadata tidak mengubah apa pun. File yang Anda dapatkan kembali akan tetap dapat diskalakan sama persis seperti yang Anda unggah, tampil identik di setiap ukuran, dan masih bisa diedit sepenuhnya di program pembuatnya.
Apa saja yang dihapus
Pembersihan ini memang sengaja dibuat konservatif. Hanya menargetkan hal-hal yang tidak memengaruhi tampilan gambar.
| Dihapus | Dipertahankan |
|---|---|
| Komentar editor dan string generator | Setiap bentuk, path, dan kurva |
| Blok metadata dan namespace RDF-nya | Warna, gradasi, dan opasitas |
| DOCTYPE dan deklarasi XML | Elemen teks dan font |
| Definisi yang tidak dirujuk apa pun | Filter, mask, dan clip path yang digunakan |
| Grup dan layer kosong | Transformasi dan viewBox |
| Angka desimal berlebih pada koordinat | Apa pun yang mengubah tampilan |
Mengapa SVG yang lebih kecil lebih penting daripada foto yang lebih kecil
SVG biasanya adalah logo atau ikon, yang berarti ia berada di header setiap halaman situs dan dimuat sebelum apa pun. Foto dimuat belakangan dan secara malas. Ikon tidak demikian. Mengurangi beberapa kilobyte dari logo header lebih berpengaruh pada skor kecepatan halaman daripada mengurangi jumlah yang sama dari gambar di tengah artikel, karena header adalah bagian yang ditunggu browser sebelum bisa menampilkan halaman.
Satu hal yang perlu dicek sebelum digunakan
Pembersihan ini memperpendek atribut id di dalam file. Referensi di dalam SVG yang sama akan diperbarui agar tetap cocok, sehingga gradasi, mask, dan clip path tetap berfungsi dan gambar tetap tampil seperti sebelumnya. Namun, kode di luar file tidak bisa diketahui. Jika SVG Anda digunakan dalam sprite ikon yang dirujuk halaman lain, atau jika stylesheet atau script mengambil elemen berdasarkan id, sebaiknya uji kembali setelah mengganti file. Untuk logo biasa atau ikon hasil ekspor, yang merupakan mayoritas SVG, tidak ada yang perlu dicek.
Jika SVG Anda berisi foto di dalamnya
Terkadang SVG sebenarnya bukan vektor. Jika Anda meletakkan foto di artboard Illustrator, lalu ekspor sebagai SVG, gambarnya akan disisipkan sebagai string base64 panjang di dalam XML. File bisa berukuran dua megabyte hanya dengan satu bentuk di dalamnya. Membersihkan markup tidak akan menyentuh blok itu, karena itu bukan markup. Jika file Anda hampir tidak mengecil dan memang berisi foto, itulah sebabnya, dan solusinya adalah keluarkan gambar dan kompres secara terpisah sebagai JPEG atau PNG.
Tidak ada pengaturan
Tidak ada opsi, tidak ada level kompresi, dan tidak ada tab lanjutan. Unggah file, dapatkan kembali hasil yang sudah dibersihkan. Beberapa file sekaligus pun bisa, dan Anda bisa mengunduh satu per satu saat selesai atau seluruhnya dalam bentuk ZIP.
Apa yang terjadi pada file Anda
File dikirim melalui koneksi terenkripsi, dibersihkan, dan dihapus dari server satu jam kemudian. Tidak ada yang disimpan, dan tidak digunakan untuk tujuan lain.
Apa yang Anda dapatkan
- Metadata editor, komentar generator, DOCTYPE, dan definisi yang tidak terpakai dihapus
- Koordinat dibulatkan ke presisi yang masuk akal, bukan sembilan angka desimal
- File yang masih bisa diskalakan tanpa batas dan tetap bisa dibuka di editor Anda
- Tampilan identik di setiap ukuran, diverifikasi dengan file asli
- Unggah banyak file sekaligus, unduh satu per satu atau semuanya dalam bentuk ZIP
- Tidak perlu akun, tidak perlu instalasi, dan file dihapus dari server satu jam kemudian
Selanjutnya?
Bekerja dengan logo yang juga tersedia dalam bentuk bitmap? Kompres PNG untuk versi transparan dan Kompres WebP untuk versi modern. Jika ternyata SVG Anda berisi foto di dalamnya, Kompres JPG adalah tempat yang tepat untuk gambar tersebut.
Pertanyaan yang Sering Diajukan
Tidak, dan memang tidak bisa. SVG tidak memiliki piksel dan tidak punya resolusi. Ia adalah serangkaian instruksi gambar yang diikuti browser setiap kali gambar ditampilkan, sehingga tampil setajam apapun ukurannya, baik di ponsel maupun papan reklame. Membersihkan file hanya menghapus teks yang tidak menggambar apa-apa, seperti komentar dan metadata. Bentuk, kurva, dan warna tetap utuh, sehingga hasilnya tampil identik di setiap ukuran.
Semua 'dokumen' tambahan yang ditulis editor Anda. Illustrator, Figma, dan Inkscape menulis komentar generator, deklarasi XML, DOCTYPE, blok metadata dalam RDF, nama layer, dan sering kali blok style berisi kelas yang tidak digunakan. Selain itu, koordinat ditulis dengan presisi penuh, jadi nilai 180 disimpan sebagai 180.00000000. Pada logo hasil ekspor, semua itu bisa mencapai sekitar dua pertiga ukuran file. Bagian yang benar-benar menggambar gambar hanyalah sebagian kecilnya.
Ya. Hasilnya adalah SVG biasa, jadi bisa dibuka di Illustrator, Figma, Inkscape, atau editor teks apa pun persis seperti aslinya. Satu-satunya perbedaan adalah sebagian 'pembukuan' milik editor sudah dihapus, jadi nama layer mungkin tidak kembali seperti semula. Karya seninya sendiri tidak berubah dan tetap bisa diedit sepenuhnya.
Ada dua alasan umum. Pertama, file tersebut memang sudah dioptimalkan, biasanya terjadi pada SVG yang diekspor dari alat yang sudah membersihkan file atau file yang pernah melalui proses optimasi sebelumnya. Kedua, file berisi foto yang disisipkan. Yang kedua ini sering mengecoh: menempatkan foto di artboard Illustrator lalu ekspor sebagai SVG akan menyisipkan gambar sebagai blok base64 di dalam XML. Blok itu adalah data gambar, bukan markup, jadi membersihkan markup tidak mengubahnya. Jika SVG dua megabyte hampir tidak berubah, buka di editor teks dan cari string sangat panjang yang diawali data:image.
Bisa, dan sebaiknya diketahui sebelum digunakan. Pembersihan ini memperpendek atribut id di dalam file. Referensi di dalam SVG yang sama akan diperbarui agar tetap cocok, sehingga gradasi, mask, dan clip path tetap berfungsi dan gambar tetap tampil seperti sebelumnya. Namun, kode di luar file berbeda: jika stylesheet menargetkan elemen berdasarkan id, JavaScript menganimasikan node tertentu, atau file merupakan bagian dari sprite yang dirujuk halaman lain, sebaiknya uji kembali setelah mengganti file. Untuk logo mandiri atau ikon hasil ekspor, yang mencakup sebagian besar SVG, tidak ada yang perlu dikhawatirkan.
Ya, dan keduanya saling melengkapi, bukan bersaing. Pembersihan ini menghapus teks yang seharusnya tidak ada di file. Gzip, yang diterapkan server web Anda saat mengirim file, mengompres sisa teks yang ada. Melakukan keduanya adalah praktik umum dan hasil gabungannya lebih kecil daripada hanya salah satu. Pastikan juga server Anda benar-benar mengaktifkan kompresi untuk tipe konten image/svg+xml, karena beberapa konfigurasi default hanya mencakup HTML, CSS, dan JavaScript.