Share to Care

SVG (Scalable Vector Graphics) merupakan suatu format gambar Vector yang berbasis Open XML untuk membentuk gambar 2 dimensi termasuk animasinya dalam format XML (eXtensible Markup Language). Untuk mempelajari SVG perlu dasar tentang pemrograman web yaitu menggunakan HMTL dan dasar-dasar XML.

Pengertian SVG lainnya :
> SVG digunakan untuk membuat grafik dengan mendefinisikan vector, yang akan digunakan dalam halaman web.
> 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


File yang disimpan dalam format SVG ini sangat kecil ukurannya. Dan sudah didukung oleh hampir semua program gambar karena format gambar ini juga didukung oleh browser Firefox dan Opera.

SVG mendukung beberapa tambahan penting, antara lain:

* anti-aliased rendering,
* pattern dan gradient fills,
* sophisticated filter-effects,
* clipping to arbitrary paths,
* text dan animations.

Yang membedakan antara SVG dan Flash adalah bahwa SVG merupakan rekomendasi dari W3C dan berbasis XML. Sedangkan flash merupakan format yang tertutup.


Native SVG dan Plugin SVG

Ada 2 cara sebuah browser mendukung SVG, yaitu:

1. Native SVG
2. Plugin SVG

Native SVG artinya browser secara langsung sudah mendukung format SVG. Sedangkan untuk browser yang tidak mendukung SVG dapat dilakukan dengan memasang Plugin (atau disebut juga Extension/Add-Ons). Salah satu Plugin yang terkenal adalah Adobe Viewer (http://www.adobe.com/svg/).

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:



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

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

Tampilan hasil darifile SVG diatas adalah berikut ini:

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

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 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 menutup elemen SVG dan dokumen.

Sumber :
http://degraphic.blogspot.com/2007_09_02_archive.html
http://www.ilmu-komputer.net/internet/pengantar-svg/