SVG dalam HTML
Anda dapat menyematkan elemen SVG langsung ke halaman HTML Anda.
Sematkan SVG Langsung Ke Halaman HTML
Berikut adalah contoh grafik SVG sederhana:
dan ini kode HTMLnya :
Contoh
<!DOCTYPE html>
<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>
Penjelasan Kode SVG:
- Gambar SVG dimulai dengan elemen <svg>
- Atribut lebar dan tinggi dari elemen <svg> menentukan lebar dan tinggi gambar SVG
- Elemen <circle> digunakan untuk menggambar lingkaran
- Atribut cx dan cy mendefinisikan koordinat x dan y dari pusat lingkaran. Jika cx dan cy tidak disetel, pusat lingkaran diset ke (0, 0)
- Atribut r mendefinisikan jari-jari lingkaran
- Atribut stroke dan stroke-width mengontrol bagaimana garis bentuk muncul. Kami mengatur garis luar lingkaran ke "perbatasan" hijau 4px
- Atribut fill mengacu pada warna di dalam lingkaran. Kami mengatur warna isian menjadi kuning
- Tag penutup </svg> menutup gambar SVG
Catatan: Karena SVG ditulis dalam XML, semua elemen harus ditutup dengan benar!