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 eelvaade / redaktor

Ruuduline taust

laius: 200kõrgus: 200viewBox: 0 0 200 2007 elementi

SVG lähtekood

Eelvaade

Tehnilised üksikasjad

Kuidas SVG eelvaade / redaktor töötab

Mida tööriist teeb

SVG eelvaade / redaktor renderdab SVG-märgistuse reaalajas, kui seda muudad, ning eraldab metaandmed (laius, kõrgus, viewBox, elementide arv) kiireks ülevaatuseks. Lüliti lisab ruudulise tausta, et näeksid läbipaistvaid alasid selgelt. Tööriist loob ka URL-kodeeritud data URI, mis sobib kasutamiseks otse CSS-i background-image'is või HTML-i src atribuutides.

Levinud kasutusjuhtumid arendajatele

Ikoonidisainerid testivad viewBox'i arvutusi ja joonepaksusi eri suurustes. Frontend-arendajad kontrollivad, et käsitsi muudetud SVG-ikoon renderdub pärast optimeerimist (käsitsi või SVGO kaudu) endiselt õigesti. E-kirjade arendajad genereerivad brändimärkidest kompaktseid data URI versioone HTML-i sisse manustamiseks. Õpetajad demonstreerivad, kuidas atribuudid nagu preserveAspectRatio ja overflow mõjutavad renderdamist.

Andmevormingud, tüübid või variandid

Sisend on toor SVG XML-märgistus. Väljund on sama SVG, renderdatuna liivakastitud iframe'is, pluss URL-kodeeritud data URI (data:image/svg+xml;charset=utf-8,…). Elementide arvu mõõdik loendab iga avava sildi (sh defs, g, gradiendid ja sarnased pesastatud elemendid), andes ligikaudse ettekujutuse keerukusest. Eraldatud atribuutide väärtused kuvatakse toorkujul.

Levinud komistuskivid ja erijuhud

`use` või `image` elementide kaudu href-iga viidatud välised ressursid ei laadi liivakastitud iframe'is. script-elementide sees olev sisemine JavaScript on liivakasti poolt blokeeritud — animatsioonid peaksid tuginema SMIL-ile või CSS keyframe'idele. SVG-d, mis sõltuvad konkreetsest fondist, mida süsteemi pole paigaldatud, kasutavad vaikimisi asendust; eelvaadete jaoks manusta fondid või kasuta süsteemifonte.

Millal kasutada seda tööriista vs koodi

Kasuta brauseritööriista ühekordseks ikoonidisainiks, silumiseks või data URI-de genereerimiseks. Tootmisvarade jaoks lase SVG-d läbi SVGO häälestatud konfiguratsiooniga, et eemaldada metaandmed ja minimeerida märgistus, ning kasuta spritisüsteemi või korrektset bundleri integratsiooni ikoonide laadimiseks rakenduses, mitte ära sisesta data URI-sid kõikjale.