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

Verpak je HTML en inline CSS in een schaalbare SVG met foreignObject. Bekijk het live en download het als .svg, PNG of JPG. Alles draait in je browser.

HTML-code

Breedte

Hoogte

Formaat

Voorbeeld

SVG-broncode

HTML in een schaalbare vector

Met het foreignObject-element van SVG kun je levende HTML en CSS insluiten in een vectorafbeelding. Het resultaat schaalt vlekkeloos en is bruikbaar overal waar een SVG wordt geaccepteerd — ideaal voor badges, kaarten en opgemaakte labels.

Waarom HTML in een SVG verpakken?

Een SVG met foreignObject is geen schermafbeelding: je markup blijft levend in het bestand. De tekst blijft echte tekst, je inline CSS blijft de opmaak verzorgen en er wordt niets gerasterd, dus de afbeelding blijft haarscherp bij elk zoomniveau terwijl het bestand meestal maar een paar kilobyte groot is. Daarmee is deze aanpak uitstekend geschikt voor README-badges, profielkaarten, dashboardwidgets en elke andere plek waar je wilt dat een opgemaakt stukje HTML zich gedraagt als één afbeeldingsbestand dat je kunt hosten, insluiten of in versiebeheer opnemen.

Vector of schermafbeelding - wat heb je nodig?

Gebruik dit hulpmiddel wanneer het resultaat in een webbrowser wordt getoond, want browsers geven foreignObject native weer en houden het scherp. Een vector houdt je opmaak levend en schaalbaar, zodat die op elk formaat scherp blijft en het bestand klein blijft. Een schermafbeelding legt diezelfde opmaak juist vast in een vast raster van pixels: handig waar SVG niet wordt ondersteund, maar daarna niet meer opnieuw op te maken of te vergroten.

Veelgestelde vragen

Alles wat je moet weten over het converteren van HTML naar SVG.

Je HTML wordt in een SVG-<foreignObject> geplaatst, die browsers als onderdeel van de vector renderen. Het geheel schaalt zonder pixelvorming.

Inline CSS en afbeeldingen als data-URI werken het best. Externe bronnen laden mogelijk niet als de SVG buiten je site wordt geopend, dus neem zoveel mogelijk inline op.

Nee. De SVG wordt volledig in je browser gegenereerd.

Ja. Voer voor het genereren een breedte en hoogte in pixels in. Die bepalen het SVG-canvas en de viewBox, en omdat het bestand een vector is kun je het later schalen zonder scherpte te verliezen.

foreignObject wordt door webbrowsers gerenderd, maar veel grafische programma's zoals Inkscape of Illustrator ondersteunen het niet volledig. Gebruik de SVG daarom bij voorkeur op webpagina's of in browsergebaseerde tools.

Deze tool houdt je markup als vector en rastert die nooit. Heb je een pixelafbeelding nodig, render dezelfde HTML dan met onze tool HTML naar afbeelding, die PNG, JPG of PDF oplevert.