Input
Menyiapkan ruang kerja Anda…
Cara menggunakan
- Tempel sumber SVG atau buka file SVG UTF-8.
- Pilih Optimalkan SVG, lalu bandingkan pratinjau dan byte.
- Unduh SVG atau perluas Hasil untuk memeriksa dan menyalin markup.
Mengoptimalkan markup vektor
SVG dapat berisi metadata editor dan instruksi gambar panjang selain bentuk yang terlihat. Optimasi menulis ulang markup untuk mengurangi byte yang tidak diperlukan.
Alat memakai SVGO dengan presisi koordinat tiga desimal serta mempertahankan viewBox dan ID. Simpan sumber untuk membandingkan hasil dalam konteks akhirnya.
Bagian yang dapat berubah
Optimasi dapat menghapus metadata dan menyederhanakan instruksi gambar. Presisi tiga desimal dapat sedikit mengubah geometri, terutama pada gambar kecil atau yang sangat diperbesar.
viewBox mendukung ukuran responsif; ID dapat dirujuk bentuk, style atau kode sekitarnya. Konfigurasi ini mempertahankan keduanya tanpa memendekkan atau menghapusnya.
<svg viewBox="0 0 10 10"><metadata>demo</metadata><path d="M0 0 L10 10"/></svg><svg viewBox="0 0 10 10"><path d="m0 0 10 10"/></svg>Perbandingan markup disingkat untuk menyoroti penghapusan metadata dan path ringkas. File unduhan juga mencakup namespace SVG.
Pratinjau dan penyematan
Pratinjau memuat hasil sebagai gambar terisolasi, bukan markup aktif pada halaman. Perilakunya dapat berbeda dari SVG inline dalam aplikasi.
Optimasi bukan sanitasi. Tinjau SVG yang tidak tepercaya sebelum disematkan inline dan uji style, referensi atau perilaku yang bergantung pada dokumen sekitarnya.
Memeriksa dan menyimpan hasil
Unduh menyimpan optimized.svg. Perluas Hasil untuk melihat sumber dan tombol Salin; jumlah byte lebih kecil saja tidak membuktikan tampilan setara.
PNG, JPEG, dan WebP diam: 20 MiB, 24 megapiksel, dan 8.192 piksel per sisi. Base64: 2 MiB. SVG: 1 MiB. Pemeriksaan file: 1 GiB dengan hanya 256 byte pertama yang dibaca. Dukungan codec browser bervariasi. Tidak ada file yang diunggah.
Pertanyaan umum
Apakah SVG hasil optimasi aman disematkan inline?
Optimasi tidak membersihkan sumber. Tinjau elemen, atribut, URL dan style tidak tepercaya sebelum menggunakan SVG inline.
Apakah viewBox dan ID dipertahankan?
Ya, konfigurasi ini mempertahankannya. Markup lain dapat ditulis ulang; uji referensi dan style pada dokumen tujuan.
Dapatkah optimasi mengubah gambar?
Pembulatan koordinat dan penulisan ulang struktur dapat memengaruhi render. Bandingkan pratinjau dan uji file pada tempat penggunaannya.
Mengapa pratinjau terisolasi berbeda dari halaman saya?
Pratinjau gambar tidak berbagi CSS halaman atau perilaku SVG inline. Konteks luar dan referensi tingkat dokumen dapat berpengaruh.
Di mana tombol Salin?
Setelah optimasi, perluas Hasil di bawah pratinjau. Di sana terdapat sumber SVG dan tombol Salin; Unduh SVG tersedia di atas pratinjau.