Vektor SVG (.svg)
Rekomendasi StandarScalable Vector Graphics (SVG) adalah format gambar vektor berbasis XML untuk grafik dua dimensi dengan dukungan interaktivitas, gaya CSS, dan animasi.
Konversi SVG ke PNG
Konverter SVG ke PNG gratis yang berjalan di peramban. Konversikan berkas secara instan di perangkat Anda.
Kompres SVG Secara Daring
Privat - file tidak pernah meninggalkan perangkat Anda
Pemeriksaan & Metadata
Sistem operasi dan penganalisis file mengenali file SVG dengan memeriksa urutan byte biner di bagian awal:
Tanda Tangan Header per Byte (Byte Penanda)
Sistem operasi dan penganalisis file mengenali file SVG dengan memeriksa urutan byte biner di bagian awal:
TANDA TANGAN HEX (OFFSET 0):
3C 73 76 67REPRESENTASI ASCII: <svg
Standardisasi: Rekomendasi W3C (SVG 1.1 / SVG 2)
Spesifikasi Teknis
| Arsitektur Kontainer | Dokumen markah teks berbasis XML yang mendefinisikan geometri vektor 2D |
| Kompresi | Kompresi teks Gzip / Brotli (SVGZ menggunakan kompresi gzip) |
| Urutan Byte | Tidak berlaku (Aliran karakter berbasis teks UTF-8 / UTF-16) |
| Ruang Warna | sRGB, Modul Warna CSS 4 (Display P3, lab, lch) |
| Saluran & Struktur | Bentuk vektor beresolusi tak terbatas, kurva Bézier, tipografi, dan mask opasitas |
| Dimensi Maksimum | Independen terhadap resolusi (berskala tanpa batas ke area tampilan apa pun tanpa pikselasi) |
| Transparansi | Transparansi alfa variabel penuh dan mode campuran CSS |
| Streaming & Progresif | Penguraian aliran teks progresif didukung oleh pengurai XML peramban |
Perbandingan Teknis SVG dengan Pesaing
| Atribut Teknis | SVG (Saat Ini) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Model Perenderan | DOM vektor dengan model retensi | Kanvas bitmap model langsung | Wadah halaman tetap dengan model retensi | Kotak piksel raster |
| Gaya & CSS | Dapat diberi gaya sepenuhnya melalui kelas dan variabel CSS | Memerlukan penggambaran ulang menggunakan API kanvas JavaScript | Tidak ada gaya CSS dinamis | Piksel raster tetap |
| Skalabilitas tak terbatas | Ya (kurva vektor matematis) | Memerlukan penskalaan resolusi manual | Ya (elemen vektor) | Tidak (menjadi berkotak-kotak saat diperbesar) |
| Interaktivitas | Peristiwa DOM bawaan (arahkan kursor, klik, animasi) | Memerlukan perhitungan manual untuk mendeteksi titik interaksi | Dokumen statis | Memerlukan peta gambar atau kanvas |
Pola Kerusakan Umum dan Panduan Pemulihan Hex
Peramban menampilkan Kesalahan Penguraian XML: token tidak ditutup atau tag tidak cocok.
Penyebab Utama: Sintaks XML cacat, tag penutup yang hilang, atau ampersand yang tidak lolos ('&' alih-alih '&').
Pemulihan: Validasi dengan linter XML (xmllint file.svg) dan koreksi tag yang tidak seimbang.
Analisis Keamanan & Vektor Serangan Parser
Karena SVG adalah XML yang dapat dieksekusi dan mendukung tag '<script>' serta entitas eksternal, SVG menghadirkan risiko XSS dan SSRF yang signifikan jika SVG yang tidak tepercaya ditampilkan.
Vektor Serangan yang Diketahui
- Cross-Site Scripting (XSS) tersimpan melalui tag '<script>' yang disematkan atau penangan kejadian 'onload='.
- Serangan XML External Entity (XXE) yang membaca file server lokal saat diurai pada server backend.
- Ekspansi entitas XML Billion Laughs yang menyebabkan penolakan layanan.
Praktik Terbaik Defensif: Selalu bersihkan SVG dengan DOMPurify sebelum menyematkannya, atau sajikan SVG dengan 'Content-Security-Policy: default-src 'none'' atau sebagai tag '<img>' yang otomatis menonaktifkan skrip.
Asal-Usul & Tonggak Sejarah
Keunggulan & Kelebihan Utama
- Tidak bergantung pada resolusi: garis dan tipografi tetap tajam pada skala tampilan atau cetak apa pun.
- Ukuran file yang sangat kecil untuk logo, ikon, dan elemen antarmuka UI.
- Mendukung skrip dan pengaturan gaya sepenuhnya melalui CSS dan JavaScript di dalam DOM peramban.
Keterbatasan Teknis & Kekurangan
- Tidak cocok untuk foto atau gambar nada kontinu yang kompleks.
- Jalur vektor kompleks dengan ribuan node dapat memperlambat proses render di CPU dan menguras baterai.
- Karena XML memungkinkan penyematan skrip, unggahan yang tidak tepercaya harus disanitasi dengan ketat sebelum dirender.
Fakta Teknis Menarik
- Gzip dapat mengurangi ukuran beberapa file SVG secara signifikan; pengurangannya bergantung pada isi dokumen dan pengaturan kompresi.
- Atribut viewBox mendefinisikan kanvas koordinat abstrak yang memetakan secara dinamis ke piksel layar fisik.
- Peramban web pada awalnya tidak memiliki mesin SVG bawaan, sehingga Adobe mendistribusikan plugin peramban Adobe SVG Viewer sebelum dukungan SVG bawaan di peramban menjadi mapan sekitar tahun 2011.
Pertanyaan Teknis yang Sering Diajukan
Apakah file SVG dapat berisi kode berbahaya?
Ya. Karena SVG adalah XML yang valid, berkas ini dapat berisi JavaScript tersemat ('<script>') yang dieksekusi jika SVG dimuat langsung di peramban atau dibuka di elemen '<svg>' sebaris. Menyajikan SVG melalui tag '<img>' secara otomatis menetralkan eksekusi skrip.
Kapan saya harus menggunakan SVG alih-alih PNG?
Gunakan SVG untuk ikon, logo, grafik, ilustrasi, dan tipografi yang memerlukan penskalaan tajam di semua ukuran layar dan ukuran file yang kecil. Gunakan PNG atau WebP untuk foto.
Bagaimana cara mengoptimalkan file SVG yang besar atau kompleks?
Anda dapat mengoptimalkan jalur vektor dengan menghapus metadata berlebih, komentar editor (dari Inkscape atau Illustrator), grup tak terlihat, dan deklarasi namespace yang tidak digunakan melalui alat seperti SVGO atau kompresi SVG.
Pasangan Konversi SVG Terkait
Mengonversi berkas vektor SVG ke gambar raster PNG mengubah grafis berbasis kode yang dapat diskalakan menjadi susunan piksel berukuran tetap agar kompatibel dengan berbagai aplikasi.
Membungkus gambar raster PNG di dalam wadah vektor XML SVG untuk penskalaan web yang responsif dan integrasi tata letak yang kompatibel dengan vektor.
Ubah rekaman gambar vektor GDI Windows 16-bit lama menjadi jalur SVG modern yang dapat diskalakan tanpa kehilangan resolusi.
Ubah grafis Windows Enhanced Metafile 32-bit menjadi vektor SVG yang bersih dan responsif untuk peramban web dan perangkat lunak desain.
Mengonversi gambar DXF ke ekspor SVG CAD mengubah data vektor teknik yang kompleks menjadi grafis XML ringan untuk peramban web dan editor vektor.
Mengonversi Grafik Vektor Skalabel ke Format Pertukaran Gambar menerjemahkan vektor visual yang siap web ke dalam koordinat matematis tepat yang diperlukan oleh perangkat lunak desain berbantuan komputer.
Bagikan logo atau ilustrasi SVG sebagai PDF satu halaman. Jalur yang dapat diskalakan diubah menjadi gambar beresolusi tetap, sehingga detail vektor tidak dapat dipulihkan dengan memperbesar tampilan.