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.
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.