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.

Previzualizare / Editor SVG

Fundal în carouri

lățime: 200înălțime: 200viewBox: 0 0 200 2007 elemente

Sursă SVG

Previzualizare

Detalii tehnice

Cum funcționează previzualizarea / editorul SVG

Ce face instrumentul

Previzualizarea / editorul SVG randează live markup-ul SVG pe măsură ce îl editați și extrage metadate (lățime, înălțime, viewBox, număr de elemente) pentru inspecție rapidă. Un comutator adaugă un fundal în carouri, astfel încât să vedeți clar zonele transparente. Instrumentul produce și un data URI codificat URL, potrivit pentru utilizare directă în CSS background-image sau în atributele HTML src.

Cazuri de utilizare comune pentru dezvoltatori

Designerii de iconuri testează calculele viewBox și grosimile de contur la dimensiuni diferite. Dezvoltatorii frontend verifică dacă un icon SVG editat manual încă se randează corect după optimizare (manuală sau prin SVGO). Dezvoltatorii de e-mail generează versiuni compacte data URI ale elementelor de brand pentru a le include inline în HTML. Profesorii demonstrează cum atribute precum preserveAspectRatio și overflow afectează randarea.

Formate de date, tipuri sau variante

Intrarea este markup XML SVG brut. Ieșirea este același SVG randat într-un iframe izolat plus un data URI codificat URL (data:image/svg+xml;charset=utf-8,…). Metrica de număr de elemente numără fiecare tag de deschidere (inclusiv defs, g, degradeuri și elemente imbricate similare), oferind o idee aproximativă despre complexitate. Valorile atributelor extrase sunt afișate în formă brută.

Capcane frecvente și cazuri limită

Resursele externe referite de elemente `use` sau `image` cu href nu se vor încărca în interiorul iframe-ului izolat. JavaScript-ul inline din elementele script este blocat de sandbox — animațiile ar trebui să se bazeze pe SMIL sau pe keyframes CSS. SVG-urile care depind de un font specific care nu este instalat în sistem vor reveni la un font implicit; încorporați fonturi sau folosiți fonturi de sistem pentru previzualizări.

Când să folosești acest instrument vs cod

Folosiți instrumentul din browser pentru design de iconuri ocazional, depanare sau generarea de data URI-uri. Pentru asset-uri de producție, treceți SVG-urile prin SVGO cu o configurație ajustată pentru a elimina metadatele și a minimiza markup-ul și folosiți un sistem de sprite-uri sau integrare corectă cu bundler-ul pentru a încărca iconurile în aplicație, în loc să includeți data URI-uri peste tot.