MENGGAMBAR DENGAN SVG DI HTML

Kita bisa membuat gambar SVG di sebuah halaman HTML dengan tag <svg>. Kita bisa membuat path, berbagai bentuk, bahkan text dengan svg.

Kita belum akan mempelajari SVG terlalu jauh. Berikut hanya contoh-contoh bagaimana menggambar elemen dengan SVG.

Cara menggambar dengan elemen SVG

• Elemen svg dibuka dan ditutup dengan tag svg.
• Lebar dan tinggi ditentukan di atribut svg dengan atribut width dan height.
• Di dalam tag SVG, bisa ada banyak elemen sesuai dengan yang ingin digambarkan.

Menggambar kotak dengan SVG

<svg width="200" height="200">
  <rect width="200" height="200" style="fill:white;stroke-width:10;stroke:blue" />
</svg>

Penjelasan:

• Membuat svg dengan lebar dan tinggi 200px
• Dengan tag rect untuk membuat kotak yang punya lebar yang sama.
• Di atribut style, berisi hiasan warna (fill), warna border (stroke) dan lebarnya.

Menggambar lingkaran dengan SVG

<svg width="200" height="200">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="orange" />
</svg>

Penjelasan Baru:

• Tag circle untuk membuat lingkaran
• Atribut r pada circle untuk menentukan radius
• Posisi koordinat mulai menggambar, ditentukan dengan cx dan cy