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

Pregled

Tehnički detalji

Kako radi SVG pregled / editor

Šta alat radi

SVG Preview / Editor renderuje SVG markup uživo dok ga uređujete i izvlači metapodatke (width, height, viewBox, broj elemenata) za brzu inspekciju. Prekidač dodaje šahovsku pozadinu kako biste jasno videli providne delove. Alat takođe pravi URL-enkodirani data URI pogodan za direktnu upotrebu u CSS background-image ili HTML src atributima.

Uobičajeni slučajevi upotrebe za programere

Dizajneri ikonica testiraju viewBox matematiku i debljine poteza na različitim veličinama. Frontend programeri proveravaju da li ručno izmenjena SVG ikonica i dalje renderuje ispravno nakon optimizacije (ručno ili preko SVGO). Email programeri generišu kompaktne data URI verzije brend oznaka za inline upotrebu u HTML-u. Predavači pokazuju kako atributi poput preserveAspectRatio i overflow utiču na renderovanje.

Formati podataka, tipovi ili varijante

Ulaz je sirovi SVG XML markup. Izlaz je isti SVG renderovan u sandbox-ovanom iframe-u plus URL-enkodirani data URI (data:image/svg+xml;charset=utf-8,…). Metрика broja elemenata broji svaku otvarajuću oznaku (uključujući defs, g, gradijente i slične ugnježdene elemente), dajući grubu predstavu o složenosti. Izvučene vrednosti atributa prikazuju se u sirovom obliku.

Uobičajene greške i rubni slučajevi

Spoljni resursi na koje se referenciraju `use` ili `image` elementi sa href neće se učitati unutar sandbox-ovanog iframe-a. Inline JavaScript unutar script elemenata je blokiran sandbox-om — animacije treba da se oslanjaju na SMIL ili CSS keyframes. SVG-ovi koji zavise od određenog fonta koji nije instaliran u sistemu preći će na podrazumevani; ugradite fontove ili koristite sistemske fontove za preglede.

Kada koristiti ovaj alat umesto koda

Koristite alat u pregledaču za jednokratni dizajn ikonica, debagovanje ili generisanje data URI-ja. Za produkcione resurse, provucite SVG-ove kroz SVGO sa podešenom konfiguracijom da uklonite metapodatke i minifikujete markup, i koristite sprite sistem ili odgovarajuću integraciju bundler-a za učitavanje ikonica u aplikaciji umesto da svuda ubacujete data URI-je.