File SVG: Panduan Lengkap untuk Developer dan Desainer

SVG adalah salah satu teknologi yang terlihat sederhana dari luar — hanya format gambar, kan? — tetapi memberikan manfaat lebih dari mempelajarinya lebih dalam dibandingkan hampir format lain dalam toolkit developer atau desainer. File SVG dapat diskalakan tanpa batas tanpa kehilangan kualitas, hampir tidak ada bobotnya untuk grafis sederhana, dapat di-style dengan CSS, dianimasikan dengan JavaScript atau transisi CSS, dan disematkan langsung ke dalam HTML. Memahami SVG dengan benar mengubah cara kamu berpikir tentang grafis di web.

Kamu bisa melihat, memeriksa, dan mengoptimalkan file SVG apa pun menggunakan BrowseryTools SVG Tool — gratis, tanpa daftar, semuanya berjalan di browsermu.

Apa Itu SVG?

SVG singkatan dari Scalable Vector Graphics. Tidak seperti JPEG, PNG, atau WebP — yang menyimpan gambar sebagai grid piksel berwarna (gambar raster) — SVG menyimpan gambar sebagai deskripsi matematis dari bentuk. Lingkaran dideskripsikan sebagai titik pusat dan radius. Path dideskripsikan sebagai urutan perintah menggambar: pindah ke titik ini, gambar garis ke titik itu, gambar kurva melalui titik kontrol ini, tutup path.

SVG adalah format berbasis XML, artinya setiap file SVG adalah teks biasa, dapat dibaca manusia, dan terstruktur sebagai pohon elemen bersarang. Buka SVG apa pun di editor teks dan kamu melihat markup yang terbaca, bukan blob biner. Ini memiliki konsekuensi praktis yang signifikan: file SVG dapat dibuat secara programatik, dimodifikasi dengan alat pemrosesan teks, di-diff dalam version control, dan disematkan langsung ke HTML tanpa pemrosesan tambahan.

Format ini adalah standar W3C, dikelola bersama HTML dan CSS. Setiap browser modern memiliki mesin rendering SVG lengkap bawaan.

Mengapa SVG Mengungguli Raster untuk Ikon dan Ilustrasi

Keunggulan SVG yang menentukan atas format raster untuk ikon, logo, dan ilustrasi adalah independensi resolusi. Ikon raster yang dibuat pada 32×32 piksel akan terlihat buram di layar Retina, yang merender pada 2× atau 3× piksel fisik per piksel CSS. Untuk memperbaikinya, kamu perlu mengekspor beberapa varian resolusi (@1x, @2x, @3x), meningkatkan resolusi sumber (file lebih besar, lebih banyak memori), atau menggunakan image-set dalam CSS untuk menyajikan resolusi yang tepat. Dengan SVG, kamu membuat grafis sekali dan terlihat sempurna di setiap ukuran, di setiap layar, selamanya.

Ukuran file adalah keunggulan utama lainnya untuk grafis sederhana. Ikon sederhana — tanda centang, panah, menu hamburger — mungkin dideskripsikan dalam file SVG menggunakan 200–500 byte. PNG yang setara pada resolusi Retina 2× mungkin 2–5 KB. Pada 3×, lebih besar lagi. Ketika antarmuka memiliki 50 ikon, perbedaan antara 50 SVG yang dioptimalkan (total ~20 KB) dan 50 set PNG (total ~300+ KB) itu bermakna.

Gambar raster menang untuk konten fotografi dan ilustrasi yang sangat detail dengan gradien dan tekstur halus. SVG vektor dari foto akan sangat besar dan terlihat bergaya bukan fotografi. Format yang tepat sepenuhnya tergantung pada sifat kontennya.

Anatomi SVG: Elemen Inti

File SVG minimal memiliki struktur ini:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Elemen dan atribut utama yang perlu dipahami:

• viewBox — Mendefinisikan sistem koordinat internal. viewBox="0 0 24 24" berarti ruang gambar membentang dari (0,0) hingga (24,24). SVG kemudian dapat dirender pada ukuran sebenarnya mana pun — 16×16, 32×32, 200×200 — dan browser menskalakan sistem koordinat agar sesuai. Inilah mekanisme di balik independensi resolusi.
• path — Elemen SVG yang paling kuat. Atribut d berisi perintah menggambar: M (pindah ke), L (garis ke), C (kurva bezier kubik), A (busur), Z (tutup path). Hampir setiap bentuk dapat diekspresikan sebagai path.
• circle, rect, ellipse, line, polygon — Elemen kenyamanan untuk bentuk umum. <circle> mengambil cx, cy, dan r. <rect> mengambil x, y, width, dan height, ditambah rx opsional untuk sudut membulat.
• text — SVG dapat merender teks tipografi yang diskalakan bersama gambar dan tetap dapat dipilih dan diakses, tidak seperti teks yang dirender ke dalam gambar raster.
• g (group) — Mengelompokkan elemen anak bersama sehingga transform, style, dan opacity dapat diterapkan ke seluruh grup sekaligus.
• defs dan use — Mendefinisikan elemen yang dapat digunakan kembali sekali dan mereferensikannya beberapa kali dengan <use>. Penting untuk sistem ikon yang menggunakan sprite SVG tunggal.

Styling SVG dengan CSS dan Menganimasikannya

Elemen SVG adalah bagian dari DOM ketika SVG di-inline dalam HTML. Ini berarti CSS dapat menargetkannya secara langsung menggunakan semua selektor yang sama yang digunakan untuk elemen HTML. Kamu bisa mengubah warna fill, lebar stroke, dan opacity saat hover, dalam dark mode, atau sebagai respons terhadap perubahan state apa pun:

