HTML5 Inline SVG adalah singkatan dari Scalable Vector Graphics, yang digunakan untuk mendefinisikan vektor berbasis grafis untuk Web. Adapun grafik yang didefinisikan berformat XML. SVG grafis tidak kehilangan kualitas apabila diperbesar atau diubah bentuknya. Hebatnya lagi, setiap elemen maupun atribut dari SVG grafis bias dijadikan animasi.
Keuntungan dari SVG dari format grafik lain (JPEG, Gif) adalah :
1. Gambar SVG dapat dibuat dan diedit dengan berbagai macam editor teks.
2. Gambar SVG dapat dicari, diindeks, scripted, dan dikompresi
3. Gambar SVG terukur.
4. Gambar SVG dapat dicetak dengan kualitas tinggi dengan resolusi apapun
5. Zoomable atau dapat diperbesar tanpa degradasi
Browser yang support VG adalah Internet Explorer 9, Firefox, Opera, Chrome dan Safari. Pada HTML5 ini kita dapat mengembed langsung kedalam page html :
Perhatikan contoh dibawah ini :
<!DOCTYPE html>
<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ height=”190″>
<polygon points=”100,10 40,180 190,60 10,60 160,180″
style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>
</body>
</html>
Nah, apa bedanya dengan html5 canvas yang juga digunakan untuk grafik didalam browser? Okey, untuk melihat perbedaan canvas dengan SVG perhatikan perbandingan berikut ini
SVG :
SVG adalah bahasa untuk mendeskripsikan grafis 2D dalam XML.
SVG berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk suatu elemen.
Dalam SVG, setiap bentuk digambar sebagai obyek. Jika atribut dari sebuah objek SVG berubah, browser secara otomatis dapat kembali membuat bentuk.
kanvas
Canvas :
Kanvas menarik grafis 2D, dengan cepat (dengan JavaScript).
Kanvas diterjemahkan pixel demi pixel.
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.
Di kanvas, setelah grafis ditarik, akan dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan harus digambar ulang, termasuk benda yang mungkin telah tercakup dalam grafis.
0 comments:
Post a Comment