Pengertian, sejarah dan keunggulan SVG  Scalable Vector Graphic atau SVG bukanlah sesuatu yang baru untuk desain website. Teknologi grafis yang keren ini sudah banyak dimanfaatkan dari dulu hingga sekarang.

Format gambar ini dikontruksikan menggunakan XML untuk mendeskripsikan grafis vektor dua dimensi. Sebelum munculnya Internet Explorer (IE9), Internet Explorer tidak mendukung gambar grafis ini tanpa plugin tambahan. Hal tersebut sangat menghambat pertumbuhan pertumbuhan format file barbasis XML ini, namun, hal tersebut berubah semenjak munculnya IE9 dan browser-browser modern lainnya seperti Google Chrome dan Mozilla Firefox yang mendukung format file gambar ini.

Sejarah SVG

Perkembangan scalable vector graphic (SVG) dimulai pada tahun 1999 dan beberapa nama besar ikut serta dalam sejarah SVG. Perusahaan seperti Adobe, Apple dan IBM semuanya mengambil bagian dalam mendefinisikan dan menciptakan jenis gambar baru ini. Pada tahun 2001, SVG mendapatkan facelift untuk menyertakan profil ponsel (mobile), kemampuan cetak (print) dan meningkatkan pengaturan display.

svg logo

Logo SVG (Image: w3.org)

Satu hal yang menarik dari perkembangan SVG pada awalnya adalah banyak desainer web yang tidak tertarik dengan format ini karena tidak di support oleh Internet Explorer, sedangkan browser lain sudah menggunakan SVG, namun IE mengambil peranan penting setelah merilis IE9.

Keunggulan SVG

Ketika berbicara tentang file grafis, istilah JPEG, PNG dan GIF adalah yang paling dipahami oleh desainer web. Namun ada keuntungan tersendiri ketika menggunakan SVG, dimana file SVG lebih kecil dan mudah untuk di kompres dibandingkan format lainnya. Grafis SVG dapat dicetak dalam resolusi yang tinggi. Pengeditan SVG bahkan bisa dilakukan dengan alat atau aplikasi sederhana seperti Notepad. Gambar SVG bisa di perbesar (zoomable & scalable) karena mereka adalah gambar vektor, bukan bitmap. Ini berarti bahwa sebuah garis tidak terdiri dari piksel warna seperti yang digunakan gambar bitmap seperti JPG, GIF dan PNG.

Gambar vektor menghitung garis secara matematika, yang berarti jalur tersebut dapat diperbesar tanpa kehilangan kualitas sama sekali. Itulah salah satu kelebihan SVG yang patut untuk dipertimbangkan.

Dasar – dasar SVG

SVG bekerja dalam lingkungan XML. Ini berarti bahasa XML menciptakan gambar. Pada dasarnya, Anda menggunakan XML untuk mendeskripsikan seperti apa gambar akan terlihat nantinya dengan memanfaatkan atribut.

SVG menggunakan elemen berbagai bentuk yang telah ditetapkan dalam proses desain. Unsur-unsur yang sangat dasar. Misalnya <circle> untuk menggambar lingkaran. Anda menggunakan atribut untuk mendefinisikan kordinat seperti jari-jari, warna dan perbatasan (border).

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Kode diatas akan menciptakan lingkaran biru dengan garis batas tipis berwarna hitam. Lingkaran akan memiliki radius 40 piksel dan akan berada pada kordinat tertentu pada halaman website.

Hasilnya seperti berikut ini

JS Bin on jsbin.com

Itu barulah contoh sederhana dari SVG yang bisa Anda terapkan di halaman website. SVG bekerja dalam XML. Ini berarti, nantinya mungkin akan memerlukan statemen deklarasi, element root dan namespace.

Tentu masih banyak lagi yang bisa Anda perbuat dengan SVG, bahkan Anda bisa menambahkan animasi, filter, gradien dan semuanya tersedia untuk membuat gambar SVG menjadi lebih interaktif. Anda bahkan bisa membuat SVG menjadi lebih cantik dengan bantuan CSS.