@ferdipret/svg-2-img

The easiest way to download an SVG as an image.

Install

npm install @ferdipret/svg-2-img

# or

yarn add @ferdipret/svg-2-img

Examples

Vanilla JS Image Download

import svg2Img from '@ferdipret/svg-2-img'
const svgElement = document.querySelector('#myLogo')
const downloadButton = document.querySelector('#downloadButton')

downloadButton.addEventListener('click', () => {
  svg2Img(svgElement, {
    format: 'jpeg',
    downloadFileName: 'cool-logo',
  })
})

React + TypeScript Image Download

import React from 'react'
import svg2Image from '@ferdipret/svg-2-img'


function Component() {
  const logoRef = useRef<SVGSVGElement>(null)

  const handleClick = () => {
    const svg = logoRef.current

    svg2Img(svg, {
      width: 300,
      height: 300,
      backgroundColor: 'red',
    })
  }

  return (
    <>
      <Logo ref={logoRef} />
      <button onClick={handleClick}>Download image</button>
    </>
  )
}

export default Component