Wrap your HTML and inline CSS inside a scalable SVG using foreignObject. Preview it live and download a ready-to-use .svg file. Everything runs in your browser.
SVG's foreignObject element lets you embed live HTML and CSS inside a vector image. The result scales cleanly and can be used anywhere an SVG is accepted — great for badges, cards and rich labels.
An SVG built with foreignObject is not a screenshot - your markup stays live inside the file. The text remains real text, your inline CSS keeps styling it, and nothing is rasterized, so the graphic stays perfectly sharp at any zoom level while the file itself is usually only a few kilobytes. That makes this approach a great fit for README badges, profile cards, dashboard widgets and any other place where you want a styled snippet of HTML to behave like a single image file you can host, embed or version-control.
Use this tool when the result will be shown in a web browser, because browsers render foreignObject natively and keep it crisp. If you need a pixel image that works everywhere - in chat apps, documents or design software - render the same markup with our HTML to Image converter instead, which produces a PNG, JPG or PDF. The two tools are complementary: one keeps your HTML as a scalable vector, the other freezes it into a bitmap.
Everything you need to know about converting HTML to SVG.
Your HTML is placed inside an SVG <foreignObject>, which browsers render as part of the vector. The whole thing scales without pixelation.
Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site, so inline what you can.
No. The SVG is generated entirely in your browser.
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.
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.
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.