/* Target SVG elements with CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

Animasi dan transisi CSS bekerja pada properti SVG. Trik stroke-dasharray dan stroke-dashoffset — menganimasikan path dari tak terlihat menjadi terlihat dengan memanipulasi seberapa banyak stroke putus-putus yang ditampilkan — menciptakan efek "menggambar" yang terlihat pada banyak indikator loading dan ilustrasi onboarding. SVG juga memiliki elemen <animate> dan <animateTransform> sendiri (animasi SMIL), meskipun animasi CSS dan JavaScript umumnya lebih disukai untuk kemudahan pemeliharaan.

Menggunakan currentColor sebagai nilai fill membuat ikon SVG mewarisi warna teks elemen induknya secara otomatis, memungkinkan satu ikon beradaptasi ke konteks warna apa pun tanpa modifikasi.

Optimasi SVG dengan SVGO

File SVG yang diekspor dari alat desain seperti Figma atau Illustrator mengandung banyak bloat yang tidak perlu: metadata editor, atribut yang redundan, wrapper grup tanpa efek, koordinat floating-point dengan delapan tempat desimal, atribut id yang dibuat oleh sistem node internal alat desain. Untuk ikon sederhana, overhead ini dapat melipattigakan atau melipatempat ukuran file dibandingkan versi yang dioptimalkan secara manual.

SVGO (SVG Optimizer) adalah alat standar untuk menghapus overhead ini. Ia menerapkan sekumpulan transformasi yang dapat dikonfigurasi: menciutkan grup bersarang, menghapus elemen tak terlihat, membulatkan koordinat ke presisi yang wajar, menggabungkan path yang redundan, menghapus metadata dan komentar, dan lainnya. Pass SVGO yang khas mengurangi ukuran file SVG ikon sebesar 30–60% tanpa perubahan visual.

BrowseryTools SVG Tool menerapkan optimasi SVG di browsermu, memberikan output yang dioptimalkan tanpa menginstal alat command-line apa pun.

Inline SVG vs File Eksternal vs CSS Background

Ada tiga cara utama untuk menyertakan SVG di halaman web, masing-masing dengan trade-off yang berbeda:

• Inline SVG — Markup SVG disematkan langsung dalam HTML. Memberikan akses CSS dan JavaScript penuh ke setiap elemen di dalam SVG. Terbaik untuk ikon yang membutuhkan efek hover, perubahan warna, atau animasi. Tidak dapat di-cache secara terpisah oleh browser.
• File SVG eksternal melalui <img> — SVG adalah file terpisah yang direferensikan dengan <img src="icon.svg">. Browser dapat men-cache file tersebut. Mudah digunakan. Namun CSS dari halaman induk tidak dapat menjangkau ke dalam SVG, dan JavaScript tidak dapat memanipulasi isinya.
• CSS background-image — SVG direferensikan sebagai CSS background. Cocok untuk grafis dekoratif semata. SVG juga dapat di-inline sebagai data URI dalam CSS, berguna untuk ikon kecil dalam stylesheet komponen. CSS tidak dapat me-restyle elemen di dalam SVG.

SVG sprite sheet — satu file SVG yang berisi semua ikon yang didefinisikan dalam blok <defs>, direferensikan dengan <use href="sprite.svg#icon-name"> — menawarkan keseimbangan yang baik: satu request jaringan yang dapat di-cache untuk semua ikon, dengan manipulasi DOM per-ikon yang memungkinkan di sebagian besar browser modern.

Jebakan SVG Umum: XSS melalui SVG

SVG mendukung skrip tertanam, handler event, dan referensi sumber eksternal, yang menjadikannya vektor serangan yang layak untuk cross-site scripting (XSS) jika file SVG yang diunggah pengguna ditampilkan dalam konteks browser. File SVG yang berisi <script>alert(document.cookie)</script> akan mengeksekusi skrip tersebut jika browser merender SVG sebagai bagian dari halaman.

Aturan untuk menangani SVG yang diunggah pengguna dengan aman:

• Jangan pernah meng-inline SVG yang diunggah pengguna dalam HTML-mu. Hanya inline SVG yang kamu kendalikan.
• Jika kamu harus menampilkan SVG yang diunggah pengguna, sajikan dari origin yang terpisah dan di-sandbox dan tampilkan dalam tag <img> atau <iframe> yang di-sandbox. Tag <img> tidak mengeksekusi skrip dalam SVG.
• Sanitasi SVG yang diunggah pengguna dengan menjalankannya melalui sanitizer (DOMPurify dengan konfigurasi SVG) sebelum menyimpan atau menampilkannya.
• Tetapkan header Content Security Policy untuk membatasi sumber skrip pada halaman yang menampilkan SVG.

Mengkonversi SVG ke PNG

Beberapa konteks tidak mendukung SVG: klien email lama, platform CMS tertentu, beberapa pipeline pemrosesan gambar, persyaratan ikon aplikasi untuk iOS dan Android, dan gambar pratinjau Open Graph. Dalam kasus ini, kamu perlu mengekspor SVG sebagai PNG yang dirasterisasi.

Karena SVG dapat diskalakan tanpa rugi, kamu bisa mengekspor ke PNG dalam ukuran berapa pun. Untuk ikon aplikasi, ini berarti mengekspor satu sumber SVG pada 1024×1024 dan menurunkan semua ukuran yang lebih kecil darinya. Untuk penggunaan web Retina, ekspor pada 2× atau 3× ukuran tampil CSS.

BrowseryTools SVG Tool dapat merender SVG ke PNG pada resolusi yang kamu pilih, menangani konversi di dalam browser tanpa upload server apa pun. Berguna ketika kamu memiliki SVG dari alat desain dan membutuhkan PNG untuk konteks yang tidak menerima SVG.