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.

Predogled / urejevalnik SVG

Šahovnica v ozadju

širina: 200višina: 200viewBox: 0 0 200 2007 elementov

Izvor SVG

Predogled

Tehnične podrobnosti

Kako deluje SVG Preview / Editor

Kaj orodje počne

SVG Preview / Editor v živo izrisuje SVG oznako med urejanjem in izlušči metapodatke (širina, višina, viewBox, število elementov) za hiter pregled. Preklop doda šahovničasto ozadje, da so prosojna območja jasno vidna. Orodje ustvari tudi URL-kodiran data URI, primeren za neposredno uporabo v CSS background-image ali v atributih HTML src.

Pogosti primeri uporabe za razvijalce

Oblikovalci ikon testirajo matematiko viewBox in širine potez pri različnih velikostih. Frontend razvijalci preverijo, da ročno urejena SVG ikona po optimizaciji (ročno ali prek SVGO) še vedno pravilno izrisuje. Razvijalci e-pošte ustvarijo kompaktne različice data URI logotipov za vdelavo v HTML. Izobraževalci pokažejo, kako atributi, kot sta preserveAspectRatio in overflow, vplivajo na izris.

Podatkovni formati, tipi ali različice

Vhod je surova SVG XML oznaka. Izhod je isti SVG, izrisan v peskovniškem iframe, ter URL-kodiran data URI (data:image/svg+xml;charset=utf-8,…). Metrika števila elementov šteje vsako začetno oznako (vključno z defs, g, gradienti in podobnimi gnezdenimi elementi), kar daje grob občutek kompleksnosti. Izluščene vrednosti atributov so prikazane v surovi obliki.

Pogoste pasti in robni primeri

Zunanji viri, na katere se sklicujejo elementi `use` ali `image` z href, se znotraj peskovniškega iframe ne bodo naložili. Vdelani JavaScript znotraj elementov script je zaradi peskovnika blokiran — animacije naj se zanašajo na SMIL ali CSS keyframes. SVG-ji, ki so odvisni od določene pisave, ki ni nameščena v sistemu, bodo uporabili privzeto; za predoglede vdelajte pisave ali uporabite sistemske pisave.

Kdaj uporabiti to orodje namesto kode

Orodje v brskalniku uporabite za enkratno oblikovanje ikon, razhroščevanje ali generiranje data URI-jev. Za produkcijska sredstva SVG-je obdelajte s SVGO z uglašeno konfiguracijo, da odstranite metapodatke in minimizirate oznako, ter uporabite sistem sprite-ov ali ustrezno integracijo z bundlerjem za nalaganje ikon v aplikaciji, namesto da povsod vdelujete data URI-je.