Apa SVG?
- SVG adalah singkatan dari Scalable Vector Graphics
- SVG digunakan untuk mendefinisikan grafis untuk Web
- SVG adalah rekomendasi W3C
Scalable Vector Graphics (SVG) adalah vektor format gambar berbasis XML untuk grafis dua dimensi dengan dukungan untuk interaktivitas dan animasi. Spesifikasi SVG adalah standar terbuka yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999.
gambar SVG dan perilaku mereka didefinisikan dalam file teks XML. Ini berarti bahwa mereka dapat dicari, diindeks, scripted, dan dikompresi. Sebagai file XML, gambar SVG dapat dibuat dan diedit dengan editor teks, serta dengan perangkat lunak menggambar.
Semua utama web modern browser-termasuk Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, dan Microsoft Ujung-memiliki SVG render dukungan.
HTML <svg> Elemen
HTML <svg> unsur (introduced in HTML5) merupakan wadah untuk grafis SVG.
SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh <svg> elemen.
| Elemen | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Lingkaran
Contoh
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Cobalah sendiri " SVG Rectangle
rgb (0,0,0) ">
Contoh
<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
Maaf, browser Anda tidak mendukung SVG inline.
Contoh
<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
Maaf, browser Anda tidak mendukung SVG inline.
Contoh
<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 Maaf, browser Anda tidak mendukung SVG inline.
Contoh
<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.
Canvas menarik grafis 2D, on the fly (with a JavaScript) .
SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk elemen.
Dalam SVG, setiap bentuk ditarik dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.
Kanvas diberikan pixel dengan pixel. Di kanvas, sekali grafis ditarik, itu dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda yang mungkin telah ditutupi oleh grafis.
Perbandingan Canvas dan SVG
Tabel di bawah menunjukkan beberapa perbedaan penting antara kanvas dan SVG:
| Canvas | SVG |
|---|---|
|
|
Untuk mempelajari lebih lanjut tentang SVG, silakan baca SVG Tutorial .