Pengenalan Format Gambar SVG

Saya bisa bilang SVG (Scalable Vector Graphics) adalah format gambar yang "terlupakan". Dalam sejarahnya memang sangat jarang dipakai di dalam komunitas pembuatan website. Bukan salah format gambarnya dimana format ini muncul sekitar tahun 1999, tetapi lebih ke browser support yang belum mendukung. Terutama dari ( bisa coba sebutkan?) Internet Explorer. 

Namun, IE9 akhirnya mendukung SVG dan di setiap browser lainnya, termasuk versi untuk mobile. Apakah ini berarti, saatnya SVG menunjukkan taringnya?  

Dari kepanjangan SVG, kita bisa mengetahui kalau SVG adalah gambar berformat Vector. Gambar Vector terdiri dari garis, stroke dan area yang di isi dengan warna. Seperti peta, logo-logo, diagram, ilustrasi dan lainnya. SVG juga dapat digunakan untuk Font. 

Keuntungan utama dari SVG adalah: 

1. Gambar SVG tidak akan pecah dan bisa di besarkan ukuran gambarnya sampai tak terhingga tanpa kehilangan kualitas atau resolusi. (sebagai contoh, silahkan di zoom halaman web ini dan perhatikan gambar-gambarnya) 

2. SVG dibuat menggunakan XML, sehingga itu adalah gratis dan open. (tidak ada badan/perusahaan yang "memiliki" format SVG). Anda dapat membuat gambar SVG dengan menggunakan editor text biasa seperti Notepad. Dengan statement diatas, maka kita bisa menemukan gambar-gambar SVG digunakan dalam komunitas "open source". Untuk contoh, semua logo dan diagram di Wikipedia menggunakan SVG. 

3. Karena SVG adalah Vector, maka ukuran filenya itu biasanya kecil. Bahkan bisa di compress lagi menggunakan "gzip". 

4. Sebagai XML, maka SVG bisa di baca dan dimanipuulasikan oleh JavaScript dan bahasa lainnya. Jadi bisa digunakan untuk animasi, interactive dan lainnya. 

5. Anda bisa memanggil file SVG sama seperti tag <img/> sama seperti JPEG, GIF atau PNG. 

Coba lihat sebuah file SVG di text editor :

Hasilnya adalah sebagai berikut:

Silahkan cari gambar SVG 

Untuk contoh kode nya bisa di akses di http://jsfiddle.net/73Xf3/