https://github.com/felixfbecker/dom-to-svg

Library to convert a given HTML DOM node into an accessible SVG "screenshot".
https://github.com/felixfbecker/dom-to-svg

dom javascript svg

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/felixfbecker/dom-to-svg
• Owner: felixfbecker
• License: mit
• Created: 2020-09-04T09:40:52.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-25T14:55:30.000Z (about 2 months ago)
• Last Synced: 2024-07-25T17:09:44.997Z (about 2 months ago)
• Topics: dom, javascript, svg
• Language: TypeScript
• Homepage:
• Size: 5.68 MB
• Stars: 372
• Watchers: 8
• Forks: 39
• Open Issues: 51
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DOM to SVG

[![npm](https://img.shields.io/npm/v/dom-to-svg)](https://www.npmjs.com/package/dom-to-svg)

[![CI status](https://github.com/felixfbecker/dom-to-svg/workflows/test/badge.svg?branch=main)](https://github.com/felixfbecker/dom-to-svg/actions)

![license: MIT](https://img.shields.io/npm/l/dom-to-svg)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

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

## Demo 📸

Try out the [SVG Screenshots Chrome extension](https://chrome.google.com/webstore/detail/svg-screenshot/nfakpcpmhhilkdpphcjgnokknpbpdllg) 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](https://github.com/felixfbecker/svg-screenshots).

## Usage

```js

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 `` - 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.