HTML5 SVG - Tutorial HTML5

Apa Itu SVG

SVG merupakan singkatan dari Scalable Vector Graphics yang digunakan untuk menggambar grafis berbasis vektor untuk web dalam format XML. SVG berguna untuk membuat gambar vektor diagram seperti grafik pie, grafik dua dimensi dalam koordinat X , Y dan lainnya.

Keuntungan SVG

Beberapa keuntungan SVG ialah :

Gambar SVG dapat dibuat dan diedit dengan editor teks apapun
Gambar SVG dapat dicari, diindeks, ditulis dan dikompresi
Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi apapun
Gambar SVG dapat di zoom (diperpesar) tanpa degradasi (kehilangan kualitas gambar)

Dukungan Browser

Web Browser seperti Internet Explorer 9+, Firefox, Opera, Chrome, dan Safari telah mendukung penggunaan SVG.

Embed SVG ke dalam dokumen HTML

Anda dapat meng-embed elemen SVG ke dalam halaman HTML. Sebagai contoh, perintah dibawah akan menampilkan gambar lingkaran.

Contoh


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Coba »

Untuk mempelajari lebih lanjut tentang SVG, silahkan baca Tutorial SVG.

Perbedaan Antara SVG dan Canvas

SVG ialah bahasa untuk menggambar grafis 2D (dua dimensi) dengan XML. Sedangkan canvas untuk menggambar grafis 2D dengan Javascript. Tabel dibawah akan menjelaskan perbedaan mencolok anatar Canvas dan SVG :

Canvas	SVG
Resolusi dependen (tergantung pada komponen tertentu) Tidak mendukung event handler Javascript Kemampuan rendering teks yang rendah Anda dapat menyimpan gambar yang dihasilkan sebagai format PNG atau JPG Cocok digunakan untuk pengembagan grafik games	Resolusi independen (berdiri sendiri/tidak bergantung pada komponen lain) Mendukung even handler Javascript Sangat cocok untuk aplikasi dengan area render yang besar (seperti Google Maps) Jika aplikasi yang dibuat kompleks, proses render akan lambat Tidak cocok untuk pengembangan aplikasi games