APA ITU 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.
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>
<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.
Demikian yang dapat kami sampaikan kepada Anda mengenai "APA ITU SVG?" .
Kami juga menyediakan layanan jasa, yaitu Purcode. Purcode adalah jasa web design jakarta yang mempunyai misi membuat situs web yang efektif, kreatif serta efisien yang telah ditangani oleh tenaga kerja ahli yang berpengalaman.
Jika Anda berminat, silahkan kunjungi situs web resmi kami www.purcode.net atau hubungi kami ke nomor 0831-4011-2074.
Social Icons