https://github.com/pmkroeker/rasterize-svg

Rasterize SVG Elements for Download as PNG
https://github.com/pmkroeker/rasterize-svg

rasterization save-files svg typescript

Last synced: 4 months ago
JSON representation

Rasterize SVG Elements for Download as PNG

• Host: GitHub
• URL: https://github.com/pmkroeker/rasterize-svg
• Owner: pmkroeker
• License: mit
• Created: 2018-11-13T17:44:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-24T15:34:55.000Z (over 4 years ago)
• Last Synced: 2025-09-11T14:23:25.839Z (10 months ago)
• Topics: rasterization, save-files, svg, typescript
• Language: TypeScript
• Size: 25.4 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# rasterize-svg

Rasterize SVG Elements for Download as PNG

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

I needed an easy way to download SVG images created in [D3](https://d3js.org/) as PNG. I found that Mike Bostock made an [Observable Notebook](https://beta.observablehq.com/@mbostock/saving-svg) which solved the exact problem. the only issue was that some of the ways Observable handles DOM manipulation is not directly compatible with the browser. I modified the original code to be browser compatible.

## Methods

rasterize-svg exports a default function which returns a promise once the file has been saved.

```TS

import saveSvg from 'rasterize-svg'

const svgNode = document.querySelector('#mySVG') as SVGElement;

saveSvg(svgNode, 'mySVG.png')

  .then(() => {

    // file saved

  });

```