Di HTML5, Anda dapat menanamkan elemen SVG langsung ke halaman HTML Anda.
Embed SVG Langsung Ke HTML Pages
Berikut adalah contoh dari SVG grafis sederhana:
<!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>
Penjelasan SVG Kode :
- Sebuah gambar SVG dimulai dengan <svg> elemen
- width dan height atribut dari <svg> elemen menentukan lebar dan tinggi gambar SVG
- <circle> elemen digunakan untuk menggambar sebuah lingkaran
- Atribut cx dan cy menentukan koordinat x dan y dari pusat lingkaran. Jika cx dan cy dihilangkan, pusat lingkaran diatur ke (0, 0)
- R atribut mendefinisikan jari-jari lingkaran
- Atribut stroke dan stroke-width mengontrol bagaimana garis bentuk muncul. Kami menetapkan garis lingkaran ke 4px hijau "border"
- Mengisi atribut mengacu pada warna dalam lingkaran. Kami mengatur warna fill kuning
- Tag </ svg> tag menutup gambar SVG
Catatan: Karena SVG ditulis dalam XML, semua elemen harus ditutup dengan benar!
0 komentar:
Posting Komentar