What does the SVG Preview tool do?

It renders SVG markup live as you type, shows extracted attributes (width, height, viewBox), and produces a data: URI you can paste straight into CSS or HTML. Useful for debugging SVG icons, gradients, and viewBox math without spinning up a project.

Is the preview sandboxed?

Yes. The SVG renders inside a sandboxed iframe to isolate it from the rest of the page. Inline JavaScript inside the SVG won't run.

Can I download or copy the SVG?

Yes — copy the raw SVG text or the URL-encoded data: URI from the controls in the header.

Pratinjau / Editor SVG

Latar belakang kotak-kotak

lebar: 200tinggi: 200viewBox: 0 0 200 2007 elemen

Sumber SVG

Pratinjau

Detail teknis

Cara Kerja Pratinjau / Editor SVG

Apa yang Dilakukan Alat Ini

Pratinjau / Editor SVG merender markup SVG secara live saat Anda mengeditnya dan mengekstrak metadata (width, height, viewBox, jumlah elemen) untuk inspeksi cepat. Sebuah toggle menambahkan latar belakang kotak-kotak agar Anda dapat melihat area transparan dengan jelas. Alat ini juga menghasilkan data URI yang di-URL-encode yang cocok untuk digunakan langsung pada CSS background-image atau atribut src HTML.

Kasus Penggunaan Umum untuk Developer

Desainer ikon menguji perhitungan viewBox dan ketebalan stroke pada berbagai ukuran. Developer frontend memverifikasi bahwa ikon SVG yang diedit manual masih dirender dengan benar setelah optimasi (manual atau melalui SVGO). Developer email menghasilkan versi data URI yang ringkas dari logo merek untuk di-inline di HTML. Pendidik mendemonstrasikan bagaimana atribut seperti preserveAspectRatio dan overflow memengaruhi rendering.

Format Data, Tipe, atau Varian

Input adalah markup XML SVG mentah. Output adalah SVG yang sama yang dirender dalam iframe tersandbox ditambah data URI yang di-URL-encode (data:image/svg+xml;charset=utf-8,…). Metrik jumlah elemen menghitung setiap tag pembuka (termasuk defs, g, gradients, dan elemen bersarang serupa), memberikan gambaran kasar tentang kompleksitas. Nilai atribut yang diekstrak ditampilkan dalam bentuk mentah.

Kesalahan Umum dan Kasus Tepi

Resource eksternal yang dirujuk oleh elemen `use` atau `image` dengan href tidak akan dimuat di dalam iframe tersandbox. JavaScript inline di dalam elemen script diblokir oleh sandbox — animasi sebaiknya mengandalkan SMIL atau CSS keyframes. SVG yang bergantung pada font tertentu yang tidak terpasang di sistem akan fallback ke default; sematkan font atau gunakan font sistem untuk pratinjau.

Kapan Menggunakan Alat Ini vs Kode

Gunakan alat browser untuk desain ikon sekali pakai, debugging, atau menghasilkan data URI. Untuk aset produksi, jalankan SVG melalui SVGO dengan konfigurasi yang disetel untuk menghapus metadata dan meminimalkan markup, serta gunakan sistem sprite atau integrasi bundler yang tepat untuk memuat ikon di aplikasi Anda alih-alih meng-inline data URI di mana-mana.