Library to convert a given HTML DOM node into an accessible SVG "screenshot".
MIT License
Library to convert a given HTML DOM node into an accessible SVG "screenshot".
Try out the SVG Screenshots Chrome extension which uses this library to allow you to take SVG screenshots of any webpage. You can find the source code at github.com/felixfbecker/svg-screenshots.
import { documentToSVG, elementToSVG, inlineResources, formatXML } from 'dom-to-svg'
// Capture the whole document
const svgDocument = documentToSVG(document)
// Capture specific element
const svgDocument = elementToSVG(document.querySelector('#my-element'))
// Inline external resources (fonts, images, etc) as data: URIs
await inlineResources(svgDocument.documentElement)
// Get SVG string
const svgString = new XMLSerializer().serializeToString(svgDocument)
The output can be used as-is as valid SVG or easily passed to other packages to pretty-print or compress.
<foreignObject>
- SVGs will work in design tools like Illustrator, Figma etc.