How to draw a SVG in string format in a canvas html element?

Question

I have a svg in a string, like this:

const svgString = (color) => `<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

Please consider that's an example svg, the real one is a little bit larger and more complex, so do not pay a lot of attentiton to that example.

What I want is to draw that SVG string in a canvas. I have tried something like this:

    const canvas = document.createElement('canvas');
    canvas.width = 18;
    canvas.height = 25;
    const ctx = canvas.getContext('2d');
    const path = new Path2D(svgString('red'));
    ctx.drawImage(path, 0, 0, 18, 25);

But that fails with the following error:

"<a class='gotoLine' href='#52:5'>52:5</a> Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'."

Any idea how to solve this?

const svgString = (color) => `<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

const canvas = document.createElement('canvas');
canvas.width = 18;
canvas.height = 25;
const ctx = canvas.getContext('2d');
const path = new Path2D(svgString('red'));
ctx.drawImage(path, 0, 0, 18, 25);

This could help: https://stackoverflow.com/questions/27230293/how-to-draw-an-inline-svg-in-dom-to-a-canvas — 0stone0, Mar 03 '22 at 12:30
The stroke does not work and document.write/innerHtml neither because I need the svg on a newly created canvas a draw it on another canvas. — Antonio Gamiz Delgado, Mar 03 '22 at 12:37

chrwahl · Accepted Answer · 2022-03-04T09:11:11.353

Here you have two examples. In both examples I added the SVG namespace to the string, be cause it is a separate XML/SVG document and not haft of the HTML.

In the first example I just create a data URL and insert that as the source of an image object. Here you need to set the width and the height.

In the second example I used Blob and the function URL.createObjectURL().

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

const svgString = (color) => `<svg xmlns="http://www.w3.org/2000/svg" height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

var img = new Image();
img.width = 500;
img.height = 150; 

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
});

img.src = `data:image/svg+xml,${svgString('red')}`;

<canvas width="500" height="150" id="canvas"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

const svgString = (color) => `<svg xmlns="http://www.w3.org/2000/svg" height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:${color}" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>`;

var svg = new Blob([svgString('red')], {
  type: "image/svg+xml;charset=utf-8"
});

var url = URL.createObjectURL(svg);
var img = new Image();

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
  URL.revokeObjectURL(url);
});

img.src = url;

<canvas width="500" height="150" id="canvas"></canvas>

URL.createObjectURL support in browsers is almost as old as SVG support itself. Please don't call it "experimental". — Kaiido, Mar 03 '22 at 23:15
@Kaiido [MDN](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#browser_compatibility) calls it experimental and the [File API](https://www.w3.org/TR/2021/WD-FileAPI-20210604/) is a working draft. Potentially changes could occur. — chrwahl, Mar 04 '22 at 09:10

How to draw a SVG in string format in a canvas html element?

1 Answers1