Dalam HTML5, Anda dapat menanamkan elemen SVG langsung ke halaman HTML Anda.
Embed SVG Langsung Ke Halaman HTML
Berikut adalah contoh dari SVG grafis sederhana:
dan di sini adalah kode HTML:
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> Cobalah sendiri " SVG Code explanation:
- Gambar SVG dimulai dengan <svg> elemen
- Lebar dan tinggi atribut dari <svg> elemen menentukan lebar dan tinggi dari gambar SVG
- The <circle> elemen digunakan untuk menggambar sebuah lingkaran
- The cx dan cy atribut menentukan koordinat x dan y dari pusat lingkaran. Jika cx dan cy dihilangkan, pusat lingkaran diatur ke (0, 0)
- The r atribut mendefinisikan jari-jari lingkaran
- Stroke dan stroke-width atribut mengontrol bagaimana garis bentuk muncul. Kami menetapkan garis lingkaran ke hijau "perbatasan" 4px
- The fill atribut mengacu pada warna dalam lingkaran. Kami mengatur warna fill untuk kuning
- Penutup </svg> tag menutup gambar SVG
Catatan: Sejak SVG ditulis dalam XML, semua elemen harus ditutup dengan benar!