felixfbecker / Dom To Svg
Licence: mit
Library to convert a given HTML DOM node into an accessible SVG "screenshot".
Stars: ✭ 67
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Dom To Svg
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (+440.3%)
Mutual labels: svg, dom
Lunasvg
A standalone c++ library to create, animate, manipulate and render SVG files.
Stars: ✭ 243 (+262.69%)
Mutual labels: svg, dom
Elemental2
Type checked access to browser APIs for Java code.
Stars: ✭ 115 (+71.64%)
Mutual labels: svg, dom
Dompurify
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
Stars: ✭ 8,177 (+12104.48%)
Mutual labels: svg, dom
Elementx
⚡️ Functionally create DOM elements and compose them to a tree quickly
Stars: ✭ 62 (-7.46%)
Mutual labels: svg, dom
React Svg
🎨 A React component that injects SVG into the DOM.
Stars: ✭ 536 (+700%)
Mutual labels: svg, dom
Svgdom
Straightforward DOM implementation to make SVG.js run headless on Node.js
Stars: ✭ 154 (+129.85%)
Mutual labels: svg, dom
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (+788.06%)
Mutual labels: svg, dom
Svg
Fork of the ms svg library (http://svg.codeplex.com/)
Stars: ✭ 676 (+908.96%)
Mutual labels: svg, dom
Flutter svg
SVG parsing, rendering, and widget library for Flutter
Stars: ✭ 1,113 (+1561.19%)
Mutual labels: svg
D3
This is the repository for my course, Learning Data Visualization with D3.js on LinkedIn Learning and Lynda.com.
Stars: ✭ 64 (-4.48%)
Mutual labels: svg
Svgpocketguide
All original content of A Pocket Guide to Writing SVG by Joni Trythall
Stars: ✭ 1,106 (+1550.75%)
Mutual labels: svg
Zdog
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
Stars: ✭ 8,904 (+13189.55%)
Mutual labels: svg
DOM to SVG
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].