HTML to Image Converter
Use inline styles. External stylesheets, images and web fonts are not loaded.
The HTML to image converter rasterises markup to a PNG by wrapping it in an SVG foreignObject and drawing that to a canvas. This is the only way to render HTML to an image without a headless browser, and it comes with real limitations that are worth knowing before you start rather than discovering halfway through.
How it works
- Your markup is embedded inside an SVG foreignObject element.
- The SVG is encoded as a data URL and loaded as an image.
- That image is drawn onto a canvas, which is exported as PNG.
- External images do not load. The browser refuses to fetch resources from inside an SVG loaded as an image, for security reasons.
- Web fonts do not load either, for the same reason. Only fonts already installed on the device render.
- External stylesheets are not applied. Every style must be inline.
- The markup must be well-formed XHTML: every tag closed, including <br /> and <img />.
Those restrictions come from the browser security model rather than from this implementation. A malformed tag causes the whole render to fail silently, which is why the tool reports it explicitly.
Examples
A styled card
HTML
<div style="padding:24px;background:#0c6249;color:#fff">Rendered</div>
Result
A PNG showing the styled card
Inline styles apply normally. The same markup in an external stylesheet would render unstyled.
An unclosed tag
HTML
<div>Text<br></div>
Result
Render fails: foreignObject requires XHTML, so <br> must be <br />
The SVG parser is strict where the HTML parser is forgiving. This is the single most common cause of a blank result.
Frequently asked questions
Why do my images not appear in the output?
Because the browser will not load external resources from inside an SVG that is itself loaded as an image. It is a security restriction, not a bug. The workaround is to embed images as base64 data URLs inside the markup, which the base64 to image tool can help you verify.
Why does my custom font not render?
Same restriction. Web fonts are external resources and are not fetched. Only fonts already installed on the viewing device are available, so a system font stack is the only reliable choice.
Why does my markup produce a blank image?
Almost always malformed XHTML. foreignObject content is parsed as XML, which is strict: every tag must be closed, including void elements like <br /> and <img />, and attributes must be quoted. The HTML parser forgives all of that; the XML parser does not.
How is this different from a screenshot tool?
A screenshot tool drives a real browser and captures what it paints, so external resources load normally. This runs entirely in your browser with no server, which is why it is instant and private but limited to self-contained markup.