Penampil SVG Gratis

Tentang SVG

SVG (Scalable Vector Graphics) adalah format XML untuk grafis vektor. Berbeda dengan format raster (PNG, JPG), gambar SVG beradaptasi dengan sempurna ke ukuran apa pun tanpa kehilangan kualitas. Mereka ringan, dapat diakses, dan didukung secara luas oleh browser modern.

Pertanyaan umum

Apa itu SVG?

SVG (Scalable Vector Graphics) adalah format grafis 2D yang menggunakan kurva matematika dan jalur alih-alih piksel. Ini membuat file SVG bebas resolusi, mereka tetap tajam pada ukuran apa pun, dari ikon kecil hingga papan reklame.

Apa perbedaan antara SVG dan PNG?

PNG adalah raster (berbasis piksel) dan memiliki ukuran tetap, memperbesarnya menyebabkan blur. SVG adalah vektor (berbasis matematika) dan diperbesar tanpa batas tanpa kehilangan. SVG ideal untuk logo, ikon, dan ilustrasi. PNG lebih cocok untuk foto dan gambar kompleks.

Bisakah saya mengedit kode SVG secara langsung?

Ya, SVG adalah teks XML, jadi Anda dapat mengeditnya di editor teks apa pun. Anda dapat mengubah warna, ukuran, posisi, dan lainnya dengan memodifikasi atribut. Gunakan penampil ini untuk menempel kode Anda dan melihat perubahan secara seketika.

SVG memenangkan perang format, dua kali

Sebelum SVG ada, dua format vektor yang bersaing diajukan ke W3C pada awal 1998. PGML (Precision Graphics Markup Language), diajukan pada 10 April 1998 oleh Adobe, IBM, Netscape dan Sun, berakar pada model pencitraan Adobe PostScript. VML (Vector Markup Language), diajukan pada 13 Mei 1998 oleh Microsoft, Macromedia, Hewlett-Packard, Autodesk dan Visio, menggunakan sintaks yang dekat dengan apa yang sudah dikirimkan Microsoft di Office 2000 dan Internet Explorer 5. W3C tidak memilih pemenang. Sebaliknya, W3C membentuk Kelompok Kerja SVG yang diketuai oleh Chris Lilley untuk merancang satu standar tunggal yang akan menggantikan keduanya. Working Draft publik pertama SVG muncul pada 11 Februari 1999.

SVG 1.0 diterbitkan sebagai Rekomendasi W3C pada 4 September 2001, dengan editor Jon Ferraiolo (Adobe) dan kontributor dari Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark dan Xerox, salah satu koalisi vendor terluas dari spesifikasi W3C mana pun. SVG 1.1 menyusul pada 14 Januari 2003 dan tetap menjadi basis de-facto web modern; Second Edition-nya (16 Agustus 2011) menggabungkan errata. SVG 1.1 membagi spesifikasi menjadi modul-modul dan mendefinisikan tiga profil (Full, Basic, Tiny). VML terus dikirimkan di IE 5 hingga 9 dan digunakan secara internal oleh Microsoft Office, tetapi tidak lagi didukung di IE 9 (Maret 2011) demi SVG natif dan praktis tidak digunakan lagi di IE 11. SVG 2 telah menjadi Working Draft W3C sejak 2016 tanpa tanggal Rekomendasi yang terlihat; browser mengirimkan fitur secara bertahap sesuai permintaan interop.

Apa yang membuat SVG benar-benar berbeda

