Convert HTML to SVG
Turn a snippet of HTML and CSS into an image.
Paste HTML and CSS — a card, a badge, a quote, a styled table — and see it rendered as an SVG picture right away. The height follows the content, the background can stay transparent, and you can download the SVG or a sharp PNG at twice or three times the size. Scripts and outside resources are removed, so the picture is self-contained.
How to convert HTML to SVG
- Step 1
Paste your HTML and CSS.
- Step 2
Set the width and the background.
- Step 3
Download the SVG or PNG.
Why use PhotoTools
Real CSS
Gradients, shadows, fonts and layouts as the browser draws them.
SVG and PNG
A vector file or a sharp picture up to 3×.
Safe and private
No scripts, nothing uploaded.
Supported formats
Input
- HTML
- CSS
Output
- SVG
- PNG
Frequently asked questions
Why are my images or web fonts missing?
For safety and privacy the picture cannot load files from other sites. Include images and fonts as data URLs to keep them.
Where does the SVG work?
SVG pictures with HTML inside display in all modern browsers; design tools that only understand plain vector shapes may not show the HTML part.
Is it free?
Yes. Browser tools on PhotoTools are free, unlimited and work without an account.
Are my images uploaded to a server?
No. This tool runs entirely in your browser using WebAssembly. Your images never leave your device, and nothing is stored.