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.

SVG pregled / uređivač

Karirana pozadina

širina: 200visina: 200viewBox: 0 0 200 2007 elemenata

SVG izvor

Pretpregled

Tehnički detalji

Kako radi SVG Preview / Editor

Što alat radi

SVG Preview / Editor uživo renderira SVG markup dok ga uređujete i izdvaja metapodatke (širina, visina, viewBox, broj elemenata) za brzu provjeru. Prekidač dodaje šahovsku pozadinu kako biste jasno vidjeli prozirna područja. Alat također generira URL-kodirani data URI prikladan za izravnu upotrebu u CSS background-image ili HTML src atributima.

Uobičajeni slučajevi upotrebe za razvojne programere

Dizajneri ikona testiraju viewBox matematiku i debljine poteza pri različitim veličinama. Frontend developeri provjeravaju renderira li se ručno uređena SVG ikona i dalje ispravno nakon optimizacije (ručno ili putem SVGO-a). Email developeri generiraju kompaktne data URI verzije oznaka brenda za ugradnju u HTML. Edukatori pokazuju kako atributi poput preserveAspectRatio i overflow utječu na renderiranje.

Formati podataka, vrste ili varijante

Ulaz je sirovi SVG XML markup. Izlaz je isti SVG renderiran u sandboxiranom iframeu plus URL-kodirani data URI (data:image/svg+xml;charset=utf-8,…). Metrika broja elemenata broji svaku otvarajuću oznaku (uključujući defs, g, gradijente i slične ugniježđene elemente), dajući okvirni osjećaj složenosti. Izdvojene vrijednosti atributa prikazuju se u sirovom obliku.

Uobičajene zamke i rubni slučajevi

Vanjski resursi na koje se referiraju elementi `use` ili `image` s href neće se učitati unutar sandboxiranog iframea. Inline JavaScript unutar script elemenata blokiran je sandboxom — animacije bi se trebale oslanjati na SMIL ili CSS keyframeove. SVG-ovi koji ovise o određenom fontu koji nije instaliran u sustavu vratit će se na zadani; ugradite fontove ili koristite sistemske fontove za preglede.

Kada koristiti ovaj alat umjesto koda

Koristite alat u pregledniku za jednokratni dizajn ikona, debugiranje ili generiranje data URI-ja. Za produkcijske resurse provucite SVG-ove kroz SVGO s podešenom konfiguracijom kako biste uklonili metapodatke i minimizirali markup te koristite sustav spriteova ili odgovarajuću integraciju bundlera za učitavanje ikona u aplikaciji umjesto da posvuda ugrađujete data URI-je.