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.

Pratonton / Editor SVG

Latar belakang berpetak

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

Sumber SVG

Pratonton

Butiran teknikal

Cara Pratonton / Editor SVG Berfungsi

Apa yang Alat Ini Lakukan

Pratonton / Editor SVG merender penanda SVG secara langsung semasa anda mengeditnya dan mengekstrak metadata (lebar, tinggi, viewBox, kiraan elemen) untuk pemeriksaan pantas. Satu togol menambah latar belakang berkotak-kotak supaya anda boleh melihat kawasan lutsinar dengan jelas. Alat ini juga menghasilkan data URI berkod URL yang sesuai untuk digunakan terus dalam CSS background-image atau atribut src HTML.

Kes Penggunaan Pembangun yang Lazim

Pereka ikon menguji matematik viewBox dan lebar stroke pada saiz berbeza. Pembangun frontend mengesahkan bahawa ikon SVG yang diedit tangan masih dirender dengan betul selepas pengoptimuman (manual atau melalui SVGO). Pembangun e-mel menjana versi data URI yang padat bagi tanda jenama untuk disisipkan dalam HTML. Pendidik menunjukkan bagaimana atribut seperti preserveAspectRatio dan overflow mempengaruhi render.

Format Data, Jenis, atau Varian

Input ialah penanda XML SVG mentah. Output ialah SVG yang sama dirender dalam iframe bersandbox serta data URI berkod URL (data:image/svg+xml;charset=utf-8,…). Metrik kiraan elemen mengira setiap tag pembuka (termasuk defs, g, gradien, dan elemen bersarang yang serupa), memberikan gambaran kasar tentang kerumitan. Nilai atribut yang diekstrak ditunjukkan dalam bentuk mentah.

Perangkap Lazim dan Kes Tepi

Sumber luaran yang dirujuk oleh elemen `use` atau `image` dengan href tidak akan dimuatkan di dalam iframe bersandbox. JavaScript sebaris di dalam elemen script disekat oleh sandbox — animasi sepatutnya bergantung pada SMIL atau keyframe CSS. SVG yang bergantung pada fon tertentu yang tidak dipasang pada sistem akan menggunakan fon lalai; benamkan fon atau gunakan fon sistem untuk pratonton.

Bila Perlu Menggunakan Alat Ini Berbanding Kod

Gunakan alat pelayar untuk reka bentuk ikon sekali-sekala, penyahpepijatan, atau menjana data URI. Untuk aset produksi, jalankan SVG melalui SVGO dengan konfigurasi yang ditala untuk membuang metadata dan meminimumkan penanda, dan gunakan sistem sprite atau integrasi bundler yang betul untuk memuatkan ikon dalam aplikasi anda daripada menyisipkan data URI di mana-mana.