Tutorial SVG
SVG adalah singkatan dari Scalable Vector Graphics.
SVG mendefinisikan grafik berbasis vektor dalam format XML.
Contoh di Setiap Bab
Dengan editor "Coba Sendiri" kami, Anda dapat mengedit SVG, dan mengklik tombol untuk melihat hasilnya.
Contoh SVG
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Apa Yang Harus Anda Ketahui
Sebelum melanjutkan, Anda harus memiliki pemahaman dasar tentang hal-hal berikut:
- HTML
- XML dasar
Jika Anda ingin mempelajari mata pelajaran ini terlebih dahulu, temukan tutorialnya di halaman Beranda kami .
Apa itu SVG?
- SVG adalah singkatan dari Scalable Vector Graphics
- SVG digunakan untuk mendefinisikan grafik berbasis vektor untuk Web
- SVG mendefinisikan grafik dalam format XML
- Setiap elemen dan setiap atribut dalam file SVG dapat dianimasikan
- SVG adalah rekomendasi W3C
- SVG terintegrasi dengan standar W3C lainnya seperti DOM dan XSL
SVG adalah Rekomendasi W3C
SVG 1.0 menjadi Rekomendasi W3C pada 4 September 2001.
SVG 1.1 menjadi Rekomendasi W3C pada 14 Januari 2003.
SVG 1.1 (Edisi Kedua) menjadi Rekomendasi W3C pada 16 Agustus 2011.
Keuntungan SVG
Keuntungan menggunakan SVG dibandingkan format gambar lain (seperti JPEG dan GIF) adalah:
- Gambar SVG dapat dibuat dan diedit dengan editor teks apa pun
- Gambar SVG dapat dicari, diindeks, dibuat skrip, dan dikompresi
- Gambar SVG dapat diskalakan
- Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi apa pun
- Gambar SVG dapat diperbesar
- Grafik SVG TIDAK kehilangan kualitas apa pun jika diperbesar atau diubah ukurannya
- SVG adalah standar terbuka
- File SVG adalah XML murni
Membuat Gambar SVG
Gambar SVG dapat dibuat dengan editor teks apa pun, tetapi seringkali lebih mudah untuk membuat gambar SVG dengan program menggambar, seperti Inkscape .