ExportSvgAsImage

It's a React package that allow user to export any kind of svg as jpeg or png file.

Installation

Use the package manager npm/yarn to install exportSvgAsImage.

npm install exportSvgAsImage

Usage

import React, { useRef } from 'react';
import ExportAsImage as exportSvgAsImage from "exportSvgAsImage"

function MyApp(){
  const svgRef = useRef();
  
  return(
  <>
   <svg viewBox="0 0 300 100" ref={svgRef}>
      <rect.../>
    </svg>
  
    <ExportAsImage 
      svgRef={svgRef}
      type='image/jpeg'
      compression={1}
      scale={1.5}
      fileName="file_name"
    />
  </>
  )
 
}

you need to declare a ref by using the Hook useRef() from React.

Props

Props	Required	Usage
svgRef	yes	A reference to the svg using useRef
type	no	two types => "image/png" or "image/jpeg"
scale	no	the scale you want, define to 1
compression	no	jpeg compression define to 1, value from 0 to 1
fileName	yes	The exported file name
svgTitle	no	The Title of your svg
backgroundColor	no	For jpeg file you can define a backgroundColor, base set to null = "transparent"
buttonTitle	no	The label of the button, base set to "Export"
classes	no	Classe name that allow you to re-design the button

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.