Panduan
Apa itu file SVG?
SVG adalah singkatan dari Scalable Vector Graphics. File SVG menggambarkan gambar dengan bentuk dan koordinat, bukan piksel, sehingga tetap tajam di ukuran berapa pun.
Apa itu SVG: file teks yang berisi bentuk
SVG adalah file teks yang ditulis dalam XML. Alih-alih menyimpan warna setiap piksel, file ini menyimpan instruksi: gambar lingkaran di sini, path melalui titik-titik ini, isi dengan warna ini. Browser atau editor Anda membaca instruksi tersebut dan menggambar hasilnya di ukuran berapa pun gambar itu ditampilkan.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#C8F031"/>
</svg>Potongan kode itu sudah merupakan SVG lengkap: sebuah lingkaran hijau limau di area 100 × 100 satuan. Karena berupa teks, SVG bisa dibuka di editor kode, dicari isinya, dikompres, dan diubah secara manual.
SVG adalah standar terbuka dari World Wide Web Consortium yang pertama kali diterbitkan pada 2001 (W3C). Semua browser modern menampilkannya tanpa plugin.
File SVG adalah file berekstensi .svg
File SVG memakai ekstensi .svg dan tipe media image/svg+xml. Varian terkompresinya, .svgz, adalah file yang sama yang dikemas dengan gzip. Sebagian perangkat lunak mesin pemotong dan alat pembuat font juga memakai SVG, tetapi formatnya tetap sama.
Kegunaan format SVG
- Logo dan ikon di situs web dan aplikasi, karena satu file terlihat tajam di setiap kerapatan layar.
- Ilustrasi, grafik, dan peta yang perlu diperbesar atau dicetak besar.
- Animasi dan grafik interaktif, karena setiap bentuk bisa diberi gaya dengan CSS atau diubah dengan JavaScript.
- Mesin pemotong dan mesin laser, yang mengikuti garis luar bentuk.
- Favicon di browser modern.
SVG tidak cocok untuk foto. Foto punya nada yang bergradasi terus-menerus dan akan membutuhkan jutaan bentuk kecil; JPG dan WebP menyimpannya jauh lebih efisien.
Cara membuka file SVG
Browser apa pun bisa membuka SVG: seret file ke jendela Chrome, Firefox, Safari, atau Edge. Untuk melihat kode di samping gambarnya, gunakan SVG viewer kami. Untuk mengedit gambarnya, gunakan editor vektor seperti Inkscape (gratis), Figma, atau Adobe Illustrator. Di Windows, File Explorer bisa menampilkan thumbnail SVG dengan ekstensi tambahan; di Mac, Quick Look menampilkan pratinjaunya dengan tombol spasi.
SVG vs PNG: perbedaan kedua format
| SVG | PNG | |
|---|---|---|
| Tersusun dari | Bentuk dan koordinat | Piksel |
| Saat diperbesar | Tetap tajam di ukuran berapa pun | Buram saat diperbesar |
| Transparansi | Ya | Ya |
| Bisa diedit sebagai teks | Ya | Tidak |
| Paling cocok untuk | Logo, ikon, diagram | Tangkapan layar, gambar detail, tempat yang tidak menerima SVG |
Anda bisa berpindah ke dua arah: konverter PNG ke SVG menelusuri piksel menjadi bentuk, dan konverter SVG ke PNG merender bentuk menjadi piksel di ukuran pilihan Anda.