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) => {
layer.add(image);
layer.draw();
})

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.

Demo

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

Konva GIF demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<meta charset="utf-8" />
<title>Konva SVG Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>

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

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

var layer = new Konva.Layer();
stage.add(layer);

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

// 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,
});
layer.add(image);
layer.batchDraw();
},
});
</script>
</body>
</html>
Next