https://github.com/privatenumber/svg-browser-export

Export SVG to PNG, JPEG, or WEBP in the browser
https://github.com/privatenumber/svg-browser-export

browser convert export frontend jpeg png save svg webp

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/privatenumber/svg-browser-export
• Owner: privatenumber
• Created: 2021-09-08T20:27:06.000Z (over 3 years ago)
• Default Branch: develop
• Last Pushed: 2021-09-09T03:44:43.000Z (over 3 years ago)
• Last Synced: 2024-10-19T01:10:53.682Z (4 months ago)
• Topics: browser, convert, export, frontend, jpeg, png, save, svg, webp
• Language: TypeScript
• Homepage:
• Size: 64.5 KB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-browser-export   

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

Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️

## 🚀 Install

```bash

npm i svg-browser-export

```

## 🚦 Quick usage

```ts

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

const svgString = '...'

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

// => data:image/png;base64,....

```

## 👩‍🏫 Examples

### Exporting an SVG on the page

Select the DOM element (eg. using [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)) and access `.innerHTML` for the SVG string.

```ts

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

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

```

### Downloading the exported file

Use it with [downloadjs](https://www.npmjs.com/package/downloadjs) to automatically download the exported asset.

```ts

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.