Apa itu SVG? Kelebihan Format Gambar Vektor untuk Website

Format JPG dan PNG Punya Kelemahan Fatal

Saat membuat website, kebanyakan pemula hanya mengenal format JPG (untuk foto pemandangan) dan PNG (untuk gambar tanpa *background* atau logo). Masalahnya, format JPG dan PNG termasuk dalam jenis Raster (Kumpulan titik/pixel).

Jika kamu memasang logo PNG berukuran 100x100 pixel, lalu pengunjung memperbesarnya (zoom in) melalui HP, logo tersebut akan terlihat buram, pecah-pecah, dan berbentuk kotak-kotak (pixelated).

Solusinya: SVG (Scalable Vector Graphics)

SVG adalah format gambar berjenis Vektor. Alih-alih menyimpan warna titik per titik, file SVG sebenarnya adalah Kumpulan Kode Matematika. Ya, jika kamu membuka file SVG menggunakan Notepad atau VS Code, isinya bukan gambar, melainkan kode XML (mirip HTML) yang menginstruksikan bentuk garis dan kurva.

Kelebihan Menggunakan SVG

1. Tidak Akan Pernah Pecah (Anti-Blur): Karena berbasis matematika, logo SVG akan digambar ulang secara otomatis. Entah kamu menampilkannya di layar HP berukuran 5 inci atau di layar billboard stadion sepak bola sebesar 10 meter, ketajamannya akan sama 100%.
2. Ukuran File Sangat Kecil: Karena hanya berisi teks koordinat, ukuran file SVG biasanya hanya sekitar 2 KB - 5 KB. Bandingkan dengan logo PNG resolusi tinggi yang bisa memakan 500 KB. SVG membuat loading website-mu terbang!
3. Bisa Diubah Warnanya Pakai CSS: Ini fitur paling gila. Jika kamu menaruh kode SVG langsung ke dalam HTML (Inline SVG), kamu bisa menggunakan CSS untuk mengganti warna logo tersebut saat di-hover (dilewati mouse). Kamu tidak perlu membuat dua gambar PNG dengan warna berbeda!

Kapan Jangan Menggunakan SVG?

Satu-satunya kelemahan SVG adalah ia tidak bisa digunakan untuk menyimpan foto yang kompleks (seperti foto manusia, hewan, atau pemandangan alam) karena itu membutuhkan jutaan kombinasi warna tidak teratur yang membuat perhitungan matematiknya menjadi sangat lambat. Untuk foto, tetap gunakan WebP atau JPG standar!