Kalau Anda pernah memperbesar sebuah logo lalu gambarnya jadi buram dan pecah, Anda tahu betapa menjengkelkannya masalah itu. SVG ada justru untuk mengatasinya. Format gambar ini bekerja dengan cara yang sama sekali berbeda dari JPG dan PNG — dan memahami perbedaan itu penting supaya Anda memakai format yang tepat di tiap situasi.
Apa arti SVG?
SVG adalah singkatan dari Scalable Vector Graphics — "grafis vektor yang bisa diskalakan". Ini format gambar terbuka yang dibakukan W3C (konsorsium yang sama yang menetapkan spesifikasi HTML dan CSS), dan didukung secara bawaan oleh semua browser modern.
Tidak seperti JPG dan PNG yang menyimpan gambar sebagai kisi piksel berwarna, SVG menjabarkan gambar dalam bentuk teks, memakai koordinat matematis untuk menggambarkan bentuk, garis, lengkung, dan warna. Sebuah file SVG pada dasarnya adalah file teks — dan bisa dibuka serta diedit di penyunting kode mana pun.
Bagaimana SVG bekerja di balik layar?
File SVG ditulis dalam XML, bahasa markah yang mirip HTML. Sebuah lingkaran merah, misalnya, cukup dijabarkan lewat titik pusat, jari-jari, dan warna isinya — bukan lewat ribuan piksel.
Browser membaca instruksi matematis itu lalu menggambar ulang citranya langsung di layar, menghitung pikselnya saat itu juga. Itulah sebabnya SVG bisa ditampilkan pada ukuran berapa pun — dari favicon 16x16 piksel sampai billboard 10 meter — tanpa kehilangan ketajaman sedikit pun.
Apa saja kelebihan SVG?
- Bisa diskalakan tanpa kehilangan kualitas: perbesar atau perkecil sesuka hati — gambarnya tetap tajam pada resolusi apa pun, termasuk di layar Retina dan 4K.
- File yang ringan: logo dan ikon sederhana dalam SVG biasanya jauh lebih kecil daripada versi PNG-nya, terutama pada ukuran besar.
- Bisa diubah lewat kode: warna, ukuran, dan animasinya bisa diubah langsung lewat CSS atau JavaScript, tanpa perlu membuka penyunting gambar.
- Terbaca mesin pencari: karena isinya berupa teks, Google bisa membaca dan mengindeks teks yang ada di dalam sebuah SVG.
- Mendukung animasi: animasi CSS maupun SMIL bisa dibuat langsung di dalam SVG, tanpa bergantung pada GIF atau video.
- Aksesibilitas: judul dan keterangan bisa ditambahkan ke dalam SVG untuk pembaca layar.
Apa saja keterbatasan SVG?
- Tidak cocok untuk foto: foto punya jutaan variasi warna dan gradasi yang rumit. Menuangkan itu ke dalam vektor akan menghasilkan file raksasa yang boros — untuk foto, JPG selalu jadi pilihan yang benar.
- Gambar rumit jadi berat: ilustrasi yang sangat detail, dengan banyak bentuk dan gradasi, bisa menghasilkan SVG berukuran besar yang lambat digambar ulang.
- Perlu belajar untuk mengedit manual: menyunting SVG langsung di kodenya menuntut pemahaman XML dan matematika vektor. Alat seperti Illustrator atau Figma membuat prosesnya jauh lebih mudah.
💡 Aturan praktis: pakai SVG untuk logo, ikon, ilustrasi, grafik, peta, dan karya apa pun yang harus tampil dalam berbagai ukuran. Pakai JPG atau WebP untuk foto dan gambar dengan detail padat serta gradasi rumit.
SVG vs PNG vs JPG — kapan memakai masing-masing?
| Ciri | SVG | PNG | JPG |
|---|---|---|---|
| Jenis | Vektor | Raster (piksel) | Raster (piksel) |
| Bisa diskalakan tanpa turun kualitas | Ya | Tidak | Tidak |
| Transparansi | Ya | Ya | Tidak |
| Pas untuk foto | Tidak | Tidak | Ya |
| Pas untuk logo dan ikon | Ya | Ya | Tidak |
| Bisa diubah lewat CSS/JS | Ya | Tidak | Tidak |
| Didukung browser | Ya | Ya | Ya |
Cara memakai SVG di situs dan aplikasi
Ada tiga cara utama menyisipkan SVG ke dalam halaman web:
- Sebagai tag <img>: cara yang paling sederhana. SVG diperlakukan seperti gambar biasa, tapi tidak bisa diutak-atik lewat CSS atau JavaScript.
- Langsung di dalam HTML: kode SVG ditempelkan langsung ke HTML halaman. Cara ini memberi kendali penuh lewat CSS dan JS — warna, animasi, dan interaksi. Inilah pendekatan yang paling disukai untuk ikon interaktif.
- Sebagai background CSS: lewat
background-image: url('icon.svg'). Berguna untuk ikon hiasan, tapi aksesnya lewat JavaScript terbatas.
Bagaimana cara mengubah gambar menjadi SVG?
Mengubah foto atau PNG menjadi SVG bisa dilakukan lewat proses bernama vektorisasi, yang menerjemahkan piksel jadi bentuk-bentuk geometris. Hasilnya paling bagus pada gambar sederhana dengan sedikit warna dan tepian yang tegas — seperti logo berlatar putih. Konversi bisa dipakai untuk mengonversi file antar format utama, termasuk dari PNG dan JPG ke format lain yang ramah web.
Konversikan gambar Anda sekarang
Ubah file antar format gambar utama dengan cepat dan gratis, langsung di browser.
Konversi gambarApakah SVG bagus untuk SEO?
Bagus. Karena SVG berbasis teks, Google bisa merayapi dan mengindeks isinya. Selain itu, logo dan ikon dalam SVG biasanya lebih kecil daripada versi PNG-nya, sehingga halaman jadi lebih cepat — dan kecepatan halaman adalah faktor peringkat langsung di Google sejak Core Web Vitals diterapkan.
Untuk mengoptimalkan SVG bagi SEO, tambahkan elemen title dan desc di dalam kode SVG-nya; keduanya berfungsi sebagai teks alternatif bagi pembaca layar maupun mesin pencari.