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

Skakternet baggrund

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

SVG-kilde

Forhåndsvisning

Tekniske detaljer

Sådan fungerer SVG Preview / Editor

Hvad værktøjet gør

SVG Preview / Editor renderer SVG-markup live, mens du redigerer, og udtrækker metadata (bredde, højde, viewBox, antal elementer) til hurtig inspektion. En toggle tilføjer en ternet baggrund, så du tydeligt kan se gennemsigtige områder. Værktøjet genererer også en URL-kodet data-URI, der kan bruges direkte i CSS background-image eller i HTML src-attributter.

Almindelige anvendelsestilfælde for udviklere

Ikondesignere tester viewBox-matematik og stregtykkelser i forskellige størrelser. Frontendudviklere verificerer, at et håndredigeret SVG-ikon stadig renderer korrekt efter optimering (manuelt eller via SVGO). E-mailudviklere genererer kompakte data-URI-versioner af brandmærker til inline-brug i HTML. Undervisere demonstrerer, hvordan attributter som preserveAspectRatio og overflow påvirker rendering.

Dataformater, typer eller varianter

Input er rå SVG XML-markup. Output er den samme SVG renderet i en sandboxet iframe plus en URL-kodet data-URI (data:image/svg+xml;charset=utf-8,…). Metrikken for antal elementer tæller hvert åbningstag (inklusive defs, g, gradienter og lignende indlejrede elementer) og giver en grov fornemmelse af kompleksitet. Udtrukne attributværdier vises i rå form.

Almindelige faldgruber og kanttilfælde

Eksterne ressourcer, der refereres af `use`- eller `image`-elementer med href, indlæses ikke inde i den sandboxede iframe. Inline JavaScript i script-elementer blokeres af sandboxen — animationer bør baseres på SMIL eller CSS keyframes. SVG'er, der afhænger af en bestemt skrifttype, som ikke er installeret på systemet, vil falde tilbage til en standard; indlejr skrifttyper eller brug systemskrifttyper til forhåndsvisninger.

Hvornår du skal bruge dette værktøj vs. kode

Brug browserværktøjet til engangs-ikondesign, debugging eller generering af data-URI'er. Til produktionsassets bør du køre SVG'er gennem SVGO med en tilpasset konfiguration for at fjerne metadata og minificere markup og bruge et sprite-system eller korrekt bundler-integration til at indlæse ikoner i din app i stedet for at inline data-URI'er overalt.