• Hanya XML. Seluruh ikon dapat terdiri dari satu baris: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>. Karena SVG adalah teks, ia dapat di-diff dan dikontrol versinya (Git memperlakukannya seperti kode sumber), dibuat di sisi server, diindeks oleh mesin pencari (teks di dalam <text> dapat di-crawl), dikompres dengan efisien (gzip dan brotli menyukai token XML yang berulang, tipikal pengurangan 60-80%), dan diedit di editor teks mana pun tanpa perangkat lunak khusus.
• Independensi resolusi. Karena path SVG didefinisikan sebagai kurva dan koordinat matematis, bukan grid piksel, SVG dirender secara identik pada semua tingkat zoom dan kepadatan piksel perangkat apa pun. Tidak ada aset Retina «@2x» atau «@3x» yang perlu dikelola. Ikon tunggal 2 KB dapat diskalakan dari favicon 16×16 hingga ilustrasi hero 400×400 tanpa kehilangan kualitas sedikit pun.
• Ukuran file kecil untuk seni garis. Ikon satu warna berukuran 24×24 yang khas adalah ~200-500 byte sebagai SVG vs 1-3 KB sebagai PNG transparan. Logo perusahaan datar adalah 1-5 KB sebagai SVG vs 15-50 KB sebagai PNG. Satu set ikon berisi 1.000 simbol adalah ~50 KB sebagai satu sprite SVG vs 2-5 MB sprite PNG multi-DPI.
• Dapat disematkan dalam HTML dan diberi gaya dengan CSS. Setelah SVG disematkan secara inline, setiap elemen menjadi bagian dari DOM. CSS dapat mengalamatnya: .icon-stroke { stroke: currentColor; stroke-width: 2; }. Properti tunggal currentColor adalah yang membuat sistem ikon modern bekerja, sebuah ikon mewarisi warna teks sekitarnya secara otomatis.
• Dapat dianimasikan tiga cara berbeda. Animasi/transisi CSS (pendekatan modern yang disukai), SMIL deklaratif XML di dalam SVG (<animate>, <animateTransform>, <animateMotion>), atau JavaScript melalui DOM SVG. SMIL masih bekerja di Chrome, Firefox dan Safari hari ini setelah Chrome membatalkan rencana penghapusannya pada 2015.
• Dapat dimanipulasi secara terprogram. document.querySelector('#chart-bar-3').setAttribute('height', newValue). Ini adalah fondasi D3.js, Vega, Plotly, Highcharts, ApexCharts dan ekosistem visualisasi data lainnya.
• Aksesibel secara default. <title> muncul sebagai tooltip saat diarahkan kursor. <desc> diekspos ke pembaca layar. Atribut ARIA (role="img", aria-label, aria-labelledby, aria-describedby) bekerja normal. Dibandingkan elemen <canvas> (kotak hitam bagi teknologi asistif), SVG sepenuhnya aksesibel.

Dukungan browser telah universal sejak 2011

SVG natif hadir di Firefox 1.5 (November 2005), Opera 9 (Juni 2006), Safari 3.0 (Juni 2007), Chrome 1.0 (September 2008), dan akhirnya Internet Explorer 9 (Maret 2011): yang menjadi titik balik. Sebelum IE 9, situs harus mengirimkan shim konversi VML atau plugin Adobe SVG Viewer untuk mendukung IE 6-8. iOS Safari memiliki dukungan SVG parsial sejak peluncuran dan dukungan penuh dari iOS 5 (Oktober 2011); Android mencapainya dengan Honeycomb 3.0 (Februari 2011) dan ChromeWebView menggantikan browser AOSP sekitar Android 4.4 (2013). Batas bawah praktis untuk SVG-sebagai-gambar (<img src="x.svg">) adalah sekitar akhir 2011. Pada 2026, tidak ada proyek web yang realistis perlu mendukung browser tanpa SVG penuh.

SVG bukan sekadar format gambar, ini adalah jenis dokumen yang dapat dieksekusi

Ini adalah satu hal terpenting yang perlu dipahami tentang keamanan SVG. SVG berbahaya dapat menyertakan blok <script>, event handler (onload, onclick, onmouseover), atau tautan <a xlink:href="javascript:...">. Ketika SVG semacam itu dimuat dalam konteks aktif (melalui <object>, <iframe>, navigasi browser ke URL .svg, atau melalui penyisipan innerHTML), browser mengeksekusi skripnya. Situs yang mengizinkan SVG yang diunggah untuk disematkan dengan cara ini dapat di-XSS oleh pengunggah.

