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-forhåndsvisning / redigering

Rutete bakgrunn

bredde: 200høyde: 200viewBox: 0 0 200 2007 elementer

SVG-kilde

Forhåndsvisning

Tekniske detaljer

Slik fungerer SVG-forhåndsvisning / -editor

Hva verktøyet gjør

SVG-forhåndsvisning / -editor renderer SVG-markup live mens du redigerer den og henter ut metadata (bredde, høyde, viewBox, antall elementer) for rask inspeksjon. En bryter legger til en sjakkmønstret bakgrunn slik at du tydelig kan se transparente områder. Verktøyet lager også en URL-kodet data-URI som kan brukes direkte i CSS background-image eller i HTML src-attributter.

Vanlige bruksområder for utviklere

Ikondesignere tester viewBox-matematikk og strekbredder i ulike størrelser. Frontend-utviklere verifiserer at et håndredigert SVG-ikon fortsatt rendres korrekt etter optimalisering (manuelt eller via SVGO). E-postutviklere genererer kompakte data-URI-versjoner av merkeelementer for innlining i HTML. Lærere demonstrerer hvordan attributter som preserveAspectRatio og overflow påvirker rendring.

Dataformater, typer eller varianter

Inndata er rå SVG XML-markup. Utdata er den samme SVG-en rendret i en sandkasset iframe pluss en URL-kodet data-URI (data:image/svg+xml;charset=utf-8,…). Metrikken for antall elementer teller hver åpningstagg (inkludert defs, g, gradienter og lignende nestede elementer), og gir en grov indikasjon på kompleksitet. Uthentede attributtverdier vises i rå form.

Vanlige fallgruver og kanttilfeller

Eksterne ressurser referert av `use`- eller `image`-elementer med href lastes ikke inn i den sandkassede iframe-en. Inline JavaScript i script-elementer blokkeres av sandkassen — animasjoner bør baseres på SMIL eller CSS keyframes. SVG-er som er avhengige av en bestemt font som ikke er installert i systemet vil falle tilbake til en standard; bygg inn fonter eller bruk systemfonter for forhåndsvisninger.

Når du bør bruke dette verktøyet vs. kode

Bruk nettleserverktøyet for engangs ikon-design, feilsøking eller generering av data-URI-er. For produksjonsressurser, kjør SVG-er gjennom SVGO med en tilpasset konfigurasjon for å fjerne metadata og minifisere markup, og bruk et spritesystem eller riktig bundler-integrasjon for å laste ikoner i appen din i stedet for å inline data-URI-er overalt.