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-förhandsvisning / redigerare

Schackrutigt bakgrundsmönster

bredd: 200höjd: 200viewBox: 0 0 200 2007 element

SVG-källa

Förhandsvisning

Tekniska detaljer

Så fungerar SVG-förhandsvisning / redigerare

Vad verktyget gör

SVG-förhandsvisning / redigerare renderar SVG-markup live medan du redigerar den och extraherar metadata (bredd, höjd, viewBox, antal element) för snabb inspektion. En växel lägger till en schackrutig bakgrund så att du tydligt kan se transparenta områden. Verktyget skapar också en URL-kodad data-URI som kan användas direkt i CSS background-image eller i HTML-attributet src.

Vanliga användningsfall för utvecklare

Ikondesigners testar viewBox-beräkningar och linjebredder i olika storlekar. Frontendutvecklare verifierar att en handredigerad SVG-ikon fortfarande renderas korrekt efter optimering (manuellt eller via SVGO). E-postutvecklare genererar kompakta data-URI-versioner av varumärkesmärken för inline-användning i HTML. Lärare demonstrerar hur attribut som preserveAspectRatio och overflow påverkar renderingen.

Dataformat, typer eller varianter

Indata är rå SVG XML-markup. Utdata är samma SVG renderad i en sandlådad iframe plus en URL-kodad data-URI (data:image/svg+xml;charset=utf-8,…). Måttet för antal element räknar varje öppningstagg (inklusive defs, g, gradienter och liknande nästlade element), vilket ger en grov uppfattning om komplexitet. Extraherade attributvärden visas i rå form.

Vanliga fallgropar och specialfall

Externa resurser som refereras av `use`- eller `image`-element med href laddas inte i den sandlådade iframen. Inline-JavaScript i script-element blockeras av sandlådan — animationer bör förlita sig på SMIL eller CSS-keyframes. SVG:er som är beroende av ett specifikt typsnitt som inte är installerat i systemet faller tillbaka till ett standardtypsnitt; bädda in typsnitt eller använd systemtypsnitt för förhandsvisningar.

När du ska använda det här verktyget jämfört med kod

Använd webbläsarverktyget för engångsdesign av ikoner, felsökning eller för att generera data-URI:er. För produktionsresurser, kör SVG:er genom SVGO med en finjusterad konfiguration för att ta bort metadata och minimera markup, och använd ett spritesystem eller korrekt bundler-integration för att ladda ikoner i din app i stället för att inline:a data-URI:er överallt.