svg-browser-export

Export SVG to PNG, JPEG, or WEBP in the browser

_{Support this project by ⭐️ starring and sharing it. Follow me to see what other cool projects I'm working on! ❤️}

🚀 Install

npm i svg-browser-export

🚦 Quick usage

import { exportSvg } from 'svg-browser-export'

const svgString = '<svg>...</svg>'

const exportedFileUrl = await exportSvg(svgString, 'png')
// => data:image/png;base64,....

👩‍🏫 Examples

Exporting an SVG on the page

Select the DOM element (eg. using querySelector) and access .innerHTML for the SVG string.

const svgElement = document.querySelector('.svg-selector')

const exportedFileUrl = await exportSvg(svgElement.innerHTML, 'png')

Downloading the exported file

Use it with downloadjs to automatically download the exported asset.

import { exportSvg } from 'svg-browser-export'
import download from 'downloadjs'

...

const exportedFileUrl = await exportSvg(svgString, 'png')

download(exportedFileUrl, 'anyFileName.png')

⚙️ API

exportSvg(svgString, exportFormat, scale)

Returns a promise that resolves to the exported file as a Base64 data URL.

svgString

Type: string

The SVG string to convert.

exportFormat

Type: 'png' | 'jpeg' | 'bmp' | 'ico' | 'webp'

The format to export the SVG to.

scale

Type: number

Optional

If you want to scale the SVG. For example, passing in 2 would double the dimensions of the SVG.