Contoh SVG Satu

SVG ditulis dengan XML.

Contoh SVG

Contoh di bawah adalah contoh file SVG yang ringkas. File SVG mesti 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 pelayar yang menyokong SVG)

(Untuk melihat kod sumber SVG, buka contoh ini, kemudian klik kanan di dalam tetingkap. Pilih 'Lihat Kod Sumber'.)

penerangan kod:

baris pertama mengandungi deklarasi XML. Perhatikan atribut standalone! Atribut ini menentukan sama ada SVG file ini adalah 'bebas' atau mengandungi rujukan kepada fail luaran.

standalone="no" bermakna SVG dokumen akan merujuk kepada fail luaran - di sini, adalah fail DTD.

Baris kedua dan ketiga mengutip DTD SVG luaran. DTD ini terletak di 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'. DTD ini terletak di W3C, mengandungi semua elemen SVG yang dibenarkan.

Kod SVG bermula dengan elemen <svg>, termasuk tag buka <svg> dan tag tutup </svg>. Ini adalah elemen root. Properti width dan height boleh menetapkan lebar dan tinggi dokumen SVG. Properti version boleh menentukan versi SVG yang digunakan, dan properti xmlns boleh menentukan ruang nama SVG.

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

Properti stroke dan stroke-width mengawal bagaimana bentuk noda akan dipaparkan. Kita tetapkan pinggir bulatan 2px lebar, pinggir hitam.

Guna properti fill untuk menetapkan warna di dalam bentuk. Kita tetapkan warna pengisi warna merah.

Tugasan tag tutup adalah menutup elemen SVG dan dokumen sendiri.

Keterangan:Semua tag buka mesti ada tag tutup!