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.

Náhľad / editor SVG

Šachovnicové pozadie

šírka: 200výška: 200viewBox: 0 0 200 2007 prvkov

Zdroj SVG

Náhľad

Technické podrobnosti

Ako funguje SVG Preview / Editor

Čo nástroj robí

SVG Preview / Editor vykresľuje SVG značkovanie naživo počas úprav a extrahuje metadáta (šírka, výška, viewBox, počet prvkov) na rýchlu kontrolu. Prepínač pridá šachovnicové pozadie, aby ste jasne videli priehľadné oblasti. Nástroj tiež vytvorí URL-kódovanú data URI vhodnú na priame použitie v CSS background-image alebo v HTML atribútoch src.

Bežné prípady použitia pre vývojárov

Dizajnéri ikon testujú výpočty viewBox a hrúbky ťahov pri rôznych veľkostiach. Frontend vývojári overujú, že ručne upravená SVG ikona sa po optimalizácii (manuálne alebo cez SVGO) stále vykresľuje správne. E-mailoví vývojári generujú kompaktné verzie data URI pre značkové prvky na inline použitie v HTML. Učitelia ukazujú, ako atribúty ako preserveAspectRatio a overflow ovplyvňujú vykresľovanie.

Dátové formáty, typy alebo varianty

Vstupom je surové SVG XML značkovanie. Výstupom je to isté SVG vykreslené v sandboxovanom iframe plus URL-kódovaná data URI (data:image/svg+xml;charset=utf-8,…). Metrika počtu prvkov počíta každý otvárací tag (vrátane defs, g, gradientov a podobných vnorených prvkov), čím dáva približný obraz o zložitosti. Extrahované hodnoty atribútov sa zobrazujú v surovej podobe.

Bežné úskalia a okrajové prípady

Externé zdroje odkazované prvkami `use` alebo `image` s href sa v sandboxovanom iframe nenačítajú. Inline JavaScript v prvkoch script je sandboxom blokovaný — animácie by sa mali spoliehať na SMIL alebo CSS keyframes. SVG, ktoré závisia od konkrétneho písma, ktoré nie je nainštalované v systéme, sa prepnú na predvolené; pre náhľady písma vkladajte alebo používajte systémové písma.

Kedy použiť tento nástroj vs. kód

Nástroj v prehliadači použite na jednorazový návrh ikon, ladenie alebo generovanie data URI. Pre produkčné assety prežeňte SVG cez SVGO s vyladenou konfiguráciou na odstránenie metadát a minifikáciu značkovania a používajte sprite systém alebo správnu integráciu bundlera na načítanie ikon v aplikácii namiesto toho, aby ste všade inline vkladali data URI.