rendering multiple svgs

I am trying to render multiple svg’s on a canvas. For eg: I have 3 svg elements, when I loop through the elements. when the second svg is render, it removes the first svg, when the third one renders, it removes the previous two svgs.

Even though I have the ignoreClear: true option added

[gabelerner]

if you remove width/height it works. i’ll reopen for now if somebody wants to dig in.

[gabelerner]

svg1 = '<svg><text x="50" y="50">Hello</text></svg>';
svg2 = '<svg><text x="50" y="100">World</text></svg>';

var opts = {
  ignoreClear: true,
  ignoreDimensions: true,
  ignoreMouse: true,
}
let list = [svg1, svg2]
let container = document.getElementById('container')
const canvas = document.createElement('canvas')
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');
container.appendChild(canvas)
list.forEach(function(svg) {
  canvg(canvas, svg, opts);
})

works just fine from your example to render multiple svgs. if you have a problem w/ a specific SVG, please open another issue.