Utilia
Kategori ▾
Bahasa: id ▾

Pengoptimal SVG

Optimalkan dan minify file SVG online dengan SVGO langsung di browser. Pilih preset, bandingkan hasilnya secara visual, dan lihat penghematan ukuran dan gzip.

Plugin

Menghapus viewBox membuat gambar tidak lagi dapat diskalakan, dan memperpendek atau menghapus ID merusak CSS, JavaScript, <use>, atau tautan jangkar yang merujuknya. Gunakan preset Aman untuk SVG yang dipakai di kode, sprite, atau animasi.

Cara mengoptimalkan SVG

  1. Letakkan file SVG di area unggah atau klik untuk memilihnya. Anda juga bisa menempelkan markup ke kotak Kode SVG.
  2. Pilih Preset: Aman, Seimbang (bawaan), atau Maksimum. Daftar Plugin di bawahnya menunjukkan persis langkah mana yang diaktifkan setiap preset.
  3. Sesuaikan jika perlu: Presisi desimal (0 sampai 8 digit), Beberapa putaran, dan Rapikan (keluaran berindentasi) jika Anda ingin kode yang mudah dibaca. Begitu Anda mengubah plugin, presisi, atau jumlah putaran, preset beralih ke Kustom.
  4. Klik Optimalkan SVG. File yang diletakkan langsung dioptimalkan, dan setelah ada hasil, setiap perubahan pengaturan menjalankan ulang optimasi secara otomatis.
  5. Periksa angka Ukuran asli, Ukuran setelah dioptimalkan, Penghematan, dan Dengan gzip, lalu bandingkan kedua gambar berdampingan.
  6. Klik Salin untuk menyalin Kode SVG yang dioptimalkan, atau Unduh SVG yang dioptimalkan untuk menyimpannya sebagai nama.min.svg.

Optimasi dilakukan oleh SVGO 4, pengoptimal SVG sumber terbuka (MIT) standar yang dipakai di sebagian besar alat build web. Versi browsernya dimuat saat pertama kali Anda mengklik, dan berjalan sepenuhnya di perangkat Anda: SVG Anda tidak pernah diunggah.

Mengapa file SVG dari alat desain begitu berat

SVG yang diekspor dari Illustrator, Inkscape, Figma, atau Sketch membawa jauh lebih banyak daripada gambarnya. Editor menambahkan namespace dan atribut sendiri (nama layer, panduan, pengaturan ekspor), blok <metadata>, komentar seperti “Generator: Adobe Illustrator”, koordinat dengan enam desimal atau lebih, grup yang hanya berisi satu elemen, dan warna bertele-tele seperti #ffffff. Semua itu tidak mengubah apa yang digambar browser. SVGO menghapusnya, membulatkan angka, menulis ulang data path dengan perintah yang lebih pendek, memperpendek warna, serta menggabungkan atau membuka elemen yang berlebihan. Pengurangan 40–60% lazim untuk ikon dan ilustrasi hasil ekspor.

