SVG adalah singkatan dari Scalable Vector Graphics. Ini adalah standar terbuka W3C untuk gambar yang dijelaskan sebagai instruksi, bukan piksel: gambar sebuah lingkaran di sini, ikuti kurva ini, isi bentuk itu dengan warna ini, tampilkan kata itu dengan jenis huruf tersebut. Karena gambar adalah sekumpulan perintah, gambar dapat ditampilkan dalam ukuran apa pun tanpa menjadi buram atau pecah, sehingga logo, ikon, peta, dan bagan sangat sering menggunakan SVG.
Cara SVG menyimpan gambar
File SVG adalah XML: teks yang dapat dibaca dan dibuka di editor apa pun. Elemen <path> berisi string singkat berisi perintah menggambar, <rect>, <circle> dan <polygon> melakukan hal-hal yang sudah jelas, <text> menyimpan teks asli yang dapat dipilih, dan <g> mengelompokkan elemen agar dapat dipindahkan atau diberi gaya bersama. Atribut viewBox mendefinisikan sistem koordinat, yang membuat seluruh gambar dapat diskalakan dengan rapi.
Karena berbentuk teks, SVG dapat dikompresi dengan sangat baik; SVG yang digzip (kadang menggunakan ekstensi .svgz) sering kali hanya sebagian kecil dari ukuran aslinya. Berbentuk teks juga berarti SVG dapat diberi style dengan CSS, dianimasikan, dan diberi skrip. Browser memperlakukannya sebagai bagian dari dokumen, bukan sebagai gambar buram yang tertutup.
Kemampuan terakhir ini memiliki sisi keamanan yang penting: SVG dapat berisi elemen <script>. Di mana pun SVG diterima sebagai unggahan pengguna, file harus dibersihkan atau disajikan dengan cara yang tidak dapat dieksekusi. Ini sebabnya beberapa situs menolak SVG walaupun mereka menerima semua format raster.
SVG kurang tepat digunakan sebagai wadah foto. Anda dapat menyematkan gambar raster di dalamnya, tetapi itu hanya membuat gambar piksel yang dibungkus XML tanpa manfaat penskalaan.
Metadata apa yang dibawa SVG
SVG memiliki elemen khusus <metadata>, dan karena standar tidak menentukan apa saja yang harus dimasukkan, editor menaruh banyak data di sana. Yang paling umum adalah RDF dengan istilah Dublin Core: dc:title, dc:creator, dc:date, dc:description, dc:rights dan URI lisensi. Elemen <title> dan <desc> juga dapat ditempatkan di root atau pada bentuk individual mana pun, dan berfungsi ganda sebagai teks aksesibilitas untuk pembaca layar.
Lalu ada pencatatan internal editor, yang biasanya menjadi bagian terbesar. Inkscape menulis seluruh namespace miliknya sendiri: geometri jendela dokumen, tingkat zoom dan posisi kursor saat terakhir disimpan, garis bantu, pengaturan grid, nama dan visibilitas layer, serta string inkscape:version. Illustrator menyematkan paket XMP dengan pengenal dokumen dan riwayatnya sendiri. Tidak ada bagian tersebut yang menggambar apa pun.
Dua hal praktis menyusul. Data editor dapat dengan mudah menjadi bagian terbesar file, jadi menjalankan SVG melalui pengoptimal sebelum dipublikasikan sering kali memangkas ukurannya hingga setengah. Dan nama layer adalah teks yang Anda tulis: <g inkscape:label="client logo v3 REJECTED"> tidak terlihat pada gambar tetapi sepenuhnya terlihat di dalam file.
Kapan menggunakan SVG
Gunakan SVG untuk apa pun yang digambar, bukan difoto: logo, ikon, diagram, bagan, ilustrasi, peta. Ini adalah pilihan yang tepat untuk web, di mana satu file melayani semua kerapatan layar, dan untuk cetak, di mana ukurannya dapat diskalakan sesuka hati.
Gunakan PNG atau JPG untuk foto dan untuk apa pun dengan nada warna bergradasi. Ekspor juga salinan raster datar saat Anda memerlukan gambar yang dapat dibuka di perangkat lunak yang terlalu lama atau terlalu terbatas untuk SVG, dan hapus metadata editor sebelum mempublikasikannya, baik untuk memperkecil ukuran file maupun karena nama layer tidak selalu untuk konsumsi publik.