Apa Itu SVG? Panduan Format Grafik Vektor

SVG adalah format gambar yang terdiri atas instruksi menggambar, bukan piksel. Saat logo, ikon, atau grafik disimpan sebagai SVG, file-nya berisi perintah seperti "gambar kurva dari titik ini ke titik itu lalu isi dengan warna ini". Itulah sebabnya SVG tetap tajam di ukuran berapa pun, sering kali sangat kecil, dan bisa dibuka serta disunting di editor teks. Artikel ini membahas posisi SVG di antara standar W3C, struktur file-nya, dukungan browser dan perangkat lunak, risiko keamanannya, serta cara mengonversi antara SVG dan PNG atau JPG.

Apa itu SVG?

SVG (Scalable Vector Graphics) adalah standar W3C berbasis XML untuk mendeskripsikan grafik vektor dua dimensi. Ekstensinya .svg dan MIME type-nya image/svg+xml. Varian yang dikompresi gzip memakai ekstensi .svgz.

Format raster (JPG, PNG, WebP) menyimpan gambar sebagai kisi piksel yang tetap; jika diperbesar, pikselnya menjadi terlihat. SVG mendeskripsikan bentuk secara matematis, dan browser atau program menggambarnya ulang pada resolusi layar apa pun. Panduan format gambar MDN menyebut SVG sebagai pilihan ideal untuk gambar yang bisa direpresentasikan sebagai perintah menggambar, terutama jika ukuran tampilannya tidak diketahui atau berubah-ubah, dan mencatat bahwa SVG umumnya tidak berguna untuk foto.

Sejarah: SVG 1.0, 1.1, dan SVG 2

• 4 September 2001: SVG 1.0 diterbitkan sebagai W3C Recommendation.
• 14 Januari 2003: SVG 1.1 menjadi Recommendation. Versi 1.1 membagi bahasa ini menjadi modul-modul, sehingga subset seperti profil seluler lebih mudah didefinisikan.
• 16 Agustus 2011: SVG 1.1 Second Edition diterbitkan. Inilah versi stabil yang menjadi dasar browser saat ini.
• SVG 2: Menurut riwayat publikasi W3C, working draft muncul sejak 2012 dan Candidate Recommendation Snapshot pertama diterbitkan pada 15 September 2016. Snapshot terbaru bertanggal 6 Oktober 2026; dokumen ini masih berada di tahap Candidate Recommendation.

SVG 2 dibangun di atas 1.1 Second Edition dan bertujuan untuk integrasi yang lebih baik dengan HTML dan CSS. Sebagian topik seperti filter, masking, dan font dipindahkan ke modul CSS dan FX terpisah. Dalam praktiknya, browser mengimplementasikan sebagian SVG 2, jadi jangan berasumsi semua fiturnya berfungsi di mana saja.

Struktur file SVG

File SVG sederhana terlihat seperti ini:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Sistem koordinat: viewBox, width, dan height

viewBox mendefinisikan sistem koordinat internal gambar (di sini 0 hingga 100). width dan height menentukan seberapa besar ruang yang diambil gambar di halaman. SVG yang memiliki viewBox akan diskalakan secara proporsional ke ukuran berapa pun yang Anda berikan di CSS. File tanpa viewBox bisa terpotong saat diubah ukurannya, salah satu kesalahan logo yang paling umum.

Elemen inti

• Bentuk: rect, circle, ellipse, line, polyline, polygon, dan path, yang bisa menggambar apa saja.
• Teks: text dan tspan. Teks tetap bisa dipilih dan dicari, tetapi jika font-nya tidak ada di perangkat penampil, font cadangan yang dipakai.
• Pengelompokan dan penggunaan ulang: g, defs, symbol, use. Set ikon sering dikemas sebagai elemen symbol dalam satu file.
• Pewarnaan: warna solid, gradien linear dan radial, pola, clipping path, mask, dan filter (blur, bayangan).
• Gaya dan animasi: CSS bisa memberi gaya pada SVG; animasi CSS dan elemen animasi SMIL menambahkan gerakan.
• Konten tersemat: image untuk gambar raster, foreignObject untuk HTML, dan script untuk JavaScript.

