How to draw SVG image on canvas with Konva


How to show SVG image on canvas?

It has not always been possible for browsers to draw *.svg images onto the canvas. However, the situation has improved and you currently have several options available if you want to render a vector image with Konva:

Option 1: Use Konva.Path

Use Konva.Path. This method is good for simple path shapes. If you have a large SVG with many paths you, you may need to split it manually into several Konva.Path shapes.

Option 2: Use Konva.Image

Use Konva.Image shape with svg image

Konva.Image.fromURL('/image.svg', (image) => {

This method works well in many cases, but is not fully cross-compatible. For example, some SVG may not be visible in the Firefox browser (there is a workaround for that case).

Option 3: Use an external library to render SVG to canvas

Use an external library (for example, canvg) to draw the SVG into the <canvas> element. And then use that canvas for Konva.Image.

This method has been tested in at least one large production app, with proven reliability and rendering accuracy.


Below is a demo that shows drawing natively and with a library.

Konva GIF demoview raw
<!DOCTYPE html>
<script src=""></script>
<script src=""></script>
<meta charset="utf-8" />
<title>Konva SVG Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;

<div id="container"></div>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height

var layer = new Konva.Layer();

var SOURCE = '/assets/tiger.svg';
// try to draw SVG natively
Konva.Image.fromURL(SOURCE, imageNode => {
width: 150,
height: 150

// draw svg with external library
var canvas = document.createElement('canvas');
canvg(canvas, SOURCE, {
renderCallback: function() {
var image = new Konva.Image({
image: canvas,
x: 200,
width: 150,
height: 150