SVG: apa itu, konsep kunci dan penggunaan dalam pengembangan web

Apa itu SVG?

SVG — format grafik vektor berbasis XML yang muncul pada tahun 2001 sebagai rekomendasi W3C. Tidak seperti format raster, SVG mendeskripsikan gambar melalui primitif geometris: titik, garis, kurva, dan poligon. File SVG adalah dokumen XML teks biasa yang dapat dibaca, diedit, dan dikompresi dengan alat standar.

Arsitektur SVG mencakup beberapa konsep kunci. viewBox mendefinisikan sistem koordinat virtual, independen dari ukuran sebenarnya elemen. Misalnya, viewBox="0 0 100 100" membuat grid persegi 100×100, di mana semua koordinat tetap. Saat lebar atau tinggi kontainer berubah, konten akan diskalakan secara proporsional.

Menurut W3C SVG 2 Specification, versi modern SVG mendukung gradien, masker, filter, teks dengan penempatan arbitrer, interaktivitas melalui JavaScript, dan animasi melalui CSS dan SMIL. SVG terintegrasi ke dalam DOM sebagai elemen HTML penuh, yang memungkinkan pengelolaan setiap primitif grafis secara programatis.

Dalam pengembangan seluler, SVG juga digunakan di iOS melalui UIGraphicsImageRenderer dan di Android melalui VectorDrawable — kedua format mengonversi deskripsi mirip SVG menjadi raster yang dipercepat perangkat keras di GPU.

Sejarah dan perkembangan format SVG

SVG 1.0 menjadi rekomendasi W3C pada tahun 2001, SVG 1.1 pada tahun 2003, SVG 2.0 sedang dalam pengembangan sejak 2012. Inovasi utama SVG 2 adalah integrasi yang lebih dalam dengan CSS, dukungan untuk compositing dan blending modes, serta kemungkinan penggunaan SVG di HTML tanpa prefiks namespace.

Meskipun SVG 2 belum mencapai status Recommendation, browser modern sudah mendukung sebagian besar fungsionalitasnya. Chrome, Safari, Firefox, dan Edge memiliki dukungan hampir penuh untuk SVG 1.1 dan sebagian besar SVG 2.

Elemen dasar SVG

SVG menyediakan seperangkat elemen untuk mendeskripsikan grafik dua dimensi. Setiap elemen memiliki atribut yang menentukan posisi, ukuran, dan tampilan visualnya. Atribut dapat ditentukan sebagai atribut XML atau melalui properti CSS.

• <rect> — persegi panjang dengan atribut x, y, width, height, rx, ry (pembulatan sudut).
• <circle> — lingkaran dengan atribut cx, cy (pusat) dan r (jari-jari).
• <ellipse> — elips dengan atribut cx, cy, rx, ry.
• <line> — ruas garis dengan atribut x1, y1, x2, y2.
• <polyline> — garis patah dengan atribut points (daftar koordinat).
• <polygon> — poligon tertutup dengan atribut points.
• <path> — kontur sembarang dengan atribut d (perintah: M, L, C, Q, A, Z).
• <text> — elemen teks dengan atribut x, y, font-size, font-family.

Elemen path — elemen SVG paling kuat dan fleksibel. Atribut d berisi urutan perintah: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Setiap perintah memiliki bentuk absolut atau relatif (huruf besar atau kecil).

SVG juga mendukung pengelompokan elemen melalui <g>. Grup mewarisi atribut visual (fill, stroke, transform) ke semua elemen anak. Ini memungkinkan penerapan gaya seragam ke seluruh rangkaian bentuk dan pengelolaan posisinya melalui satu transform.

SVG vs grafik raster: perbandingan format

Perbedaan utama antara SVG dan format raster (JPEG, PNG, WebP) — cara penyimpanan informasi. Raster menyimpan warna setiap piksel dalam grid berukuran tetap. SVG menyimpan perintah matematis untuk mereproduksi bentuk. Perbedaan ini menentukan semua kelebihan dan kekurangan format.

Menurut HTTP Archive, 2025, 68% situs web menggunakan SVG untuk ikon, 34% untuk ilustrasi, dan 22% untuk logo. Ukuran rata-rata ikon SVG adalah 0.5–2 KB, sedangkan ikon raster dengan kualitas serupa adalah 5–20 KB dalam format PNG.

