SVG DOCS

SVG-INTRODUCTION

<svg> root element
Description: Elemen root untuk semua konten SVG. Mendefinisikan viewport dan namespace.
Example: 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">...</svg>
Output: Area gambar 100x100 unit
viewBox
Description: Sistem koordinat internal SVG (min-x min-y width height). Tidak bergantung pada piksel.
Example: 
viewBox="0 0 200 150"
Output: Canvas 200x150, origin (0,0)
width / height
Description: Lebar dan tinggi elemen SVG dalam CSS (piksel, persen, dll). Bisa berbeda dengan viewBox.
Example: 
width="400" height="300"
Output: Ukuran tampilan di halaman
xmlns
Description: Namespace XML untuk SVG. Wajib jika SVG digunakan di HTML5.
Example: 
xmlns="http://www.w3.org/2000/svg"
Output: Browser mengenali sebagai SVG

BASIC-SHAPES

<rect>
Description: Persegi panjang. Atribut: x, y, width, height, rx, ry.
Example: 
<rect x="10" y="10" width="80" height="60" rx="10" fill="blue" />
Output: Persegi panjang biru dengan sudut melengkung
<circle>
Description: Lingkaran. Atribut: cx, cy, r.
Example: 
<circle cx="50" cy="50" r="40" fill="red" />
Output: Lingkaran merah di tengah
<ellipse>
Description: Elips. Atribut: cx, cy, rx, ry.
Example: 
<ellipse cx="50" cy="30" rx="40" ry="20" fill="green" />
Output: Elips horizontal hijau
<line>
Description: Garis lurus. Atribut: x1, y1, x2, y2, stroke.
Example: 
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />
Output: Garis diagonal hitam
<polyline>
Description: Garis terhubung (buka). Atribut: points (daftar koordinat).
Example: 
<polyline points="10,10 50,60 90,10" fill="none" stroke="blue" />
Output: Segitiga terbuka
<polygon>
Description: Poligon tertutup. Atribut: points.
Example: 
<polygon points="50,5 95,90 5,90" fill="yellow" stroke="black" />
Output: Segitiga kuning penuh

PATH-COMMANDS

<path>
Description: Elemen paling fleksibel. Atribut d (data path) berisi perintah.
Example: 
<path d="M10 10 L50 60 L90 10 Z" fill="purple" />
Output: Segitiga ungu
M (moveto)
Description: Memindahkan pena ke koordinat (x, y) tanpa menggambar.
Example: 
M 20 20
Output: Mulai di (20,20)
L (lineto)
Description: Menggambar garis dari posisi saat ini ke koordinat (x, y).
Example: 
L 80 80
Output: Garis ke (80,80)
H / V (horizontal/vertical lineto)
Description: Garis horizontal (H) atau vertikal (V) dari posisi saat ini.
Example: 
H 100 (horizontal)
V 50 (vertical)
Output: Garis lurus sepanjang sumbu
C (cubic bezier)
Description: Kurva Bézier kubik. C (cx1, cy1, cx2, cy2, x, y).
Example: 
C 20 40, 80 40, 100 20
Output: Kurva dengan dua titik kontrol
S (smooth cubic bezier)
Description: Lanjutan C, titik kontrol pertama adalah refleksi dari sebelumnya.
Example: 
S 80 40, 100 20
Output: Kurva mulus
Q (quadratic bezier)
Description: Kurva Bézier kuadrat. Q (cx, cy, x, y).
Example: 
Q 50 0, 100 50
Output: Lengkungan sederhana
T (smooth quadratic bezier)
Description: Lanjutan Q, titik kontrol refleksi.
Example: 
T 100 100
Output: Lengkungan mulus lanjutan
A (elliptical arc)
Description: Busur elips. A (rx ry x-axis-rotation large-arc-flag sweep-flag x y).
Example: 
A 30 30 0 0 1 60 60
Output: Busur melengkung
Z (closepath)
Description: Menutup path kembali ke titik awal.
Example: 
Z
Output: Path tertutup

TEXT

<text>
Description: Menampilkan teks. Atribut: x, y, font-family, font-size, fill, text-anchor.
Example: 
<text x="10" y="40" font-family="Arial" font-size="20" fill="#333">Hello SVG</text>
Output: Teks 'Hello SVG' di posisi (10,40)
<tspan>
Description: Sub-elemen untuk memformat bagian dari <text> (warna, posisi, gaya berbeda).
Example: 
<text><tspan fill="red">Merah</tspan> dan <tspan font-weight="bold">tebal</tspan></text>
Output: Teks dengan dua gaya
<textPath>
Description: Menempatkan teks mengikuti jalur yang didefinisikan oleh elemen <path>.
Example: 
<defs><path id="myPath" d="M10,80 Q50,10 90,80" /></defs><text><textPath href="#myPath">Teks melengkung</textPath></text>
Output: Teks mengikuti lengkungan

