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 in SVG

Betten Sie Ihr HTML und Inline-CSS mit foreignObject in ein skalierbares SVG ein. Sehen Sie das Ergebnis live und laden Sie es als .svg, PNG oder JPG herunter. Alles läuft in Ihrem Browser.

HTML-Markup

Breite

Höhe

Format

Vorschau

SVG-Quelltext

HTML in einem skalierbaren Vektor

Mit dem SVG-Element foreignObject lassen sich echtes HTML und CSS in eine Vektorgrafik einbetten. Das Ergebnis skaliert sauber und funktioniert überall dort, wo SVG akzeptiert wird — ideal für Badges, Karten und aufwendige Beschriftungen.

Warum HTML in ein SVG verpacken?

Ein mit foreignObject erstelltes SVG ist kein Screenshot - Ihr Markup bleibt in der Datei lebendig. Text bleibt echter Text, Ihr Inline-CSS gestaltet ihn weiterhin, und nichts wird gerastert. Die Grafik bleibt also bei jeder Zoomstufe gestochen scharf, während die Datei selbst meist nur wenige Kilobyte groß ist. Das macht diesen Ansatz perfekt für README-Badges, Profilkarten, Dashboard-Widgets und alle anderen Fälle, in denen sich ein gestalteter HTML-Schnipsel wie eine einzelne Bilddatei verhalten soll, die Sie hosten, einbetten oder versionieren können.

Vektor oder Screenshot - was brauchen Sie?

Verwenden Sie dieses Werkzeug, wenn das Ergebnis in einem Webbrowser angezeigt werden soll, denn Browser stellen foreignObject nativ dar und halten es gestochen scharf. Ein Vektor hält Ihr Markup lebendig und skalierbar, sodass es in jeder Größe scharf bleibt und die Datei klein bleibt. Ein Screenshot friert dasselbe Markup dagegen in einem festen Pixelraster ein: praktisch dort, wo SVG nicht unterstützt wird, danach lässt es sich aber weder umgestalten noch vergrößern.

Häufige Fragen

Alles Wissenswerte zur Umwandlung von HTML in SVG.

Ihr HTML wird in ein SVG-<foreignObject> eingesetzt, das Browser als Teil der Vektorgrafik darstellen. Das Ganze skaliert ohne Pixelbildung.

Inline-CSS und Bilder als Data-URI funktionieren am besten. Externe Ressourcen laden möglicherweise nicht, wenn das SVG außerhalb Ihrer Website geöffnet wird — betten Sie daher so viel wie möglich direkt ein.

Nein. Das SVG wird vollständig in Ihrem Browser erzeugt.

Ja. Geben Sie vor dem Erzeugen beliebige Werte für Breite und Höhe in Pixel ein. Sie bestimmen die SVG-Zeichenfläche und deren viewBox – und da es sich um einen Vektor handelt, können Sie die Datei später ohne Schärfeverlust skalieren.

foreignObject wird von Webbrowsern dargestellt, aber viele Grafikprogramme wie Inkscape oder Illustrator unterstützen es nur unvollständig. Verwenden Sie das SVG daher am besten auf Webseiten oder in browserbasierten Tools.

Dieses Tool behält Ihr Markup als Vektor und rastert es nie. Wenn Sie ein Pixelbild brauchen, rendern Sie dasselbe HTML mit unserem Tool „HTML zu Bild“, das PNG, JPG oder PDF ausgibt.