Use snapdom.toSvg(element) for an SVG image, or snapdom.toRaw(element) when you need the SVG data URL.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
import { snapdom } from '@zumer/snapdom'
const element = document.querySelector('#card')
const svg = await snapdom.toSvg(element, { embedFonts: true })
document.body.appendChild(svg)Why this pattern works
SnapDOM clones the selected DOM subtree, inlines its rendered styles and assets, then serializes it inside SVG <foreignObject>. The browser remains responsible for painting the HTML.
Use toRaw() when you need the underlying data URL for storage or transport.
Try HTML → SVG live
Capture this styled HTML card as an SVG image. The result stays sharp when resized.
HTML stays HTML
Fonts, gradients and pseudo-ready CSS travel inside a scalable SVG wrapper.
Limits and common mistakes
The output is an SVG container around styled HTML; it is not a conversion to SVG paths. It is ideal for browser display and scalable export, but not for editing individual shapes in Illustrator or Figma.
Frequently asked questions
Is the result true vector artwork?
No. Text and HTML remain inside SVG foreignObject; SnapDOM does not trace the DOM into paths.
Can I get the SVG source?
Use snapdom.toRaw(element) to get the SVG data URL, or fetch and decode that URL when XML text is required.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm