react-konva-to-svg

Extend Konva's functionality to export stages as SVG. Enhance the quality of exported images with SVG format.

Features

• 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.

Table of Contents

• Installation
• Usage
• Example
• Demo
• Contributing
• License

Installation

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

Usage

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.

exportStageSVG(stage, blob, options)

• 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:

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
  },
});

Compatibility Notice

Node or group does not rendering properly

If some of nodes, or any group does not rendering properly - use node caching for incorrect rendered node withing onBefore function.

Demo

Explore a live demo of react-konva-to-svg in action: Demo