Docs/HTML/SVG

HTML SVG

SVG (Scalable Vector Graphics) adalah format gambar berbasis XML yang bisa di-scale tanpa kehilangan kualitas.

Kelebihan SVG

  • Tidak pecah saat dizoom (vector-based)
  • Bisa di-style dengan CSS
  • Bisa di-animasi
  • Bisa di-manipulasi dengan JavaScript
  • Ukuran file kecil untuk shapes sederhana

Elemen SVG Dasar

  • <rect> — persegi/persegi panjang
  • <circle> — lingkaran
  • <ellipse> — elips
  • <line> — garis
  • <polygon> — poligon
  • <text> — teks
  • <path> — path kustom
index.html
Try It →
<h3>SVG Shapes</h3>
<svg width="350" height="200">
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="50" rx="8" fill="#F06D5B"/>
  
  <!-- Circle -->
  <circle cx="160" cy="35" r="25" fill="#6DD5C4"/>
  
  <!-- Ellipse -->
  <ellipse cx="260" cy="35" rx="40" ry="25" fill="#7EB8F0"/>
  
  <!-- Line -->
  <line x1="10" y1="90" x2="340" y2="90" stroke="#E2E8F0" stroke-width="2"/>
  
  <!-- Polygon (Star) -->
  <polygon points="175,100 185,130 215,130 190,148 200,178 175,160 150,178 160,148 135,130 165,130" fill="#F5C87A"/>
  
  <!-- Text -->
  <text x="175" y="198" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#64748B">SVG Shapes Demo</text>
</svg>
← Previous
Canvas
Next →
Favicon