contoh SVG
contoh SVG sederhana
Sebuah SVG sederhana contoh grafis:
Berikut adalah file SVG (disimpan dengan ekstensi SVG Berkas SVG):
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
analisis kode SVG:
Baris pertama berisi deklarasi XML. Perhatikan bahwa properti mandiri! Atribut ini menentukan apakah file SVG "berdiri sendiri", atau berisi referensi ke file eksternal.
standalone = "no" berarti bahwa dokumen SVG memiliki referensi ke file eksternal - dalam hal ini, DTD.
Baris kedua dan ketiga referensi eksternal SVG DTD. DTD terletak di "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". DTD terletak W3C, yang berisi semua elemen SVG yang diijinkan.
kode SVG <svg> elemen mulai, termasuk mengubah <svg> tag dan tag penutup </ svg>. Ini adalah elemen root. lebar dan tinggi atribut dapat mengatur lebar dan tinggi dokumen SVG ini. atribut versi mendefinisikan versi SVG yang digunakan, xmlns atribut mendefinisikan SVG namespace.
SVG <lingkaran> digunakan untuk membuat lingkaran. cx dan atribut cy menentukan pusat lingkaran x dan y koordinat. Jika Anda mengabaikan dua sifat ini, maka dot diatur ke (0, 0). atribut r mendefinisikan jari-jari lingkaran.
stroke dan atribut stroke width mengontrol bagaimana garis besar bentuk. Kami garis lingkaran diatur ke 2px lebar, batas hitam.
mengisi properti warna diatur dalam bentuk. Kami mengatur warna fill menjadi merah.
Menutup tag menutup akar elemen SVG dan dokumen itu sendiri.
Catatan: Semua tag membuka harus memiliki tag penutup!