Apa itu SVG?
- SVG adalah singkatan dari Scalable Vector Graphics
- SVG digunakan untuk mendefinisikan grafis untuk Web
- SVG adalah rekomendasi W3C
HTML <svg> Elemen
HTML <svg> elemen (diperkenalkan di HTML5) merupakan wadah untuk grafis SVG.
SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
SVG Lingkaran
<!doctype html>
<html>
<head>
<title>HTML5 SVG</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg>
</body>
</html>
SVG Rectangle
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0,5"/>
</svg>
SVG Bintang
<svg width="300" height="200">
<polygon points="100,10 40,198 190, 78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG Logo
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Perbedaan Antara SVG dan Canvas
SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.
Kanvas menarik grafis 2D, on the fly (dengan JavaScript).
SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk elemen.
Di SVG, setiap bentuk digambar dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.
Kanvas diberikan pixel dengan pixel. Dalam kanvas, setelah grafik ditarik, telah dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda yang mungkin telah ditutupi oleh grafik.
Perbandingan Canvas dan SVG
Tabel di bawah ini menunjukkan beberapa perbedaan penting antara kanvas dan SVG:
| Canvas | SVG |
|---|---|
|
|
0 komentar:
Posting Komentar