Apa itu SVG?

• SVG merupakan singkatan dari Scalable Vector Graphics
• SVG digunakan untuk mendefinisikan grafik berbasis vektor untuk Web
• SVG mendefinisikan grafik dalam format XML
• Setiap elemen dan atribut dalam file SVG dapat dianimasikan
• SVG merupakan rekomendasi W3C
• SVG terintegrasi dengan standar lain, seperti CSS, DOM, XSL dan JavaScript

---

Atribut SVG Umum

• fill berguna untuk menentukan warna dari element, bisa dengan hex-code/nama-warna atau “none” jika ingin warna transparant.
• width untuk lebar element.
• height untuk tinggi element.
• stroke untuk warna border element.
• strokeWidth untuk lebar border element.

Atribut SVG Circle

• cx adalah posisi awal x element dari viewbox.
• cy adalah posisi awal y element dari viewbox.
• r adalah radius dari element.

Atribut SVG Rect

• x adalah posisi awal x element dari viewbox.
• y adalah posisi awal y element dari viewbox.
• r adalah radius dari element.
• rx adalah radius dari sudut kiri atas.
• ry adalah radius dari sudut kanan bawah.

Atribut SVG Polygon

• points adalah kumpulan koordinat x,y yang membentuk polygon, ditulis dalam format “x1,y1 x2,y2 x3,y3” dst.

---

ViewBox

viewBox=“0 0 300 100” digunakan untuk mengatur skala dan area tampilan konten di dalam SVG.
Angka pertama (0) dan kedua (0) menunjukkan titik awal koordinat x dan y — yaitu pojok kiri atas dari area yang ingin ditampilkan.
Angka ketiga (300) adalah lebar virtual area tersebut, dan angka keempat (100) adalah tingginya.
Jadi, meskipun SVG ditampilkan dengan ukuran misalnya width=“200” dan height=“200”, browser akan menyesuaikan (menskalakan) area virtual 300x100 agar muat di dalam ukuran 200x200 piksel.
Intinya, viewBox=“0 0 300 100” berarti kita “melihat” bagian dari koordinat (0,0) sampai (300,100), dan bagian ini akan dipadatkan atau direntangkan supaya pas ke ukuran visual SVG yang ditentukan.

contoh viewbox dengan x,y minus:

dibawah ini adalah contoh penerapan dengan lebar viewBox 300. dimana setiap element circle memiliki radius 25.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 300 100"
  style="background-color: rgb(254 226 226)"
>
  <circle cx="25" cy="50" r="25" fill="yellow"></circle>
  <circle cx="75" cy="50" r="25" fill="yellow"></circle>
  <circle cx="125" cy="50" r="25" fill="yellow"></circle>
  <circle cx="175" cy="50" r="25" fill="yellow"></circle>
  <circle cx="225" cy="50" r="25" fill="yellow"></circle>
  <circle cx="275" cy="50" r="25" fill="yellow"></circle>
</svg>

hasilnya:

Contoh 1 bermain dengan circle dan rect

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 0 100 100"
  style="background-color: rgb(254 226 226)"
>
  <circle cx="50" cy="60" r="25" fill="#D1495B"></circle>
  <rect x="40" y="28" width="20" height="10" fill="#F79257"></rect>
  <circle cx="50" cy="25" r="5" fill="none" stroke="#F79257" strokeWidth="2"></circle>
</svg>

hasilnya:

Contoh 2 bermain dengan polygon dan rect

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="200"
  height="200"
  viewBox="0 -150 200 200"
  style="background-color:rgb(171, 229, 250);"
>
  <polygon points="20,-30 50,30 150,30 180,-30" fill="green"></polygon>
  <polygon points="50,-90 50,-50 90,-50 90,-90" fill="orange"></polygon>
  <rect x="90" y="-90" height="60" width="10" fill="brown"></rect>
</svg>

hasilnya:

penjelasan svg polygon:

cara memahami penggunaan svg polygon:

1. Titik pertama adalah (50, -90), artinya koordinat x = 50 dan y = -90.

2. Dari (50, -90) ke (50, -50):

   • Nilai x tetap 50, jadi tidak ada pergerakan horizontal.
   • Nilai y berubah dari -90 ke -50, artinya garis bergerak vertikal ke bawah.

3. Dari (50, -50) ke (90, -50):

   • Nilai y tetap -50, jadi tidak ada pergerakan vertikal.
   • Nilai x berubah dari 50 ke 90, artinya garis bergerak horizontal ke kanan.

4. Dari (90, -50) ke (90, -90):

   • Nilai x tetap 90, jadi tidak ada pergerakan horizontal.
   • Nilai y berubah dari -50 ke -90, artinya garis bergerak vertikal ke atas.

5. Dari (90, -90) ke (50, -90):

   • Nilai y tetap -90, jadi tidak ada pergerakan vertikal.
   • Nilai x berubah dari 90 ke 50, artinya garis bergerak horizontal ke kiri.