Neuron Powered Motorization

    dom-to-svg
    TypeScript icon, indicating that this package has built-in type declarations

    0.12.2 • Public • Published

    DOM to SVG

    npm CI status license: MIT semantic-release

    Library to convert a given HTML DOM node into an accessible SVG "screenshot".

    Demo 📸

    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.

    Usage

    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.

    Features

    • Does NOT rely on <foreignObject> - SVGs will work in design tools like Illustrator, Figma etc.
    • Maintains DOM accessibility tree by annotating SVG with correct ARIA attributes.
    • Maintains interactive links.
    • Maintains text to allow copying to clipboard.
    • Can inline external resources like images, fonts, etc to make SVG self-contained.
    • Maintains CSS stacking order of elements.
    • Outputs debug attributes on SVG to trace elements back to their DOM nodes.

    Caveats

    • Designed to run in the browser. Using JSDOM on the server will likely not work, but it can easily run inside Puppeteer.

    Install

    npm i dom-to-svg

    DownloadsWeekly Downloads

    1,053

    Version

    0.12.2

    License

    MIT

    Unpacked Size

    334 kB

    Total Files

    67

    Last publish

    Collaborators

    • felixfbecker