Tag <img> adalah jalur aman. Ketika SVG dimuat melalui <img src="x.svg"> atau sebagai background-image CSS, browser menjalankan SVG dalam mode sandbox tanpa skrip dan tanpa pengambilan eksternal. Skrip di dalamnya tidak dieksekusi, pengambilan eksternal diblokir, dan SVG tidak dapat berinteraksi dengan halaman induk. CSS di dalam SVG dirender, tetapi semua yang berpotensi memiliki efek samping dinonaktifkan. Ini adalah cara yang direkomendasikan untuk menggunakan SVG hari ini.

Untuk pertahanan di sisi server, OWASP merekomendasikan sanitasi SVG yang diunggah dengan DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) atau Bleach (Python), dengan menghapus <script>, <foreignObject> dan semua handler on*, serta menolak nilai xlink:href yang dimulai dengan javascript: atau data:. Menetapkan Content-Security-Policy yang ketat pada halaman yang menampilkan SVG pengguna dan melayani SVG yang diunduh dengan Content-Disposition: attachment adalah tambahan berlapis. Penampil ini sepenuhnya berbasis klien dan SVG tidak pernah meninggalkan perangkat Anda, tetapi jika Anda menyematkan SVG yang disediakan pengguna di situs publik, sanitasilah terlebih dahulu.

SVG vs PNG vs JPG vs WebP vs AVIF, kapan menggunakan yang mana

• Logo, ikon, ilustrasi, diagram, bagan, infografis dengan teks: SVG. Dapat diskalakan ke ukuran berapa pun, file kecil, dapat diwarnai ulang melalui CSS, teks tetap berupa teks (dapat dipilih, diterjemahkan, diindeks).
• Foto: JPG (atau AVIF/WebP untuk stack modern). Pengkodean vektor untuk foto akan sangat besar ukurannya.
• Tangkapan layar: PNG (atau WebP). Raster lossless mempertahankan UI yang sempurna piksel.
• Stiker UI animasi: SVG (CSS atau SMIL). Lebih kecil dan lebih tajam dari GIF, lebih halus dari video untuk loop pendek.

WebP (Google, 2010) dan AVIF (AOMedia, 2019) adalah format raster modern yang bersaing dengan PNG dan JPG, bukan dengan SVG; keduanya bukan vektor. Kegagalan SVG terjadi pada foto dan gambar nada kontinu: merepresentasikan setiap piksel sebagai primitif vektor membuat file jauh lebih besar dari JPEG. Untuk kasus ikon dan logo, SVG tetap tak tertandingi.

Mengoptimalkan SVG Anda dengan SVGO

SVG yang diekspor dari Adobe Illustrator, Sketch, Figma atau Inkscape biasanya membawa overhead yang besar: metadata khusus editor (<sodipodi:namedview>, <inkscape:groupmode>), nama layer dan hierarki grup default, presisi berlebihan dalam koordinat path (d="M 12.000023 18.999991 ..."), atribut gaya inline yang bisa menjadi kelas CSS, blok komentar yang mengidentifikasi editor.