GROUPING

<g>
Description: Mengelompokkan elemen SVG untuk menerapkan atribut/gaya/transformasi bersama.
Example: 
<g fill="blue" stroke="black" stroke-width="2"><circle cx="20" cy="20" r="10" /><rect x="40" y="10" width="20" height="20" /></g>
Output: Lingkaran dan kotak dengan gaya sama
<use>
Description: Menggandakan elemen yang sudah ada (di dalam <defs> atau di dokumen).
Example: 
<defs><circle id="myCircle" cx="10" cy="10" r="10" fill="red" /></defs><use href="#myCircle" x="20" y="0" />
Output: Lingkaran merah di dua tempat
<defs>
Description: Menyimpan elemen yang tidak ditampilkan secara langsung (template, gradien, filter).
Example: 
<defs><linearGradient id="grad">...</linearGradient></defs>
Output: Gradien disimpan
<symbol>
Description: Template yang dapat digunakan ulang dengan viewBox sendiri, diakses dengan <use>.
Example: 
<symbol id="icon" viewBox="0 0 24 24"><path d="..."/></symbol><use href="#icon" width="24" height="24"/>
Output: Ikon reusable

STYLING

fill
Description: Warna atau pola isi bentuk. Bisa menggunakan warna CSS, gradien, pola.
Example: 
fill="#ff0000" atau fill="url(#gradient)"
Output: Isi merah
stroke
Description: Warna garis tepi.
Example: 
stroke="black"
Output: Garis tepi hitam
stroke-width
Description: Ketebalan garis.
Example: 
stroke-width="2"
Output: Garis 2 unit
stroke-dasharray
Description: Membuat garis putus-putus. Format: panjang-isi, panjang-gap, ...
Example: 
stroke-dasharray="5,3"
Output: Garis putus-putus
opacity
Description: Transparansi elemen secara keseluruhan (0-1).
Example: 
opacity="0.5"
Output: 50% transparan
CSS via <style>
Description: Mendefinisikan gaya dengan CSS di dalam SVG.
Example: 
<style>.my-circle { fill: blue; }</style><circle class="my-circle" ... />
Output: Gaya dari class CSS
Inline style
Description: Atribut style="..." langsung pada elemen.
Example: 
style="fill: pink; stroke: purple;"
Output: Gaya langsung

TRANSFORMATIONS

transform
Description: Menerapkan transformasi geometri pada elemen atau grup.
Example: 
transform="translate(10, 20) rotate(45) scale(1.5)"
Output: Elemen bergeser, berputar, diperbesar
translate(x, y)
Description: Menggeser elemen.
Example: 
transform="translate(30, 10)"
Output: Bergeser 30px ke kanan, 10px ke bawah
rotate(angle, cx, cy)
Description: Memutar elemen sekitar titik tertentu (opsional).
Example: 
transform="rotate(45, 50, 50)"
Output: Berputar 45° di sekitar (50,50)
scale(sx, sy)
Description: Memperbesar/memperkecil elemen.
Example: 
transform="scale(2, 0.5)"
Output: Lebar dua kali lipat, tinggi setengah
skewX / skewY
Description: Miringkan elemen sepanjang sumbu X atau Y.
Example: 
transform="skewX(10)"
Output: Miring horizontal

GRADIENTS-PATTERNS

<linearGradient>
Description: Gradien warna sepanjang garis lurus. Arah dengan x1,y1,x2,y2.
Example: 
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="red"/><stop offset="100%" stop-color="blue"/></linearGradient>
Output: Gradien merah ke biru horizontal
<radialGradient>
Description: Gradien melingkar dari dalam ke luar.
Example: 
<radialGradient id="grad2"><stop offset="0%" stop-color="white"/><stop offset="100%" stop-color="black"/></radialGradient>
Output: Lingkaran putih ke hitam
<pattern>
Description: Mengisi bentuk dengan pola berulang (gambar atau bentuk).
Example: 
<pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="3" fill="#333"/></pattern>
Output: Pola titik-titik

FILTERS

