Verpacken Sie Ihr HTML und Inline-CSS mit foreignObject in ein skalierbares SVG. Sehen Sie die Live-Vorschau und laden Sie eine fertige .svg-Datei herunter. Alles läuft in Ihrem Browser.
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.
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.
Nutzen Sie dieses Tool, wenn das Ergebnis in einem Webbrowser angezeigt wird, denn Browser stellen foreignObject nativ und gestochen scharf dar. Wenn Sie ein Pixelbild brauchen, das überall funktioniert - in Chat-Apps, Dokumenten oder Grafikprogrammen -, rendern Sie dasselbe Markup mit unserem Konverter HTML zu Bild, der PNG, JPG oder PDF liefert. Die beiden Tools ergänzen sich: Das eine behält Ihr HTML als skalierbaren Vektor, das andere friert es als Bitmap ein.
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.