Contoh SVG Satu

SVG ditulis menggunakan XML.

Contoh SVG

Contoh di bawah ini adalah contoh dokumen SVG sederhana. Berkas SVG harus disimpan dengan ekstensi .svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Lihat contoh (hanya untuk browser yang mendukung SVG)

(Untuk melihat kode asli SVG, buka contoh ini, lalu klik kanan di jendela. Pilih “Lihat Sumber Kode”.)

penjelasan kode:

baris pertama mengandung deklarasi XML. Perhatikan atribut standalone! Atribut ini menentukan apakah dokumen SVG adalah “bebas” atau mengandung referensi ke berkas eksternal.

standalone="no" berarti dokumen SVG akan merujuk ke berkas eksternal - disini, adalah berkas DTD.

Baris kedua dan ketiga mengutip DTD SVG eksternal. DTD ini berada di "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". DTD ini berada di W3C dan mengandung semua elemen SVG yang diizinkan.

Kode SVG dimulai dengan elemen <svg>, termasuk tag pembuka <svg> dan tag penutup </svg>. Ini adalah elemen root. Properti width dan height dapat menetapkan lebar dan tinggi dokumen SVG. Properti version dapat menentukan versi SVG yang digunakan, dan properti xmlns dapat menentukan ruang nama SVG.

SVG <circle> digunakan untuk membuat lingkaran. Properti cx dan cy menentukan koordinat x dan y pusat lingkaran. Jika kedua properti ini diabaikan, titik pusat lingkaran akan diatur menjadi (0, 0). Properti r menentukan jari-jari lingkaran.

Properti stroke dan stroke-width mengontrol bagaimana kontur bentuk ditampilkan. Kita mengatur kontur lingkaran menjadi 2px lebar, dengan garis pinggir hitam.

Properti fill menetapkan warna di dalam bentuk. Kita mengatur warna pengisian menjadi merah.

Fungsi tag penutup adalah untuk menutup elemen SVG dan dokumen itu sendiri.

Keterangan:Semua tag yang dibuka harus memiliki tag penutup!