Extend Konva's functionality to export stages as SVG. Enhance the quality of exported images with SVG format.
npm install react-konva-to-svgExtend Konva's functionality to export stages as SVG. Enhance the quality of exported images with SVG format.




- Export Konva stages to SVG format.
- Asynchronous export with progress tracking.
- Before and after export callbacks for custom processing.
- Flexible context with a function that handles Konva stage objects.
- Export results as text SVG or Blob SVG.
- Installation
- Usage
- Example
- Demo
- Contributing
- License
You can install react-konva-to-svg using npm, yarn, or directly from GitHub.
- npm: npm install react-konva-to-svg
- yarn: yarn add react-konva-to-svg
- GitHub: GitHub Repository
To use react-konva-to-svg, import the library and utilize the exportStageSVG function with your Konva stage object. This function allows you to customize the export process.
- stage: The Konva stage object you want to export.
- blob (optional): Set to true to export as Blob SVG, or false (default) to export as text SVG.
- options (optional): An object containing the following callbacks:
- onBefore: A callback function called before export. Receives an array [stage, layer] as an argument.
- onAfter: A callback function called after export. Receives an array [stage, layer] as an argument.
Example usage:
``javascript
import { exportStageSVG } from 'react-konva-to-svg';
// Example usage
const stage = / your Konva stage /;
const result = await exportStageSVG(stage, false, {
onBefore: ([stage, layer]) => {
// Perform actions before export
},
onAfter: ([stage, layer]) => {
// Perform actions after export
},
});
``
Explore a live demo of react-konva-to-svg in action: Demo