Untuk foto dan gambar raster kompleks, SVG tidak cocok — ukuran deskripsi XML akan melebihi ukuran JPEG ekuivalen. Area aplikasi SVG yang direkomendasikan: ikon, logo, ilustrasi, skema, grafik, elemen antarmuka dengan desain adaptif.

Kapan memilih SVG dan kapan format raster

SVG — pilihan optimal untuk elemen antarmuka yang harus terlihat tajam di layar Retina dan pada skala browser berapa pun. Raster — untuk foto, tekstur kompleks, dan gambar dengan jutaan warna, di mana deskripsi vektor akan menjadi terlalu rumit.

Pendekatan hibrida — kombinasi SVG untuk elemen antarmuka dan WebP/AVIF untuk konten foto — memberikan keseimbangan terbaik antara kualitas dan kinerja pemuatan halaman.

Inline SVG dan styling melalui CSS

Inline SVG — menyematkan markup SVG langsung ke dalam dokumen HTML, bukan sebagai file terpisah melalui <img> atau background-image. Kelebihan inline SVG adalah elemen SVG menjadi bagian dari DOM dan dapat di-styling melalui CSS, dikelola melalui JavaScript, dan dianimasikan tanpa permintaan tambahan ke server.

Tidak seperti <img src="icon.svg"> di mana SVG diisolasi di shadow DOM, inline SVG mewarisi warna dan font dari dokumen induk. Ini memungkinkan, misalnya, mengubah warna ikon saat hover melalui CSS pseudo-class :hover tanpa memuat file terpisah untuk setiap status.

Menurut CSS-Tricks, inline SVG adalah cara yang direkomendasikan untuk menggunakan ikon di aplikasi web modern. Properti CSS fill, stroke, stroke-width diterapkan langsung ke elemen SVG. Untuk kustomisasi melalui CSS, penting bahwa di SVG asli fill dan stroke tidak ditetapkan sebagai atribut inline — jika tidak, CSS tidak dapat menimpanya.

• Kelebihan: styling melalui CSS, pengelolaan melalui JS, tanpa permintaan HTTP, adaptabilitas viewBox.
• Kekurangan: peningkatan ukuran halaman HTML, ketidakmungkinan caching terpisah dari HTML.
• Alternatif: SVG-sprite — menggabungkan beberapa SVG dalam satu file dan menggunakan <use href="#id">.

SVG-sprite memecahkan masalah caching: semua ikon dikumpulkan dalam satu file, browser memuatnya sekali, dan ikon individual dihubungkan melalui <use> dengan menyebutkan id elemen yang diperlukan di dalam sprite.

Animasi SVG: CSS dan SMIL

Animasi CSS SVG — cara paling umum dan efisien untuk menganimasikan grafik vektor di browser. Properti CSS seperti transform, opacity, dan fill diterapkan ke elemen SVG sama seperti ke elemen HTML. Untuk animasi sepanjang jalur sembarang, digunakan properti CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) — mekanisme animasi bawaan di SVG, independen dari CSS. Elemen <animate>, <animateTransform>, dan <animateMotion> memungkinkan menganimasikan atribut SVG apa pun tanpa JavaScript dan CSS. Animasi SMIL dijamin sinkron dengan frekuensi bingkai browser.

Menurut MDN Web Docs, SMIL didukung di semua browser modern, tetapi animasi CSS dianggap lebih dapat diprediksi dan efisien. Skenario utama untuk SMIL — animasi atribut yang tidak dapat diakses melalui CSS, misalnya d (path) dari elemen <path>.

JavaScript + requestAnimationFrame memberikan kontrol maksimum atas animasi SVG. Pengembang web menggunakan pustaka GSAP dan Anime.js untuk urutan animasi kompleks dengan garis waktu dan fungsi easing yang sulit diimplementasikan melalui CSS murni.

Contoh kode: membuat grafik SVG

Contoh pertama — ikon rumah sederhana menggunakan elemen dasar SVG. Semua bentuk adalah rect dan polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Contoh kedua — animasi rotasi loader melalui CSS. Menggunakan <circle> dengan atribut stroke-dasharray untuk membuat kontur terputus:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Contoh ketiga — animasi path melalui pustaka GSAP untuk menggambar kontur dengan halus. GSAP bekerja dengan atribut stroke-dashoffset, menciptakan efek munculnya garis:

// Gambar jalur dengan GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});