Pengantar SVG

January 31st, 2008

Filed under: Internet — Unggul_USA @ 10:58 am — View blog reactions

SVG Logo

SVG merupakan bahasa yang digunakan untuk grafik 2 dimensi dan aplikasi grafis dalam format XML. Untuk mempelajari SVG perlu dasar tentang pemrograman web yaitu menggunakan HMTL dan dasar-dasar XML.

Apa itu SVG?

SVG merupakan singkatan dari Scalable Vector Graphics
SVG digunakan untuk membuat grafik dengan mendefinisikan vector, yang akan digunakan dalam halaman web.
SVG mendefinisikan dalam format XML
SVG menghasilkan grafik yang tidak akan berkurang kualitasnya sebagai akibat proses zoomming maupun resizing.
Elemen dan attribut dalam SVG dapat dianimaai
SVG direkomendasikan oleh World Wide Web Consortium (W3C)
SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL

Sejarah dan Keuntungan Penggunaan SVG.

SVG 1.1 direkomendasikan oleh W3C pada Januari 2003. Sun Microsystems, Adobe, Apple, IBM, dan Kodak merupakan beberapa organisasi yang terlibat dalam pendefinisian SVG.

Keuntungan penggunaan SVG dibanding format gambar yang lain (misalnya JPEG dan GIF) antara lain:

File sumber SVG dapat dibaca dan modifikasi dengan menggunakan hampir semua tool/text (misalnya notepad)
File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF
Gambar dalam format SVG bersifat scalable/diresizing
Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi
Gambar dalam format SVG bersifat zoomable. Setiap bagian dari gambar dapat di zoom tanpa degradasi mutu
Text dalam SVG “selectable” dan “searchable” (sangat berguna dalam peta)
SVG dapat bekerja dengan Teknologi Java
SVG merupakan “open standard”
SVG merupakan murni XML

Pesaing utama dari SVG adalah Flash. Kelebihan utama dari SVG dibanding Flash adalah bahwa SVG “compliance” dengan standar yang lain (misalnya XSL dan DOM). Flash berlandasan pada teknologi yang tidak open source. Sampai saat ini SVG belum sepenuhnya disupport oleh semua browser. Mozilla, Firefox, dan Opera sudah mendukung SVG, Microsoft baru pada tahap rencana untuk mendukung SVG. Beberapa SVG editor tersedia, salah satu diantaranya adalah Adobe GoLive 5.

Menampilkan File SVG

Untuk menampilkan file dalam format SVG, kita perlu meng- install sebuah plug-in misalnya Adobe SVG Viewer (Klik disini untuk free download dari Adobe.). Jika browser yang kita gunakan tidak mendukung SVG, makan perlu men- download sebuah SVG viewer untuk menampilkan file SVG. Jika kita menggunakan browser Firefox 1.5 atau Opera 9 yang sudah mendukung SVG tidak diperlukan sebuah plug-in/ SVG viewer.

Menulis Kode dalam SVG

Berikut merupakan contoh dari kode sederhana dari SVG. File SVG harus disimpan dalam file dengan ekstension .svg:

<?xml version=”1.0″ standalone=”no”?>

<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”

“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

<svg width=”100%” height=”100%” version=”1.1″

xmlns=”http://www.w3.org/2000/svg”>

<circle cx=”100″ cy=”50″ r=”40″ stroke=”black”

stroke-width=”2″ fill=”red”/>

</svg>

Tampilan hasil darifile SVG diatas adalah berikut ini:

SVG Sample

Penjelasan:

Baris pertama berisi deklarasi XML. Perhatikan pada atribut standalone. Atribut ini menjelaskan apakah file SVG “stands alone”, atau memiliki referensi ke eksternal file. standalone=”no” berarti dokumen SVG mempunyai referensi ke sebuah eksternal file, dalam kasus ini DTD.

Baris kedua dan ketiga merefer pada eksternal SVG DTD. DTD berada pada “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”.

Baris keempat merupakan permulaan dari kode SVG yaitu dengan dmulai dengan elemen <svg>, yang terdiri atas tag pembukan <svg> dan tag penutup </svg>. Inilah elemen dasar dari SVG. Atribut width dan height merupakan seting untuk lebar dan tinggi dari dokumen SVG. Atribut version menjelaskan versi SVG yang digunakan dan atribut xmlns menjelaskan namespace dari SVG.

Elemen <circle> digunakan untuk membuat sebuah lingkaran. Atribut cx dan cy merupakan definisi koordinat x dan y titik tengan lingkaran. Jika atribut cx dan cy tidak dicantumkan maka titik tengan lingkaran akan diset ke (0, 0). Atribut r merupakan radius dari lingkaran.

stroke dan stroke-width mendefinisikan bagaimana tampilan dari bentuk outline dalam kasus ini outline lebar 2px, dan border hitam. fill merupakan atribut untuk warna dalam lingkaran dalam kasus ini merah.

Tag </svg> menutup elemen SVG dan dokumen.