How to draw SVG image on canvas with Konva

Get last news, demos, posts from 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