SVG (Scalable Vector Graphics)

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.
Definisi :

1.      SVG digunakan untuk membuat grafik dengan mendefinisikan vector,yang akan digunakan dalam halaman web.

2.      SVG mendefinisikan dalam format XML

3.      SVG menghasilkan grafik yang tidak akan berkurang kualitasnya sebagai akibat proses zoomming maupun resizing.

4.      Elemen dan attribut dalam SVG dapat dianimaai

5.      SVG direkomendasikan oleh World Wide Web Consortium (W3C)

6.      SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL

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>

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.

Sumber : http://ilmu-komputer.net/pengantar-svg/