SVGO (SVG Optimizer), awalnya ditulis oleh Kir Belevich pada tahun 2012, adalah alat industri standar. Ini adalah alat baris perintah Node.js dengan sekitar 50 plugin yang menangani optimisasi individual: removeComments, removeMetadata, removeEditorsNSData, convertColors (mengubah rgb(255,0,0) menjadi #f00), convertPathData (menciutkan perintah path dan menghapus presisi redundan), mergePaths, cleanupNumericValues (membulatkan ke presisi yang dapat dikonfigurasi, default 3 desimal). Kompresi tipikal adalah 30-70% file lebih kecil untuk SVG yang dibuat dari alat desain, terkadang mencapai 80% pada ekspor Inkscape karena metadata editor yang berat. SVGOMG (svgomg.net) adalah antarmuka web untuk SVGO oleh Jake Archibald (Google) dan versi GUI yang paling banyak digunakan.

Lanskap pustaka ikon

Pustaka ikon SVG mendominasi stack web modern. Set besar yang akan Anda temui adalah Heroicons (Tailwind Labs, ~280 ikon, MIT), Lucide (fork dari Feather, ~1.400 ikon), Bootstrap Icons (~2.000), Material Symbols (Google, ~3.000 lintas beberapa bobot), Font Awesome 6 (~30.000 gratis + Pro), Phosphor Icons (~9.000 lintas enam bobot), dan Tabler Icons (~5.200). Agregator Iconify menampung lebih dari 200.000 ikon sumber terbuka dari 150+ set ikon melalui satu API; seorang developer dapat menulis <iconify-icon icon="mdi:home"></iconify-icon> dan framework mengambil SVG ikon tersebut sesuai permintaan. Pergeseran dari icon-font (era Font Awesome 4 / Glyphicons) ke ikon SVG terjadi sekitar 2017-2019, didorong oleh aksesibilitas, kemampuan pewarnaan ulang, dan penghapusan FOUT (flash of unstyled text ketika font ikon belum dimuat).

Pertanyaan lainnya

Apa perbedaan antara viewBox dan width/height?

viewBox="0 0 100 100" mendefinisikan sistem koordinat pengguna internal SVG, «kanvas alami»-nya adalah 100×100 unit, terlepas dari ukuran piksel yang dirender. width dan height menetapkan ukuran tampilan yang dirender. Dengan keduanya hadir, SVG menskalakan viewBox agar sesuai dengan kotak yang dirender. preserveAspectRatio (default xMidYMid meet) mengontrol bagaimana penskalaan menangani ketidaksesuaian rasio aspek: meet mempertahankan rasio dan memusatkan, none meregangkan, slice memotong untuk mengisi. Menetapkan hanya viewBox dan membiarkan CSS mengontrol width dan height adalah praktik terbaik modern untuk sistem ikon.

Mengapa ikon SVG saya terlihat buram di layar?

Hampir selalu salah satu dari tiga penyebab: (1) SVG dirender ke ukuran piksel tetap yang tidak cocok dengan rasio aspek viewBox, sehingga browser meregangkannya; (2) SVG diekspor dari alat desain dengan koordinat sub-piksel («M 12.5 7.5 L ...»), dan anti-aliasing browser berusaha semaksimal mungkin dengan tepi bukan bilangan bulat; atau (3) preserveAspectRatio="none" telah ditetapkan, yang memungkinkan SVG diregangkan secara sewenang-wenang. Perbaiki dengan memastikan container yang dirender cocok dengan rasio viewBox, membuat koordinat bilangan bulat dalam opsi ekspor alat desain Anda, dan menghindari preserveAspectRatio="none" kecuali Anda memang menginginkan peregangan.

Dapatkah saya menggunakan SVG sebagai favicon?

Ya. <link rel="icon" type="image/svg+xml" href="icon.svg"> didukung di Chrome 80+, Firefox 41+ dan Safari 14+. Pola umum adalah mengirimkan satu favicon SVG untuk browser modern dan fallback ICO (<link rel="icon" sizes="any" href="favicon.ico">) untuk klien lama. Favicon SVG juga dapat menggunakan kueri media prefers-color-scheme di dalam SVG untuk beralih antara varian tema terang dan gelap secara otomatis.

Apakah atribut d pada path benar-benar bahasa mini?

Ya, dan mempelajari selusin lebih perintah adalah cara paling dekat untuk belajar membaca SVG secara manual. Perintah-perintahnya adalah: M/m (pindah ke, absolut/relatif), L/l (garis ke), H/h (garis horizontal), V/v (garis vertikal), C/c (Bezier kubik dengan dua titik kontrol), S/s (kubik halus, mencerminkan titik kontrol sebelumnya), Q/q (Bezier kuadrat), T/t (kuadrat halus), A/a (busur elips, yang paling kompleks), dan Z/z (tutup path). Icon d tipikal seperti M5 12h14M12 5l7 7-7 7 berarti «pindah ke (5,12), garis horizontal 14 unit, pindah ke (12,5), garis 7-kanan 7-bawah, garis 7-kiri 7-bawah», yaitu panah ke kanan.

Alat terkait