Warna, transparansi, layer, dan halaman

Transparansi sudah bawaan di SVG: apa pun yang tidak digambar akan kosong, dan opacity serta fill-opacity mendefinisikan semi-transparansi. Layer direpresentasikan dengan grup g; Inkscape dan Illustrator menyimpan layer-nya dengan cara itu. Warna secara bawaan adalah sRGB, dan tidak ada batas kedalaman bit dalam arti biasa karena warna ditulis sebagai angka. SVG bukan format dokumen multi-halaman; untuk gambar multi-halaman, PDF lebih cocok.

Dukungan di browser, sistem, dan perangkat lunak

Menurut MDN, Chrome, Edge, Firefox, Opera, dan Safari semuanya mendukung SVG. Anda bisa memakainya melalui <img>, sebagai background-image CSS, langsung di dalam HTML (inline), atau dengan <object> dan <iframe>. Alat vektor seperti Inkscape, Adobe Illustrator, Affinity Designer, dan Figma bisa membaca dan menulis SVG, dan Microsoft Office versi terbaru memungkinkan Anda menyisipkan grafik SVG.

Di tempat lain dukungannya lemah: banyak jejaring sosial, aplikasi email, aplikasi pesan, dan formulir unggah menolak SVG atau tidak menampilkan pratinjau. Sebagian alasannya adalah risiko keamanan yang dijelaskan di bawah ini.

Keamanan: perlakukan SVG seperti dokumen

SVG adalah dokumen XML dan bisa memuat elemen script, atribut event (seperti onload), dan referensi eksternal. Halaman "SVG as an image" di MDN menjelaskan bahwa saat SVG dipakai melalui <img> atau latar CSS, browser menonaktifkan JavaScript dan tidak memuat sumber daya eksternal seperti gambar atau stylesheet. Pembatasan itu tidak berlaku saat file dibuka langsung atau disematkan dengan <iframe>, <object>, atau <embed>.

Konsekuensi praktisnya: jika sebuah situs mengizinkan pengguna mengunggah file SVG dan menyajikannya langsung dari domainnya sendiri, skrip yang tersemat di file itu bisa berjalan dalam konteks situs tersebut (stored XSS). Mitigasi yang umum:

• Lewatkan SVG yang diunggah melalui sanitizer yang menghapus script, atribut event, foreignObject, dan tautan eksternal.
• Sajikan file pengguna dari domain terpisah, dengan Content-Security-Policy yang ketat, atau sebagai unduhan (Content-Disposition: attachment).
• Jika Anda tidak membutuhkan vektornya, konversi SVG yang diunggah ke PNG di server dan terbitkan hanya versi rasternya.

Penggunaan umum

• Logo dan aset merek: satu file tetap tajam mulai dari kartu nama hingga baliho.
• Ikon antarmuka: bisa diwarnai dengan CSS dan tidak pernah buram di layar berkerapatan tinggi.
• Grafik, peta, dan diagram: pustaka seperti D3.js menggambar data langsung ke elemen SVG.
• Favicon: browser terkini menerima favicon SVG melalui <link rel="icon" type="image/svg+xml">.
• Pemotongan dan pencetakan: pemotong laser, pemotong vinil, dan mesin bordir bekerja dengan jalur vektor.

Kelebihan dan kekurangan

Masalah umum dan cara mengatasinya

Situs atau aplikasi tidak menerima SVG

Solusi termudah adalah salinan PNG. Konverter SVG ke PNG kami merender gambar menjadi PNG transparan di browser Anda, dengan lebar piksel yang Anda pilih. File Anda tidak diunggah dan tidak pernah meninggalkan perangkat Anda.

Teks tampil dengan font yang berbeda

SVG tidak menyematkan font secara bawaan; jika sistem penampil tidak memiliki font tersebut, font cadangan yang dipakai. Dalam konteks gambar, font eksternal juga tidak dimuat. Ubah teks menjadi outline di alat desain Anda, atau sematkan font-nya.

