Scalable Vector Graphics (SVG)

TINJAUAN PUSTAKA

E. Scalable Vector Graphics (SVG)

SVG (World Wide Web Consortium (1) 2006) adalah sebuah bahasa pemrograman berbasis XML untuk mendefinisikan grafis dua dimensi yang kemudian digunakan dalam sebuah halaman Web dan aplikasi-aplikasi lain yang menggunakan XML. SVG memungkinkan pembuatan tiga tipe objek grafis:

1. path (berupa garis dan kurva),

2. gambar, dan

3. teks.

Objek-objek grafis tersebut kemudian dapat dikelompokkan, dimodifikasi, ditransformasi dan digabungkan dengan objek-objek yang telah di bentuk sebelumnya (World Wide Web Consortium (1) 2006). SVG dapat mengkreasikan sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Sebuah vektor pada dasarnya adalah garis yang menghubungkan dua titik.

i j

Gambar 3 Vektor vr yang menghubungkan titik idan j

Kelebihan SVG yang paling utama adalah gambar tidak akan kehilangan

kualitasnya apabila diperbesar atau diperkecil (scalable), karena dibuat

berdasarkan metode vektor (vector) bukan pixel (seperti format grafik pada

umumnya, GIF, JPG dan PNG). Sehingga memungkinkan pengembang Web dan

Gambar 4 Kualitas yang hilang pada file dengan format JPG apabila dilakukan perbesaran (zooming in)

Gambar 5 Kualitas gambar file SVG sama sekali tidak berkurang saat di lakukan perbesaran (zooming in)

Karena SVG terbentuk dari kumpulan perintah-perintah (script) XML yang berbasis teks dan bukan binary code, SVG memiliki keunggulan dalam kecepatan proses download karena kecilnya kapasitas file. Selain itu script SVG dapat dibuat, diedit, dan dimanipulasi cukup dengan menggunakan program-program teks editor sederhana seperti notepad di Microsoft Windows. Bahkan, modifikasi terhadap tampilan juga dapat dilakukan saat aplikasi dijalankan. Hal ini sebenarnya karena script SVG yang dibuat telah memiliki beberapa script yang akan berjalan saat menerima perintah (trigger).

Sementara itu, kekurangan SVG terletak pada belum semua Internet browser dapat mengenali file SVG. Untuk itu harus diinstal terlebih dulu sebuah

plug-in agar sistem dapat mengenali file SVG. Plug-in ini sering disebut sebagai SVG-Viewer. SVG-Viewer teraktual dikembangkan oleh ADOBE yaitu Adobe SVG Viewer yang saat ini telah mencapai versi ke 3.03 (Adobe Systems, 2003).

Selain itu, SVG masih kurang mendukung aplikasi multimedia, salah satinya adalah tidak mampu untuk menampilkan suara (dalam format apapun) dan video. Namun SVG memiliki kemampuan untuk melakukan integrasi dengan aplikasi

lain yang dikenal dengan SMIL (Synchronized Multimedia Integration

Language).

Tabel 2 Performa beberapa SVG viewer (World Wide Web Consortium (4)

2006).

SVG Viewers Hasil

Proses ASV6 ASV3 BATIK CSV Amaya-

81 Mozilla SVG Pass 173 168 150 116 51 48 Fail 6 10 30 53 104 126 Partial 2 3 1 12 26 7 Unknown 0 0 0 0 0 0 Total 181 181 181 181 181 181 Keterangan

ASV6 : Adobe SVG Viewer, version 6 (beta)

ASV3 : Adobe SVG Viewer version 3

Batik : Apache Batik Squiggle browser (JAVA platform)

CSV : Corel SVG viewer, version 2

Amaya-81 : Amaya Editor/browser version 8.1

Mozilla SVG : Mozilla SVG project

Tabel 2 menunjukkan performa dari beberapa SVG-viewer yang