Preset dan plugin berisiko

  • Aman menjalankan preset bawaan SVGO tetapi mempertahankan ID, <desc>, path terpisah, dan aturan <style>, dengan 3 desimal dan satu putaran. Gunakan untuk SVG yang dirujuk dari CSS atau JavaScript, sprite, dan animasi.
  • Seimbang adalah preset bawaan SVGO, 3 desimal, beberapa putaran. Cocok untuk sebagian besar ikon dan ilustrasi yang ditampilkan sebagai gambar.
  • Maksimum menambahkan Hapus </strong>, <strong>Hapus skrip dan atribut event</strong>, <strong>Hapus width/height (pertahankan viewBox)</strong>, dan <strong>Ganti xlink:href dengan href</strong>, dengan 2 desimal dan beberapa putaran.</li> </ul> <p>Tidak ada preset yang menghapus viewBox. <strong>Hapus viewBox</strong> hanya untuk kasus khusus: tanpanya, gambar tidak lagi dapat diskalakan ke ukuran yang Anda tetapkan di CSS.</p> <p>Ketahui apa yang bisa dirusak oleh plugin lain:</p> <ul> <li><strong>Persingkat dan hapus ID yang tidak terpakai</strong> mengganti nama ID seperti <code>#icon-home</code> menjadi <code>a</code>. Setiap selektor CSS, kueri JavaScript, referensi sprite <code><use href="#…"></code>, jangkar halaman, atau animasi SMIL/CSS yang menargetkan nama lama berhenti berfungsi.</li> <li><strong>Hapus <title></strong> dan <strong>Hapus <desc></strong> menghapus nama dan deskripsi aksesibel. Pertahankan pada ikon dan bagan bermakna yang harus diumumkan pembaca layar.</li> <li><strong>Presisi desimal</strong> yang rendah dapat merusak bentuk ikon kecil: kurva bergoyang dan tepi bergeser. Selalu periksa perbandingan visual; 3 adalah bawaan yang aman.</li> <li><strong>Gabungkan path</strong> menyatukan path yang bersebelahan menjadi satu, sehingga efek hover atau animasi yang menargetkan satu path kehilangan targetnya.</li> </ul> <h2>Tips</h2> <ul> <li>Simpan salinan induk yang belum dioptimalkan untuk diedit; perlakukan <code>.min.svg</code> seperti kode yang sudah dikompilasi.</li> <li>Aktifkan gzip atau brotli di server Anda: format teks seperti SVG terkompresi dengan sangat baik, dan angka <strong>Dengan gzip</strong> menunjukkan apa yang sebenarnya diunduh pengunjung (ditampilkan jika browser Anda mendukung <code>CompressionStream</code>).</li> <li>SVG inline dapat diberi gaya dengan CSS dan dianimasikan, tetapi tidak di-cache terpisah; SVG di dalam <code><img></code> di-cache tetapi tidak dapat diberi gaya dari halaman.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Pertanyaan yang sering diajukan</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Apakah SVG saya diunggah ke server?</summary> <div class="prose px-5 pb-5"><p>Tidak. SVGO berjalan di browser Anda. Satu-satunya yang diunduh adalah kode pengoptimalnya sendiri, saat pertama kali Anda mengoptimalkan.</p></div> </details> <details class="faq group"> <summary>Mengapa pratinjau ditampilkan sebagai gambar?</summary> <div class="prose px-5 pb-5"><p>SVG adalah format dokumen yang dapat berisi JavaScript dan memuat file eksternal. Kedua pratinjau dirender sebagai <code><img></code> dari URL blob lokal, dan dalam mode itu browser tidak pernah menjalankan skrip atau mengambil sumber daya eksternal, sehingga aman mempratinjau SVG yang tidak tepercaya di sini. Kode hasil optimasi sendiri tetap memuat skrip apa pun kecuali <strong>Hapus skrip dan atribut event</strong> aktif (aktif pada <strong>Maksimum</strong>).</p></div> </details> <details class="faq group"> <summary>SVG saya yang sudah dioptimalkan tidak lagi dapat diskalakan. Apa yang terjadi?</summary> <div class="prose px-5 pb-5"><p>viewBox kemungkinan terhapus, baik oleh <strong>Hapus viewBox</strong> maupun sebelumnya oleh alat lain. Optimalkan ulang file asli dengan plugin itu dimatikan.</p></div> </details> <details class="faq group"> <summary>Mengapa sprite ikon atau animasi saya berhenti berfungsi?</summary> <div class="prose px-5 pb-5"><p><strong>Persingkat dan hapus ID yang tidak terpakai</strong> atau <strong>Gabungkan path</strong> mengubah elemen yang dirujuk kode Anda. Gunakan preset <strong>Aman</strong>, yang mempertahankan keduanya.</p></div> </details> <details class="faq group"> <summary>File hasil optimasi tidak lebih kecil. Mengapa?</summary> <div class="prose px-5 pb-5"><p>SVG tersebut kemungkinan sudah diminify. Coba <strong>Maksimum</strong> atau <strong>Presisi desimal</strong> yang lebih rendah, dan matikan <strong>Rapikan (keluaran berindentasi)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Alat terkait</h2> <ul class="card-grid mt-4"><li><a class="card" href="/id/svg-ke-png/"> <span class="card-title">SVG ke PNG</span> <span class="card-text">Konversi SVG ke PNG, JPG, atau WebP di browser dengan lebar, tinggi, skala, atau DPI bebas, latar transparan atau berwarna. Banyak file dan ZIP, tanpa unggah.</span> </a></li> <li><a class="card" href="/id/gambar-ke-svg/"> <span class="card-title">Pelacak Gambar ke SVG</span> <span class="card-text">Ubah logo atau gambar PNG dan JPG menjadi path vektor SVG di browser. Ada preset, jumlah warna, filter bintik, pratinjau aman, tanpa unggah.</span> </a></li> <li><a class="card" href="/id/kompres-gambar/"> <span class="card-title">Kompres Gambar</span> <span class="card-text">Kompres gambar JPG, PNG, dan WebP dengan penggeser kualitas, bandingkan ukuran sebelum dan sesudah, dan proses banyak foto sekaligus tanpa mengunggahnya.</span> </a></li> <li><a class="card" href="/id/css-formatter/"> <span class="card-title">CSS Formatter dan Minifier</span> <span class="card-text">Rapikan CSS yang berantakan dengan indentasi bersih atau minify dengan csso, dan lihat ukurannya sebelum dan sesudah. Berjalan di browser Anda, tanpa unggahan.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Iklan"><span class="ad-label">Iklan</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Alat online gratis yang berjalan di browser Anda. Data Anda tetap di perangkat Anda.</p> </div> <nav aria-label="Kategori"> <p class="font-semibold">Alat</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/id/alat-teks/">Alat Teks</a></li><li><a class="link-muted" href="/id/alat-developer/">Alat Developer</a></li><li><a class="link-muted" href="/id/web-seo-pemasaran/">Web, SEO, dan Pemasaran</a></li><li><a class="link-muted" href="/id/warna-desain/">Warna dan Desain</a></li><li><a class="link-muted" href="/id/edit-gambar/">Edit Gambar</a></li><li><a class="link-muted" href="/id/pdf-dokumen/">PDF dan Dokumen</a></li><li><a class="link-muted" href="/id/matematika/">Berhitung dan Matematika</a></li><li><a class="link-muted" href="/id/kalkulator-keuangan/">Kalkulator Keuangan</a></li><li><a class="link-muted" href="/id/tanggal-waktu/">Tanggal dan Waktu</a></li><li><a class="link-muted" href="/id/konversi-satuan/">Konversi Satuan</a></li><li><a class="link-muted" href="/id/kesehatan-kebugaran/">Kesehatan dan Kebugaran</a></li><li><a class="link-muted" href="/id/rumah-renovasi-dapur-mobil/">Rumah, Renovasi, Dapur, dan Mobil</a></li><li><a class="link-muted" href="/id/generator/">Generator</a></li><li><a class="link-muted" href="/id/tes-perangkat-browser/">Tes Perangkat dan Browser</a></li><li><a class="link-muted" href="/id/audio-video/">Audio dan Video</a></li><li><a class="link-muted" href="/id/pendidikan-bahasa/">Pendidikan dan Bahasa</a></li><li><a class="link-muted" href="/id/game/">Game</a></li></ul> </nav> <nav aria-label="Informasi"> <p class="font-semibold">Informasi</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/id/tentang-kami/">Tentang kami</a></li> <li><a class="link-muted" href="/id/kontak/">Kontak</a></li> <li><a class="link-muted" href="/id/kebijakan-privasi/">Kebijakan privasi</a></li> <li><a class="link-muted" href="/id/ketentuan-penggunaan/">Ketentuan penggunaan</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>