SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML (eXtensible Markup Language). Selain SVG, ada juga MathML (Mathematic Markup Language) - berbasis XML- untuk menampilkan rumus-rumus matematika dan juga CML (Chemical Markup Language) untuk kimia.
Fungsi SVG
SVG berfungsi untuk menampilkan grafik 2 dimensional dalam kode XML.
Pada dasarnya, SVG dapat digunakan untuk membuat tiga jenis objek grafik, yaitu :
1. path (terdiri dari garis lurus dan kurva),
2. gambar,
3. teks.
SVG dapat mengkreasikan sebuah grafik yang terdiri dari banyak vektor yang berbeda-beda. Sebuah vektor pada dasarnya adalah garis yang menghubungkan dua titik.
Kelebihan dan Kekurangannya
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, JPEG dan PNG). Sehingga memungkinkan pengembang web dan juga designer untuk membuat grafik dengan mutu tinggi.
Tools Pendukung
Bekerja sama dengan W3C, dan juga perusahaan-perusahaan terdepan di bidang software, ADOBE menjadi pendukung utama pengembangan SVG. Setelah SVG-Viewer, perusahaan ini membuat tools yang menggenerasikan gambar langsung ke kode SVG, yaitu ADOBE Illustrator, selain itu ada juga ADOBE GoLive untuk mengedit kode SVG. Sementara itu, COREL juga memproduksi software pendukung SVG.
“Hello World” Versi SVG
Dengan menggunakan notepad, file SVG sudah bisa dibuat. “Hello World” dalam SVG memiliki kode seperti di bawah ini :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD svg 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303 stylable.dtd">
<svg width="100px" height="50px">
<text style="fill:red" x ="10" y="20">Hello World !</text>
</svg>
Selanjutnya kita akan mempelajari kode SVG ini.
Baris pertama menjelaskan versi XML yang digunakan. Tag kedua <DOCTYPE> menyediakan referensi untuk DTD (Document Type Definition). DTD ini mendefinisikan semua tag XML yang akan digunakan untuk membuat file SVG, seperti atribut tag, element, dan memspesifikasikan bentuk dokumen dan struktur yang berlaku. Baris ketiga masih termasuk dalam tag <DOCTYPE> , menginformasikan alamat http (HyperText Transfer Protocol), akan tetapi alamat dituju ke SVG-Viewer.
DTD yang akan digunakan sangat tergantung pada SVG-Viewer. Sebagai contoh, untuk SVG-Viewer 1.0, tag <DOCTYPE> akan berkode :
<!DOCTYPE svg PUBLIC "-//W3C/DTD svg 20000303 Stylable/EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
Sementara untuk versi 2.0 :
<!DOCTYPE svg PUBLIC "-//W3C/DTD svg 20001102 Stylable/EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
4 Kuliah Umum IlmuKomputer.Com Copyright © 2003 IlmuKomputer.Com
Dan tentu saja untuk versi terbaru SVG-Viewer ada tag <DOCTYPE> lainnya.
Isi tag ini adalah tanggal dan status dari standar SVG yang digunakan. Seperti 20000303 berarti DTD ini mempunyai dokumen tanggal 03.03.2000.
Selanjutnya tag <svg>, di sini kita sudah bisa mendefinisikan atribut yang diinginkan. Di contoh, kita mendefinisikan ukuran SVG, yaitu width="100px" height="50px", berarti lebarnya 100 pixel dan tingginya 50 pixel. Selain satuan pixel, bisa juga digunakan ukuran cm (centimeter), mm (milimeter), bahkan in (inchi) sebagai satuan absolut.
Kemudian tag <text>, tag ini memiliki atribut style yang kita definisikan "fill:red". Dengan menggunakan atribut ini kita ingin agar tulisan yang ditampilkan berisi (fill) warna merah. Selain itu ada koordinat x="10" y="20", atribut ini menginformasikan di mana akan dimulai teks tersebut ditampilkan.
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>, yang diluarnya dapat ditulis sesuatu, akan ditutup dengan tag pasangannya </text>. Sementara itu untuk tag yang diluarnya tidak dapat ditulis apa-apa akan ditutup dengan </>, seperti <rect.../>.
- Komentar memiliki kode yang sama seperti HTML <!-- dan -->.
- Untuk memposisikan sebuah elemen digunakan atribut x dan y, bukan top atau left seperti HTML.
- Semua atribut dimulai dan diakhiri dengan tanda kutip " ... ".
Tags SVG
Tag SVG dibedakan menjadi 4 macam :
1. Element grafik (graphics elements) :
<path> <text> <rect>
<circle> <ellipse> <line>
<polyline> <polygon> <image>
<use>
2. Element container (container elements) :
<svg> <g> <defs>
<symbol> <clipPath> <mask>
<pattern> <marker> <a>
<switch>
3. Element referensi untuk grafik (graphics referencing elements):
<use> <image>
5 Kuliah Umum IlmuKomputer.Com Copyright © 2003 IlmuKomputer.Com
4. Element untuk mendesign teks (text content elements):
<text> <tspan> <texPath>
<tref> <altGlyph>
Sedangkan contoh tags yang penting :
<text> : Mendefinisikan sebuah teks,
<rect> : Mendefinisikan sebuah persegi,
<path> : Mendefinisikan sebuah path,
<filter> : Mendefinisikan filter atau bahkan kombinasinya.
<g> : Membuat sebuah grup yang terdiri dari elemen-elemen.
<a> : Mendefinisikan sebuah hyperlink,
<line> : Mendefinisikan sebuah garis
6 Kuliah Umum IlmuKomputer.Com Copyright © 2003 IlmuKomputer.Com
Tags untuk Shapes
Tags yang tersedia untuk menggambar sebagai berikut :
1. <rect> : untuk persegi empat (rectangle),
2. <circle> : untuk lingkaran,
3. <ellipse> : untuk elips,
4. <line> : untuk garis,
5. <polyline> : untuk garis banyak,
6. <polygone> : untuk poligon.
Sebenarnya, untuk SVG-Viewer teraktual (versi 3.0) sudah didefinisikan lagi berbagai macam tags yang lainnya, seperti untuk spiral, bintang, segilima (pentagon), dsb.
Segiempat (rectangle)
Dengan menggunakan tag <rect> kita akan memulai menggambar SVG.
Contoh kode :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="600">
<title>Segiempat</title>
<g id="contoh_rect" stroke="black" stroke-width="1pt">
<!-- Segiempat berwarna kuning -->
<rect x="1cm" y="1cm" width="4cm" height="6cm" fill="yellow" />
<!-- Segiempat berwarna biru -->
<rect x="1cm" y="1cm" width="3cm" height="3cm" rx=".5cm" ry=".5cm" fill="blue" />
</g>
</svg>
Simpan file tersebut dengan format .svg. Sekedar informasi, ada juga file SVG dengan tipe .svgz, ini hanyalah format SVG yang dikompres.
Tampilannya :
Lingkaran
Untuk lingkaran kita menggunakan tag <circle>.
Contoh kode :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="600">
<title>Lingkaran</title>
<g id="contoh_circle">
<!-- Lingkaran berwarna kuning -->
<circle cx="100" cy="100" r="60" fill="yellow" />
<!-- Lingkaran berwarna merah -->
<circle cx="100" cy="100" r="30" fill="red" />
</g>
</svg>
Penjelasan untuk masing-masing atribut :
- cx dan cy : untuk mendefinisikan koordinat titik pusat lingkaran.
- r : untuk mendefinisikan jari-jari (radius) lingkaran.
Elips
Elips adalah lingkaran yang memiliki 2 jari-jari yang berbeda, untuk itu dibutuhkan tag baru yang memiliki atribut tambahan.
Contoh kode :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="600">
<title>Elips</title>
<g id="contoh_ellipse">
<!-- Elips berwarna merah -->
<ellipse cx="100" cy="100" rx="50" ry="25" fill="red" />
<!-- Elips berwarna biru -->
<ellipse cx="100" cy="100" rx="25" ry="50" fill="blue" fill-opacity=".3" />
</g>
</svg>
Penjelasan untuk masing-masing atribut :
- rx dan ry : untuk mendefinisikan radius horizontal (sumbu x) dan radius vertikal (sumbu y) elips.
- opacity : untuk mendefinisikan tingkat transparan sebuah objek (nilainya dari 0.0 sampai 1.0).
Poligon
Contoh kode :
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="600">
<title>Poligon</title>
<g id="contoh_polygon">
<!-- Poligon berwarna kuning dengan pinggiran berwarna hitam -->
<polygon stroke="black" fill="yellow"
points="150, 50 169,105 221, 78
195,131 250,150 195,169
221,221 169,195 150,250
131,195 79,221 105,169
50,150 105,131 79, 79
131,105" />
</g>
</svg>
Penjelasan untuk masing-masing atribut :
- stroke : untuk mendefinisikan warna garis pinggir poligon.
- points : untuk mendefinisikan koordinat titik-titik untuk ditarik sebuah garis diantaranya.
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>
sumber:
http://ilmu-komputer.net/pengantar-svg/
http://lp2mk.unsada.ac.id/files/genap2011_adam.pdf
Tidak ada komentar:
Posting Komentar