dikembangkan oleh beberapa vendor. Dari 181 file SVG yang di akses, masing- masing viewer menunjukkan banyaknya file yang berhasil dijalankan (Pass), yang gagal dijalankan (Fail) dan yang berhasil dijalankan tetapi tidak sesuai dengan bentuk yang sebenarnya (partial).

Syntax SVG

Sebelum kita memulai ‘bermain’ dengan kode SVG, sangat penting sekali untuk mengetahui ‘aturan mainnya’ (syntax) terlebih dahulu.

- SVG sangat memperhatikan sistem penulisan. Semua tag, atribut dan nilai

atribut ditulis dengan huruf kecil

- Semua tag harus ditutup. Untuk tag, seperti <text> akan ditutup dengan tag

pasangannya </text>.

- Komentar memiliki kode yang sama seperti HTML yaitu diawali dengan <!--

dan diakhiri dengan -->

- Untuk memposisikan sebuah elemen digunakan atribut x dan y, bukan top atau

left seperti HTML

- Semua atribut dimulai dan diakhiri dengan tanda kutip " ... "

Contoh kode (Werld Wide Web Consortium(1) 2006)

<?XML version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg XMLns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover {fill-opacity:0.9;} </style> <g style="fill-opacity:0.7;">

<circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm"

transform="translate(0,50)" />

<circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm"

transform="translate(70,150)" />

</g> </svg>

Jika script di atas disimpan (save) dengan diberi nama file circle.svg kemudian dibuka pada jendela browser Microsoft Internet Explorer, akan diperoleh tampilan seperti Gambar 4.

Gambar 6 Tampilan dari scriptcircle.svg yang dibuka pada internet explorer

Saat ini SVG masih terus dalam pengembangan. Beberapa pihak yang telah menyatakan kesediaannya dalam mengembangkan format SVG datang dari

pimpinan industri teknologi informasi seperti Adobe Systems, AOL/Netscape,

Apple, Autodesk, Canon, Corel, CSIRO, Eastman Kodak, Excosoft, Hewlett Packard, IBM, ILOG, IntraNet Systems, Micromedia, Microsoft, OASIS, Opera, Oxford Brookes University, Quark, Sun Microsystems, dan Xerox serta beberapa pihak lain yang kemudian juga menyatakan dukungannya terhadap pengembangan SVG (Peng 2000).

Filter Effects Pada SVG

Filter Effects adalah kemampuan untuk melakukan serangkaian operasi grafis terhadap objek sumber yang akan menghasilkan bentuk-bentuk grafis yang

telah termodifikasi. Sejauh ini SVG telah mendukung enam belas jenis filter

seperti: Blend, ColorMatrix, ComponentTransfer, Composite, ConvolveMatrix,

DiffuseLighting, DisplacementMap, Flood, GaussianBlur, Image, Merge, Morphology, Offset, SpecularLighting, Tile, dan Turbulance (World Wide Web Consortium (1), 2006).

Interactivity pada SVG

Gambar-gambar yang dibuat dengan SVG dapat menjadi interaktif dan dinamis (World Wide Web Consortium (1), 2006). Sebagai contoh, menggerakkan

pointer mouse di atas sebuah elemen SVG, melakukan penekanan tombol pada

mouse (klik tunggal maupun klik ganda) terhadap elemen SVG, melakukan

penekanan tombol pada keyboard), akan menghasilkan sebuah umpan balik

(feedback). Animasi yang diinginkan juga dapat diatur untuk terjadi satu kali saja saat pertama kali sebuah elemen SVG ditampilkan ataupun dilakukan berulang

kali dengan menggunakan fasilitas penghitungan waktu (timer). Animasi dapat

dipicu baik secara deklaratif (dengan cara menggabungkan elemen-elemen animasi SVG dalam sebuah konten SVG) atau melalui pembuatan sebuah script.

Tabel 3 Beberapa event yang tesedia dalam SVG(World Wide Web Consortium

(1) 2006)

