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-preview / editor

Geruite achtergrond

breedte: 200hoogte: 200viewBox: 0 0 200 2007 elementen

SVG-bron

Voorbeeld

Technische details

Hoe de SVG Preview / Editor werkt

Wat de tool doet

De SVG Preview / Editor rendert SVG-markup live terwijl je het bewerkt en extraheert metadata (breedte, hoogte, viewBox, elementaantal) voor snelle inspectie. Een schakelaar voegt een geblokte achtergrond toe zodat je transparante gebieden duidelijk kunt zien. De tool produceert ook een URL-gecodeerde data URI die geschikt is om direct te gebruiken in CSS background-image of HTML src-attributen.

Veelvoorkomende use-cases voor ontwikkelaars

Icondesigners testen viewBox-berekeningen en stroke widths op verschillende groottes. Frontend developers controleren of een handmatig bewerkt SVG-icoon nog correct rendert na optimalisatie (handmatig of via SVGO). E-maildevelopers genereren compacte data-URI-versies van merktekens om inline in HTML te gebruiken. Docenten laten zien hoe attributen zoals preserveAspectRatio en overflow de rendering beïnvloeden.

Gegevensformaten, typen of varianten

Input is ruwe SVG-XML-markup. Output is dezelfde SVG gerenderd in een gesandboxte iframe plus een URL-gecodeerde data URI (data:image/svg+xml;charset=utf-8,…). De metric voor elementaantal telt elke openingstag (inclusief defs, g, gradients en vergelijkbare geneste elementen) en geeft een ruwe indicatie van complexiteit. Geëxtraheerde attribuutwaarden worden in ruwe vorm weergegeven.

Veelvoorkomende valkuilen en edge-cases

Externe resources waarnaar wordt verwezen door `use`- of `image`-elementen met href worden niet geladen binnen de gesandboxte iframe. Inline JavaScript in script-elementen wordt door de sandbox geblokkeerd — animaties moeten vertrouwen op SMIL of CSS keyframes. SVG's die afhankelijk zijn van een specifiek lettertype dat niet als systeemfont is geïnstalleerd vallen terug op een standaard; embed fonts of gebruik systeemfonts voor previews.

Wanneer je deze tool gebruikt vs code

Gebruik de browsertool voor eenmalig icondesign, debugging of het genereren van data URI's. Voor productie-assets laat je SVG's door SVGO lopen met een afgestemde config om metadata te verwijderen en markup te minifyen, en gebruik je een spritesysteem of goede bundler-integratie om iconen in je app te laden in plaats van overal data URI's inline te zetten.