<filter>
Description: Wadah untuk efek filter seperti blur, shadow, lighting.
Example: 
<filter id="blur"><feGaussianBlur stdDeviation="3" /></filter><circle filter="url(#blur)" ... />
Output: Lingkaran kabur
feGaussianBlur
Description: Efek blur Gaussian.
Example: 
stdDeviation="5"
Output: Blur radius 5
feDropShadow
Description: Bayangan jatuh (mirip CSS box-shadow).
Example: 
dx="2" dy="2" stdDeviation="3" flood-color="black" flood-opacity="0.5"
Output: Bayangan
feColorMatrix
Description: Memanipulasi warna piksel (misal, grayscale).
Example: 
type="matrix" values="0.33 0.33 0.33 0 0 ..."
Output: Efek warna kustom

ANIMATION

<animate>
Description: Animasi nilai atribut dari waktu ke waktu.
Example: 
<circle cx="10" cy="10" r="10" fill="green"><animate attributeName="cx" from="10" to="90" dur="2s" repeatCount="indefinite" /></circle>
Output: Lingkaran bergerak horizontal
<animateTransform>
Description: Animasi transformasi (translate, rotate, scale).
Example: 
<rect ...><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="5s" repeatCount="indefinite" /></rect>
Output: Kotak berputar
<animateMotion>
Description: Menggerakkan elemen sepanjang jalur.
Example: 
<animateMotion dur="3s" repeatCount="indefinite"><mpath href="#path"/></animateMotion>
Output: Elemen mengikuti path

INTERACTIVITY

<a>
Description: Membuat hyperlink di dalam SVG. Atribut target, href.
Example: 
<a href="https://example.com"><circle cx="50" cy="50" r="30" fill="blue" /></a>
Output: Lingkaran yang dapat diklik
event handlers
Description: Menambahkan event JavaScript pada elemen SVG (onclick, onmouseover, dll).
Example: 
<circle onclick="alert('Klik')" ... />
Output: Elemen interaktif
CSS :hover/:focus
Description: Mengubah gaya dengan pseudo-class CSS.
Example: 
circle:hover { fill: red; }
Output: Warna berubah saat hover

ACCESSIBILITY

<title>
Description: Judul singkat untuk elemen SVG (dibacakan screen reader).
Example: 
<svg><title>Logo Perusahaan</title>...</svg>
Output: Deskripsi singkat
<desc>
Description: Deskripsi lebih panjang dari konten SVG.
Example: 
<svg><desc>Grafik penjualan 2024 dengan batang biru</desc>...</svg>
Output: Deskripsi panjang
role="img" dan aria-label
Description: Memberi tahu assistive technology bahwa SVG adalah gambar dan memberikan label.
Example: 
<svg role="img" aria-label="Grafik penjualan">...</svg>
Output: Aksesibel untuk screen reader

INTEGRATION

Inline SVG dalam HTML
Description: Langsung menuliskan elemen <svg> di dalam HTML5.
Example: 
<div><svg ...>...</svg></div>
Output: SVG sebagai bagian DOM
External SVG via <img>
Description: Menggunakan SVG sebagai gambar (tidak interaktif).
Example: 
<img src="icon.svg" alt="Ikon" />
Output: Gambar SVG
External SVG via <object>
Description: Menyertakan SVG eksternal dengan interaktivitas terbatas.
Example: 
<object type="image/svg+xml" data="file.svg"></object>
Output: SVG mandiri
SVG sebagai CSS background
Description: Menggunakan URL data atau file SVG sebagai background-image.
Example: 
background-image: url('data:image/svg+xml,...');
Output: Background vektor

BEST-PRACTICES

Minifikasi SVG
Description: Hapus whitespace, komentar, dan metadata tidak perlu menggunakan alat seperti SVGO.
Example: 
svgo icon.svg -o icon.min.svg
Output: Ukuran file berkurang
Gunakan viewBox untuk responsivitas
Description: viewBox memungkinkan SVG menyesuaikan dengan container tanpa kehilangan proporsi.
Example: 
<svg viewBox="0 0 200 200" ...>
Output: Skalabel tanpa distorsi
Hindari terlalu banyak node path
Description: Sederhanakan path untuk performa rendering yang lebih baik.
Example: 
Gunakan editor vektor untuk menyederhanakan kurva.
Output: Rendering lebih cepat
Sediakan fallback PNG untuk browser lama
Description: Di dalam <object> atau sebagai gambar cadangan.
Example: 
<img src="chart.svg" onerror="this.src='chart.png'">
Output: Tampilan di browser kuno