How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML till SVG

Lägg din HTML och infogade CSS i en skalbar SVG med foreignObject. Förhandsgranska live och ladda ner som .svg, PNG eller JPG. Allt körs i din webbläsare.

HTML-kod

Bredd

Höjd

Format

Förhandsgranska

SVG-källkod

HTML i en skalbar vektor

Med SVG-elementet foreignObject kan du bädda in levande HTML och CSS i en vektorbild. Resultatet skalar snyggt och kan användas överallt där SVG accepteras — perfekt för märken, kort och avancerade etiketter.

Varför lägga HTML i en SVG?

En SVG som byggs med foreignObject är ingen skärmbild – din kod finns kvar levande i filen. Texten är fortfarande riktig text, din inbäddade CSS fortsätter att formge den och ingenting rastreras, så grafiken förblir knivskarp vid vilken zoomnivå som helst medan filen oftast bara är några kilobyte stor. Det gör metoden perfekt för README-märken, profilkort, widgetar till instrumentpaneler och alla andra sammanhang där du vill att ett formgivet HTML-utdrag ska bete sig som en enda bildfil som går att lagra, bädda in och versionshantera.

Vektor eller skärmbild – vad behöver du?

Använd det här verktyget när resultatet ska visas i en webbläsare, eftersom webbläsare renderar foreignObject nativt och håller det skarpt. En vektor håller din markup levande och skalbar, så att den förblir skarp i alla storlekar och filen förblir liten. En skärmbild fryser i stället samma markup i ett fast rutnät av pixlar: praktiskt där SVG inte stöds, men den går sedan inte att omforma eller förstora igen.

Vanliga frågor

Allt du behöver veta om att konvertera HTML till SVG.

Din HTML placeras i ett SVG-element <foreignObject>, som webbläsare renderar som en del av vektorn. Allt skalar utan att bli pixligt.

Inbäddad CSS och bilder som data-URI fungerar bäst. Externa resurser kanske inte laddas när SVG-filen öppnas utanför din webbplats, så bädda in så mycket du kan.

Nej. SVG-filen skapas helt och hållet i din webbläsare.

Ja. Ange valfri bredd och höjd i pixlar innan du skapar filen. De definierar SVG-ytan och dess viewBox, och eftersom filen är en vektor kan du skala den senare utan att förlora skärpa.

foreignObject renderas av webbläsare, men många grafikprogram som Inkscape och Illustrator har inte fullt stöd för det. Använd SVG-filen på webbsidor eller i webbläsarbaserade verktyg för bästa resultat.

Det här verktyget behåller din kod som vektor och rastrerar den aldrig. Om du behöver en pixelbild renderar du samma HTML med vårt verktyg HTML till bild, som ger PNG, JPG eller PDF.