Nama Event Deskripsi Penulisan

Activate Dipicu saat sebuah elemen diaktifkan, sebagai

contoh, melalui penekanan tombol mouse atau

penekanan tombol pada keyboard.

Onactivate

Click Dipicu saat mouse ditekan saat berada di atas

sebuah elemen. Sebuah click didefinisikan

sebagai gabungan antara mousedown dan

mouseup pada lokasi yang sama secara bersamaan. Urutan dari event ini adalah:

mousedown, mouseup, click.

Onclick

Mousedown Dipicu saat mouse ditekan saat berada di atas sebuah elemen

onmousedown Mouseup Dipicu saat penekanan tombol mouse di lepas

saat berada diatas sebuah elemen

onmouseup Mouseover Dipicu saat penunjuk mouse dipindahkan tepat

diatas sebuah elemen

onmouseover Mousemove Dipicu saat penunjuk mouse digerakkan saat

masih berada tepat diatas sebuah elemen

onmousemove Mouseout Dipicu saat penunjuk mouse digerakkan

meninggalkan sebuah elemen

onmouseout beginEvent Dimulainya animasi dari sebuah elemen onbegin endEvent Dipicu saat animasi dari sebuah elemen

berakhir

onend repeatEvent Dipicu saat animasi dari sebuah elemen diulang onrepeat

Animasi Pada SVG

Dikarenakan Web adalah sebuah media yang dinamis, SVG sangat mendukung kemungkinan untuk melakukan perubahan vektor grafik setiap saat.

Elemen-elemen animasi SVG mulanya dikembangkan oleh W3C Synchronized

Multimedia (SYMM) Working Group bekerjasama dengan para pengembang dari

Synchronized Multimedia Integration Language (SMIL) 1.0 Specification (World Wide Web Consortium (6) 2006). Group pengembang SYMM, bekerjasama dengan group pengembang SVG, mengembangkan animasi yang dapat dilakukan

oleh SMIL yang kemudian dikenal dengan SMIL Animation (World Wide Web

Consortium (1) 2006), yang merepresentasikan tujuan utama dari sekumpulan fitur animasi pada XML.

SVG adalah bahasa pengantar untuk mengaktifkan SMIL Animation.

Terkecuali untuk aturan-aturan spesifik dari SVG yang disebutkan dalam spesifikasinya, definisi normatif dari elemen-elemen animasi dan atribut pada

SVG adalah menggunakan spesifikasi pada SMIL Animation (World Wide Web

Consortium (1) 2006).

Berikut beberapa elemen animasi yang dapat digunakan dalam SVG: 1. <animate> : untuk memulai penganimasian.

2. <animateMotion> : untuk animasi gerakan sepanjang sebuah path. 3. <animateColor> : untuk animasi perubahan warna.

4. <animateTransform> : untuk animasi sebuah transformasi.

5. <mpath> : untuk referensi sebuah path dari gerakan <animateMotion>.

Berikut ini contoh script SVG yang akan melakukan sebuah animasi sederhana:

<?XML version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN"

"http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300">

<desc>Contoh Animasi </desc>

<path d="M100,250 C 100,50 400,50 400,250"

fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" />

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

fill="yellow" stroke="red" stroke-width="7.06" >

<animateMotion dur="6s" repeatCount="indefinite"

path="M100,250 C 100,50 400,50 400,250" rotate="auto" /> </path>

</svg>

Jika script di atas dijalankan pada sebuah browser yang telah terpasang plugins

SVG Viewer, akan tampak hasil sebagai berikut :

a. b. c.

Gambar 7 Animasi pergerakan segitiga sepanjang jalur (a) pada detik ke nol, (b) pada detik ketiga, (c) pada detik keenam

Dalam dokumen Implementasi Scalable Vector Graphics (SVG) Terhadap Aplikasi e-Learning: Studi Kasus Universitas Terbuka (UT) (Halaman 37-45)