SVG berukuran salah atau terpotong di halaman

Tanpa viewBox, atau dengan width/height yang tetap, penskalaan tidak berjalan seperti yang diharapkan. Tambahkan viewBox yang mencakup seluruh gambar ke elemen svg akar dan atur ukurannya di CSS.

File lebih besar dari perkiraan

Alat desain menulis metadata editor, angka desimal yang berlebihan, dan layer tersembunyi ke dalam SVG. Optimizer seperti SVGO membuangnya. Kompresi gzip atau Brotli di server semakin memperkecil SVG yang berbasis teks.

Saya butuh logo PNG saya dalam bentuk SVG

Gambar raster tidak bisa benar-benar "dikonversi" menjadi vektor; yang dilakukan alat-alat adalah tracing: bentuk-bentuk dideteksi lalu digambar ulang sebagai outline. Alat PNG ke SVG dan JPG ke SVG kami melakukan tracing dengan 2 hingga 8 warna. Hasilnya bagus untuk logo dan gambar sederhana, tetapi kasar untuk foto. Dengan alat ini, file diunggah ke server kami melalui koneksi aman, di-tracing di sana, dan dihapus paling lambat dalam 30 menit.

Tips konversi

• Ketahui ukuran target: Saat merender SVG ke PNG, pilih ukuran terbesar yang akan ditampilkan, lalu gandakan untuk layar berkerapatan tinggi. Di alat kami, sisi terpanjang bisa mencapai 4096 piksel; jika lebar dibiarkan kosong, gambar kecil diskalakan sehingga sisi terpanjangnya 1024 piksel.
• JPG untuk konten foto: Jika SVG menyematkan foto dan Anda tidak membutuhkan transparansi, JPG atau WebP lebih kecil daripada PNG; Anda bisa mengonversi PNG-nya setelah itu di konverter gambar.
• Favicon: Jika logo Anda berupa SVG, pembuat favicon menerimanya dan menambahkan icon.svg ke dalam paket.
• Sumber yang bersih untuk tracing: Saat membuat SVG dari PNG, mulailah dengan gambar beresolusi tinggi, berwarna datar, dan bebas noise.

Pertanyaan yang Sering Diajukan

Apa perbedaan SVG dan PNG?

PNG terdiri atas jumlah piksel yang tetap dan menjadi buram saat diperbesar. SVG mendeskripsikan bentuk dan digambar ulang dengan tajam di ukuran berapa pun. SVG cocok untuk logo dan ikon; PNG atau JPG cocok untuk foto dan tangkapan layar.

Bisakah file SVG mengandung virus?

SVG bukan program yang bisa dijalankan, tetapi bisa menyematkan JavaScript. Skrip tidak berjalan saat SVG ditampilkan sebagai gambar (<img>), tetapi bisa berjalan saat file dibuka langsung di browser. Periksa SVG dari sumber yang tidak dikenal di penampil gambar, atau konversikan ke PNG, alih-alih membukanya langsung.

Bisakah SVG disisipkan ke Word atau PowerPoint?

Microsoft Office versi terbaru mendukung penyisipan SVG. Untuk versi lama, atau jika Anda akan membagikan file ke program lain, salinan PNG lebih aman.

Apakah mengonversi SVG ke PNG menurunkan kualitas?

PNG bersifat lossless, tetapi gambarnya terkunci pada ukuran piksel tertentu. Pilih lebar yang cukup besar dan Anda tidak akan melihat kehilangan apa pun; memperbesar PNG di kemudian hari akan membuatnya buram.

Apakah SVG mendukung animasi?

Ya. Gerakan bisa berasal dari animasi CSS, elemen animasi SMIL, dan JavaScript. Mengonversi ke PNG hanya memberi Anda satu frame.

Sumber

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: riwayat publikasi SVG 2
• MDN: SVG as an image
• MDN: Image file type and format guide