i want to convert a SVG with an image inside into a png. In Firefox and Chrome everything works perfect, but in Safari the conversion is ignoring the image inside the SVG.
The library i am using is html-to-image (html2canvas gave me the same result)
Here is a codepen (the face is the image) https://codepen.io/RainPara/pen/MWvqZNz
var node = document.getElementById('item');
htmlToImage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
Maybe someone can help me
CodePudding user response：
Testing your example on iOS safari(v15), I've also encountered this issue.
Basically, the svg to image conversion process involves:
- creating a Blob/Blob URL (see also What is a blob URL and why it is used?)
- render it to a canvas
- return a data url
For some reasons (at least some) safari versions, apparently need some delay to render the canvas properly.
This example employs both the initially used html2canvas (library/script based) and a stripped down js code.
function save() {
var node = document.getElementById("item");
htmlToImage
.toPng(node)
.then(function (dataUrl) {
var img = new Image();
//img.width = nodeW;
//img.height = nodeH;
img.src = dataUrl;
let imgWrp = document.createElement("div");
imgWrp.classList.add("img-wrp");
imgWrp.appendChild(img);
document.body.appendChild(imgWrp);
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
}
function svg2Png(selector) {
const svgEl = document.querySelector(selector);
let svgBB = svgEl.getBBox();
let svgW = svgBB.width;
let svgH = svgBB.height;
let blob = new Blob([svgEl.outerHTML], {type: 'image/svg xml'});
let URL = window.URL;
let blobURL = URL.createObjectURL(blob);
let tmpImg = new Image();
tmpImg.src = blobURL;
tmpImg.width = svgW;
tmpImg.height = svgH;
tmpImg.onload = () => {
let canvas = document.createElement("canvas");
canvas.width = svgW;
canvas.height = svgH;
let context = canvas.getContext("2d");
// draw blob img to canvas with some delay
setTimeout(function () {
context.drawImage(tmpImg, 0, 0, svgW, svgH);
let pngDataUrl = canvas.toDataURL();
let svgImg = document.createElement("img");
svgImg.width = svgW;
svgImg.height = svgH;
svgImg.class = "svgImg";
svgImg.src = pngDataUrl;
// just additional wrapping for example usage
let imgWrp = document.createElement("div");
imgWrp.setAttribute("class", "img-wrp img-wrp-vanilla");
imgWrp.appendChild(svgImg);
document.body.appendChild(imgWrp);
}, 300);
};
}.btn-wrp{
display:flex;
}
button{
width:100%;
padding:0.5em;
}
.img-wrp{
display:inline-block;
font-size:25vw;
width:1em;
height: 1em;
border: 2px solid green
}
.img-wrp-svg{
border: 2px solid red
}
.img-wrp-vanilla{
border: 2px solid orange
}
.img-wrp>*{
width:100%;
height:auto;
}
img{
/*
display:inline-block;
font-size:10em;
width:1em;
height: 1em;
*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
<div class="btn-wrp">
<button type="button" onclick="save()">Convert svg (html-to-image.js)</button>
<button type="button" onclick="svg2Png('svg')">svg2Png</button>
</div>
<div class="img-wrp img-wrp-svg">
<svg id="item" width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
<mask id="a" x="197" y="42" width="127.3" height="51.7" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="b" x="184" y="42" width="140.7" height="60.2" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="c" x="198" y="42" width="126.4" height="51.7" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
<mask id="d" x="195" y="42" width="136.4" height="63" maskUnits="userSpaceOnUse">
<g data-name="c">
<path data-name="b" d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#fff" />
</g>
</mask>
</defs>
<path d="M0 0h500v500H0Z" fill="none"/>
<path d="M410 471c0 16-74 29-166 29S78 487 78 471s75-29 166-29 166 13 166 29" style="isolation:isolate" opacity=".2"/>
<path d="M170 439a7 7 0 0 1-2 0c-6 2-26-1-31-4h-1c-4-3-5-8-3-17 3-10 9-10 13-9v8s12 8 22 2l2-6c5 1 9 2 9 9 0 5-4 14-9 17" fill="#f0f0f0" />
<path d="M146 417v-8a12 12 0 0 0-5 0 11 11 0 0 0 5 8" fill="#ebdfd4" />
<path d="M133 420c1 7 7 4 12 4s10 4 15 2c3-1 2-3 0-5-7 1-14-4-14-4a11 11 0 0 1-5-8c-3 1-6 3-8 9v2" fill="#fff" />
<path d="m170 413-2 6-2 1a6 6 0 0 1 1 1c2 5-2 9-6 11a26 26 0 0 1-8 1l-10 2a17 17 0 0 1-8-1 8 8 0 0 0 1 1h1c5 2 25 6 31 4a6 6 0 0 0 2 0c5-3 9-12 9-17 1-7-4-8-9-9" fill="#d4d4d4" />
<path d="M314 437a10 10 0 0 1-5-8c-2-15 8-15 11-15a46 46 0 0 1 3 8s9 4 19-2a62 62 0 0 0 3-10c6 0 10 3 11 13 0 5-2 9-5 11s-8 4-14 5c-8 1-17 1-23-2" fill="#f0f0f0" />
<path d="M356 423c-1-10-5-13-11-13a62 62 0 0 1-3 10 22 22 0 0 1-2 1v1c3-1 7-5 10-4 4 1 3 5 2 8-2 4-8 6-14 6a13 13 0 0 1-5 4c-5 3-12 3-18 1 6 3 14 3 22 2 6-1 11-2 14-5s5-6 5-11" fill="#d4d4d4" />
<path d="M349 423a10 10 0 0 0 3-2 5 5 0 0 0-3-5 15 15 0 0 1-5 3l-2 1c-8 5-17 3-19 2a26 26 0 0 1-5-2c-2-1-5-2-5-5-3 2-5 6-4 14a10 10 0 0 0 5 8 18 18 0 0 0 7 2 16 16 0 0 0 1-5 9 9 0 0 1 0-2 3 3 0 0 1 1-2l8-1 9-3 9-3" fill="#fff" />
<path d="M320 414c-6-19-11-24-11-24-47 13-127-1-127-1-7 10-9 16-12 24l-2 6c-10 6-22-2-22-2v-8c0-28 5-57 6-59 21 5 189-2 189-2 5 16 5 53 4 62a62 62 0 0 1-3 10c-9 6-19 2-19 2a73 73 0 0 0-3-8" fill="#d61535" />
<path d="M151 380a38 38 0 0 0-4 0 268 268 0 0 0-1 29v8s7 5 15 4a213 213 0 0 0 3-24c1-9-3-16-13-17" fill="#f1183c" />
<path d="M341 348s-168 7-189 2l-3 17c30 14 62 22 94 27a27 27 0 0 0 8-14c3 8 11 13 20 15 13 0 26-2 37-5 10-4 21-5 26 7a73 73 0 0 1 3 25 20 20 0 0 0 5-2 62 62 0 0 0 3-10c1-9 1-46-4-62" fill="#bf132f" />
<path d="M353 464c7 8 12 17 11 19s-43-7-44-9l-6-37c6 3 15 3 23 2 6-1 11-2 14-5l2 30" fill="#f1183c" />
<path d="m353 464-2-29v-1c-3 3-8 4-14 5-8 1-17 1-23-2l1 4a43 43 0 0 0 15 5c0 9 2 17 7 24 8 6 17 10 27 12 0-3-5-11-11-18" fill="#d61535" />
<path d="M137 435c5 2 25 6 31 4a6 6 0 0 0 2 0c-1 6-3 32-7 33s-57 3-57 1 27-17 27-19l3-19h1" fill="#f1183c" />
<path d="M168 440c-6 1-24-2-30-4a65 65 0 0 0 10 6c4 1 10 2 11 6 2 3 0 9-1 12-1 5-2 9-6 11a51 51 0 0 1-10 3c11 0 19-1 21-2 3-1 6-27 7-33a6 6 0 0 1-2 1" fill="#d61535" />
<path d="M146 471a18 18 0 0 0 6-3 48 48 0 0 1-6 3" fill="#d61535" />
<path d="m135 439-2 14c6 2 10 3 14 8a74 74 0 0 0 5-16l-17-6m-5 18c-6 4-21 11-24 14 12 2 23 0 33-4a32 32 0 0 0-9-10" fill="#ff3153" />
<path d="M355 466a45 45 0 0 0-27 5c15-11 25-9 25-9l1 4" fill="#bf132f" />
<path d="M333 455c-1-4-2-7-5-9a4 4 0 0 0-6 1c-2 3-2 6-2 10 1 4 1 8 4 10 2 3 7 3 9-1v-11m14 20c-2-3-3-5-6-5s-4-1-6 1c-1 2 1 4 2 5a12 12 0 0 0 3 1 15 15 0 0 1 3 1 3 3 0 0 0 4-3" fill="#ff3153" />
<path d="M308 98c2 6 7 16 3 29-3 14-12 14-18 10s-12-8-17-7l-41-6c-6-2-12 2-17 5s-11 3-14-9 5-30 12-35v1s48-8 92 12" fill="#f6aa76" />
<path data-name="mehrdunkel" d="M83 202c6-5 41 45 37 48-6 2-42-44-37-48" fill="var(--main-objekte-mehrdunkel)" />
<path d="m178 287-1 2a78 78 0 0 0-6 40s-8 2-10-1v-6c0-9 2-26 6-34a12 12 0 0 1 1-2c3-3 10 1 10 2m156-5 6 36a38 38 0 0 1 0 7c-1 4-13 2-13 2v-6c-1-19-4-31-6-37a37 37 0 0 0-3-6s10-3 14 0a9 9 0 0 1 2 4" fill="#ff3153" />
<path d="M279 306a39 39 0 0 1 5 0c3 0 3 7 0 7a118 118 0 0 1-18 1c-4 0-4-6-1-7a38 38 0 0 1 6-1h8" fill="#ffbd4d" />
<path d="M210 328v-29a24 24 0 0 1 2-8c2-5 5-7 10-7a348 348 0 0 1 47 0c3 0 6 1 8 4 1 3 2 8 2 18h-8c0-4 1-14-9-14h-32c-7 1-9 2-10 11a111 111 0 0 0 0 23c0 5 4 6 11 6h32c5-1 9-4 8-18h8v20c0 7-6 7-9 7a571 571 0 0 0-42 0c-13 0-18-3-18-10v-3" fill="#f4b837" />
<path d="M279 314h-3v17c0 7-6 7-9 7a571 571 0 0 0-43 0c-6 0-10 0-13-2 2 4 7 5 17 5a700 700 0 0 1 42 0c3 0 9 0 9-7v-20m-58 14a8 8 0 0 1-1-2 111 111 0 0 1 0-23c1-9 3-10 10-11h32a10 10 0 0 1 4 0c-2-2-4-3-8-3h-32c-7 1-9 2-10 11a111 111 0 0 0 0 23c1 3 2 5 5 5m56-40a7 7 0 0 0-4-3c2 3 3 8 3 18h-5v3h8c0-10-1-15-2-18" fill="#c2732e" />
<path d="M279 314h-8v4a42 42 0 0 0 8 1v-5m-8-8h8v-2a83 83 0 0 0-8 0v2" fill="#f0953a" />
<path d="M163 40c1 9 2 11-2 20v1c-10 16-36 14-38-11s32-30 40-10" fill="#f0f0f0" />
<path d="M145 53c5-10 1-17-5-20a11 11 0 0 0-10 2 13 13 0 0 0-4 17c3 5 8 7 13 6a14 14 0 0 0 6-5" fill="#fff" />
<path d="M147 63a17 17 0 0 0 3-2 18 18 0 0 0 5-17c-3 5-2 10-4 15a17 17 0 0 1-4 4" fill="#d4d4d4" />
<path d="m163 40-1-1-4 2a18 18 0 0 1 1 4c2 16-11 25-24 25 9 3 20 0 26-9v-1c4-9 3-11 2-20Z" fill="#d4d4d4" />
<path d="M197 62c-10 1-26-2-37-6-8-3-13-6-13-8s6-7 14-12a270 270 0 0 1 31-16c21-10 56-28 77-16s40 49 46 63a108 108 0 0 0-58-20c-31-1-49 6-59 14l-1 1Z" fill="#f1183c" />
<path d="M220 22c11-1 24 0 34-7a14 14 0 0 0 6-14c-21-4-50 10-68 19a270 270 0 0 0-31 16c-8 4-13 9-14 12 7 1 25-10 29-12 14-8 28-13 44-14Zm19 17a161 161 0 0 1-13 10 137 137 0 0 1 31-2 107 107 0 0 1 17 2c3-7 3-14 0-20-8-15-27 3-35 10" fill="#ff3153" />
<path d="M249 20c-10-3-26 4-34 10a120 120 0 0 0-25 32 37 37 0 0 0 7-1h1a55 55 0 0 1 15-8l4-3c10-5 20-10 27-18 4-4 6-9 5-12m20-16a33 33 0 0 0-16-4c16 5 29 20 26 38a18 18 0 0 1-6 11 107 107 0 0 1 42 18c-6-14-25-51-46-63" fill="#d61535" />
<path data-name="mittel" d="M140 227a97 97 0 0 1-16 20 37 37 0 0 1-4 3c4-3-31-53-37-48s32-19 59-17a28 28 0 0 0 11 17l-3 8a146 146 0 0 1-10 17" fill="var(--main-objekte-mittel)" />
<path data-name="hell" d="M135 187a11 11 0 0 0-4-2c-24 3-48 17-48 17 3-2 9 5 17 14a288 288 0 0 0 38-26 10 10 0 0 0-3-3m5 7a294 294 0 0 1-38 25l8 10c7-6 15-12 21-19 4-4 9-11 8-16" fill="var(--main-objekte-hell)" />
<path data-name="mittel" d="M178 131c-9 9-10 28 7 39a13 13 0 0 0 0 11 23 23 0 0 0-7 5c-3-7-14-25-29-19a12 12 0 0 0-6 7c-21-40 18-80 41-86 19-8 34-8 34-11l-33 29c1 10 1 16-7 25Z" fill="var(--main-objekte-mittel)" />
<path data-name="hell" d="M137 158c8 2 19-3 20-9 0-16 2-35 12-49a71 71 0 0 1 9-10c-20 9-45 37-41 68" fill="var(--main-objekte-hell)" />
<path data-name="dunkel" d="M178 109c-1 5-4 9-8 14l-6 12a83 83 0 0 1 6-7c6-7 7-13 8-19" fill="var(--main-objekte-dunkel)" />
<path data-name="dunkel" d="M178 131c8-9 8-15 7-25a11 11 0 0 1 1-3c-2-2-2-5-2-10l-1 11c0 8-2 15-6 21-4 7-10 12-12 18a36 36 0 0 0 1 6c2 4 4 8 2 12-1 4-5 5-9 5h-1c10 2 17 14 20 20a23 23 0 0 1 7-5 13 13 0 0 1 0-11c-17-11-16-30-7-39m193 35c8 8 24 13 23 17s-11 7-15 14-12 28-38 49h-1c-3-13-7-19-7-21a25 25 0 0 0 2-4c9-21 0-49-11-50 9-9 6-19 5-31-1-5 2-12 2-18a28 28 0 0 0 0-10c19 17 32 45 40 54" fill="var(--main-objekte-dunkel)" />
<path data-name="mehrdunkel" d="M351 183a65 65 0 0 1 0 12c0 3-1 7 3 6l4-3a26 26 0 0 0-2-15c-6-18-16-32-14-52v-2c-1 9-3 18-1 27 3 9 8 17 10 27" fill="var(--main-objekte-mehrdunkel)" />
<path data-name="mehrdunkel" d="M394 183a65 65 0 0 1-18 4c-6 1-10 7-15 12l-2 2c-2 3-5 7-9 6-3-1-3-5-3-8 1-12-1-22-6-33-3-7-5-14-4-22 0-11 4-21-4-31l-2-1a28 28 0 0 1 0 10c0 6-3 12-2 17 1 13 4 23-5 32 11 0 20 29 11 50a24 24 0 0 1-2 4c0 1 4 8 7 21h1c26-21 35-42 38-49s15-9 15-14" fill="var(--main-objekte-mehrdunkel)" />
<path d="M324 171c-12 0-40 19-67 25-19 5-42 1-55-2 2-6-4-13-12-14a9 9 0 0 0-5 1 13 13 0 0 1 0-11c-17-11-16-30-7-39s8-15 7-25a11 11 0 0 1 0-3c2-10 15-21 31-18h10c-8 5-13 47-8 44s11-7 17-5l41 6c5-1 12 3 17 7s8 3 11-10-2-27-4-32c6-1 23 4 28 10a17 17 0 0 1 3 7 28 28 0 0 1 0 10c0 6-3 13-2 17 1 13 4 23-5 32Z" fill="#f0f0f0" />
<path d="m199 161-7-12-3-13c0-3-4-4-6-3-3 3-5 4-6 8a24 24 0 0 0 0 11c2 8 6 14 13 17a7 7 0 0 0 9-2v-6m16 15a11 11 0 0 0-3-3 14 14 0 0 1-3-2 3 3 0 0 0-3 0 3 3 0 0 0-1 3c1 3 3 7 7 8a4 4 0 0 0 4-2 4 4 0 0 0-1-4m10-13-12-8c-8-4-11-7-13-16a2 2 0 0 0-3 0c-2 9 2 19 9 25 4 4 10 6 13 12 3 4 3 10 8 12a4 4 0 0 0 5-1c5-7-2-19-7-24" fill="#fff" />
<path d="M242 171c0-4-2-6-5-9-1-1-4 0-3 2 1 3 1 6 3 8s6 2 5-1" fill="#f7eedf" />
<path d="M195 118c1 8 4 16 12 17s13-4 16-10l-5 4c-5 3-11 3-14-9s5-30 12-35a25 25 0 0 0-3 0c-11 5-18 21-18 33m56 71c7-3 12-9 18-14a36 36 0 0 1 19-7c10-1 32 3 32-12 1-6-3-13-3-20 0-6 4-11 6-16l-7 11c-2 10 4 20 2 28-2 4-8 8-12 6-26-6-40 16-60 26a18 18 0 0 1-10 0c5 1 10 1 15-2" fill="#d4d4d4" />
<path d="M331 112a17 17 0 0 0-3-7c3 9-1 16-4 23-6 12 2 20 0 31-1 8-10 11-17 12l-23 1c-8 2-13 7-19 12-7 6-14 12-22 12a21 21 0 0 1-13-3 81 81 0 0 1-15-2c-4-1-6-2-9-5-2-3-4-7-8-9-4-1-10 0-14 2a16 16 0 0 0 1 2 10 10 0 0 1 5-1c8 1 14 8 12 14 13 3 36 7 55 2 27-6 55-25 67-25 9-9 6-19 5-31-1-5 2-12 2-18a28 28 0 0 0 0-10" fill="#d4d4d4" />
<path d="m349 316 1 1-10 2-6-36 13-3 2 36" fill="#a15132" />
<path d="m349 316 1 1-10 2-6-36 13-3 2 36" fill="#7a3d26" />
<path d="M167 288c-4 8-6 25-6 34a113 113 0 0 1-13-3 161 161 0 0 1 1-33l18 2" fill="#a15132" />
<path d="M167 288h-2a132 132 0 0 0-8 33l4 1c0-9 2-26 6-34" fill="#7a3d26" />
<path d="M212 291a24 24 0 0 0-2 8v29a327 327 0 0 1-39-4c0-10 1-25 6-35l34 2h1" fill="#a15132" />
<path d="M179 289h-2c-5 10-6 25-6 35l9 1a62 62 0 0 1-1-36m31 2c-5 11-5 24-5 37h5v-29a24 24 0 0 1 2-8h-2" fill="#7a3d26" />
<path d="M266 314h5c1 14-4 17-8 18h-32c-7 0-11-1-11-6a111 111 0 0 1 0-23c1-9 3-10 10-11h32c10 0 9 10 9 14a38 38 0 0 0-6 1c-3 1-3 7 1 7" fill="#a15132" />
<path d="M227 327c-6-16 0-29 13-35h-10c-7 1-9 2-10 11a111 111 0 0 0 0 23c0 5 4 6 11 6h1a18 18 0 0 1-5-5m44-13h-6a30 30 0 0 0 6 8 41 41 0 0 0 0-8" fill="#7a3d26" />
<path d="M327 322h-1a420 420 0 0 1-47 6v-14l5-1c3 0 3-7 0-7a39 39 0 0 0-5 0c1-10 0-15-2-18l44-3c2 6 5 18 6 37" fill="#a15132" />
<path d="M288 306c-3-5-3-1-5-6l-3-12h-3c1 3 2 8 2 18a39 39 0 0 1 5 0c3 0 3 7 0 7l-5 1v14l10-1a60 60 0 0 0 2-9l-3-12m38 16c0-19-3-31-5-37h-1a146 146 0 0 1 4 38l2-1" fill="#7a3d26" />
<path d="M143 174a19 19 0 0 0-1 9c-13-4-8-18 1-9" fill="#ffbd4d" />
<path d="M143 175a2 2 0 0 1-2-2c1-21-9-54-19-56-2 0-4 1-5 3-4 8 0 29 19 50a2 2 0 0 1-2 2c-22-22-25-45-21-54 2-3 6-5 9-5 15 2 24 38 23 60a2 2 0 0 1-2 2" fill="#f4b837" />
<path d="M130 186c-21 0-36-4-43-11a14 14 0 0 1-5-10 9 9 0 0 1 5-9c10-5 30 2 49 15a2 2 0 0 1-2 4c-19-14-38-19-45-15a5 5 0 0 0-3 5 10 10 0 0 0 4 7c7 7 25 10 50 9a2 2 0 0 1 0 4l-10 1" fill="#f4b837" />
<path d="M32 225a2 2 0 0 1-1-3c40-45 107-43 107-43a2 2 0 0 1 2 2 2 2 0 0 1-2 2s-65-2-105 42a2 2 0 0 1-1 0" fill="#f4b837" />
<path d="M143 174a12 12 0 0 1 6-7c15-6 26 12 29 19a53 53 0 0 0-9 15 35 35 0 0 0-3 7 34 34 0 0 1-13-6 28 28 0 0 1-11-17 19 19 0 0 1 1-11" fill="#ff3153" />
<path d="M177 186c-3 1-8 5-9 7a34 34 0 0 0-8 9 36 36 0 0 0-2 3 35 35 0 0 0 8 3 35 35 0 0 1 3-7 53 53 0 0 1 9-15" fill="#f1183c" />
<path d="M160 181c-3-4-11-9-17-8v1a19 19 0 0 0-1 11 28 28 0 0 0 8 15 13 13 0 0 0 10-4c5-4 4-10 0-15" fill="#ff6169" />
<path d="M166 212c-4 3-13 3-16-2l3-8a33 33 0 0 0 13 6 26 26 0 0 0 0 4" fill="#bf132f" />
<path d="M166 218h-1l-5 14c-8 2-19-4-20-5a146 146 0 0 0 9-17c4 5 13 5 16 2a28 28 0 0 0 1 6" fill="#d4d4d4" />
<path d="m165 218 1-1a27 27 0 0 1 0-5c-4 3-13 3-16-2 1 6 8 11 15 8" fill="#f0f0f0" />
<path d="M190 180c8 1 14 8 12 14l-8-2c-16 16-11 30-11 30l1 2c-4 5-11 6-15 1-2-1-3-4-3-7a28 28 0 0 1 0-6 27 27 0 0 1 0-4 35 35 0 0 1 3-7 53 53 0 0 1 9-15 23 23 0 0 1 7-5 10 10 0 0 1 5-1" fill="#f0f0f0" />
<path d="M201 194a10 10 0 0 0-1-3c-1-2-4-3-7-3l-6 4-3 8c-2 5-7 11-5 17a8 8 0 0 0 4 5c-1-2-4-15 11-30l7 2" fill="#d4d4d4" />
<path d="M174 213c1-5 4-10 6-14l3-6-3 4c-5 6-9 15-6 23a9 9 0 0 0 7 6h1a13 13 0 0 1-7-13" fill="#d4d4d4" />
<path d="M140 227c1 1 12 7 21 5a276 276 0 0 0-11 43c-9 10-19 7-26-27a97 97 0 0 0 16-21" fill="#d61535" />
<path d="M140 227a97 97 0 0 1-16 20l6 22c7-8 13-16 16-26a51 51 0 0 0 12-2l3-9c-9 2-20-4-21-5" fill="#bf132f" />
<path d="M324 171c11 0 20 29 11 50a24 24 0 0 1-2 4c-12 18-48 27-74 30a69 69 0 0 1-15 0c-22-3-46-16-60-31l-1-2s-5-14 11-30l8 2c13 3 36 7 55 2 27-6 55-25 67-25" fill="#ff3153" />
<path d="M209 206c7 2 22 7 29 3 4-3 7-6 9-11-16 1-34-2-45-4l-8-2a47 47 0 0 0-5 6 121 121 0 0 0 20 8m94-2c9-6 24-19 23-32a7 7 0 0 0-2-1c-12 0-40 19-67 25l-6 1c5 22 35 18 52 7" fill="#ff6169" />
<path d="M333 179c3 28-31 56-65 64-27 7-58 0-78-16-5-5-1-27 3-34-15 15-10 29-10 29l1 2c14 15 37 28 60 31a69 69 0 0 0 15 0c26-3 62-12 74-30a24 24 0 0 0 2-4c6-14 4-32-2-42" fill="#f1183c" />
<path d="m269 284-25-1v-28a69 69 0 0 0 15 0c26-3 62-12 74-30 0 2 4 8 7 21a257 257 0 0 1 6 34l-12 3a9 9 0 0 0-2-4c-4-3-14 0-14 0a35 35 0 0 1 3 6l-44 3c-2-3-5-4-8-4" fill="#f1183c" />
<path d="M323 247a80 80 0 0 0 13-14 67 67 0 0 0-3-8c-12 18-48 27-74 30a69 69 0 0 1-15 0v13c29 3 68-12 79-21" fill="#d61535" />
<path d="M338 238a83 83 0 0 1-14 13c-13 10-30 15-46 20h-1a149 149 0 0 0 64-22l-1-3-2-8" fill="#d61535" />
<path d="M169 226c4 4 11 3 15-2 14 15 37 28 60 31v28l-22 1c-5 0-8 2-10 7h-1l-34-2 1-1c0-1-7-6-10-2a12 12 0 0 0-1 2l-18-2 1-11a276 276 0 0 1 11-43c2-9 4-14 5-14 0 3 1 6 3 8" fill="#f1183c"/>
<path d="M199 268a83 83 0 0 1 3-12 24 24 0 0 0-4-5l-2-2a121 121 0 0 0-6 41h8a176 176 0 0 1 1-22m-6-21c-10-6-25-8-36-4a267 267 0 0 0-7 32l-1 11 17 2h1a12 12 0 0 1 1-2c3-3 10 1 10 2l-1 1 9 1a126 126 0 0 1 7-43" fill="#ff3153" />
<path d="M242 265h-2 2m2-10c-23-3-46-16-60-31-4 5-11 6-15 2-2-2-3-5-3-8s-2 3-3 8c2 9 11 14 21 13 12 16 28 27 56 30v14h4v-28" fill="#d61535" />
<path d="M171 324a327 327 0 0 0 39 4v3c0 7 5 10 18 10h19l1 14c-1 3-5 25-14 25-35-1-67-8-87-12l-21-6c6-27 22-43 22-43a113 113 0 0 0 13 3v6c2 3 10 1 10 1v-5" fill="#f1183c"/>
<path d="m161 370 2-9c2-10 7-20 11-30l3-6-6-1v5s-8 2-10-1v-6a112 112 0 0 1-13-3s-16 16-22 43l21 6 14 3m20-45-5 11c-4 10-8 19-10 29l-1 5 16 3c1-16 5-33 13-47l-13-1" fill="#ff3153" />
<path d="M247 341h-19c-13 0-18-3-18-10v-3h-2c-7 19 20 18 35 19a39 39 0 0 1-12 32l2 1c10 0 14-22 15-25l-1-14" fill="#d61535" />
<path d="M350 317c11 19 19 50 9 53l-29 4c-28 4-65 7-70 6-8-3-12-26-12-26v1l-1-14h23c3 0 9 0 9-7v-6a420 420 0 0 0 47-6h1v6s12 2 12-2a38 38 0 0 0 0-7h1l9-2h1" fill="#f1183c" />
<path d="M286 345a29 29 0 0 0 5-18l-12 1v6c0 7-6 7-9 7h-23l1 8c13 2 30 7 38-4" fill="#d61535" />
<path d="M330 374a127 127 0 0 0-2-16c-2-10-4-24-9-35l-7 1a150 150 0 0 1 11 51l7-1m20-57-10 2a38 38 0 0 1 0 7c-1 4-13 2-13 2v-6h-1l-3 1c5 11 7 24 9 34a134 134 0 0 1 2 17l25-4c10-3 2-34-9-53" fill="#e61739" />
<path d="M215 287a8 8 0 0 0-2 1 5 5 0 0 0-1 4 3 3 0 0 0 2 3 3 3 0 0 0 4-2 5 5 0 0 0 1-3v-1c0-2-2-3-4-2m67 21c-1-2-3-1-5-1a39 39 0 0 0-6 0c-2 1-1 3 0 3a24 24 0 0 0 7 0c1 0 4 0 4-2m-11-16h-2v1a2 2 0 0 0 1 1 1 1 0 0 0 1 0 1 1 0 0 0 0-2m-54 41a11 11 0 0 0-1-1 5 5 0 0 1-2-1 1 1 0 0 0-1 1 3 3 0 0 0 3 4c1 0 2-2 1-3" fill="#fbf4a3" />
<path d="M237 308c-5 0-5 7 0 7s5-8 0-7m-47-2c-4 0-4 7 0 7s5-7 0-7m119-1a3 3 0 0 0-2-2 3 3 0 0 0-4 2 3 3 0 0 0 5 4 3 3 0 0 0 1-4" fill="#7a3d26" />
<image width="400" height="530" transform="matrix(0.23, 0.03, -0.03, 0.23, 220.68, 59.26)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAEJCAMAAADmRZgJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhQTFRF2NjY2dnZ7e3t4eHh3t7e7Ozs3Nzc5OTk6 vr2tra5eXl29vb4ODg5 fn6enp4uLi39/f6urq3d3d7u7u6Ojo4 Pj5ubm7u7u UpuAAAABh0Uk5T//////////////////////////////8AzRMu6gAABetJREFUeNrs3QeWqzAMBVDZYEzvoP3v9CeZzHxS6AYsH70NwD3uzMQCPCJShnnW667zBuk63Wd5KOUhjwTThDDTRRlEAkYioqAsdBZKeyFNmHVlMip48yRll4WNfRCVFfVCw0BTF5myCNJU2l N MP4umqsgFRdvVnx2zBddTVExf5OxW 7xOo6SNOmERhLlLbNJRDZ12A4dS9PhyidwAFJtDoVoroIDkrUqdMgBzK2U9ZDZJzAwUlieTykreGE1O3BkDCFk5KGB0IaHcFpiXRzFKTy4dT41TEQLeDkCH0AJPThgvihaUgWwSWJMqOQpoDLUjTmINd0q3XdawkkT DSJLkZSC/g4ojeBKQDC9Lthlw5zFcN RlIk4IlSZs9EFmCNSnldoj0waL4citEWeW4SdQ2iLTMMd0m4xCZgnVJ5QaIBxbGWw/pwMp0ayExWJp4HaQVtkJEuwZSRWBtomo5RAZgcQK5GJKC1UmXQmKwPPEySC5sh4h8CcTuATI6TIDGij6/wn9AWiCRdg4iExqQRM5APCASbxqSA5nkUxAKM9bIzPUK0UAoehyiIkqQSI1CPCAVbwxSCVoQUY1ASiCW8jskB3LJv0JKepDyG4RggwybBCg3yLBJ/iAVkEz1AfFoQrx3SChoQkT4BtFANPoVQmnb 30T/IRkQDbZCySlC0mHEKpDfTDcgca3xanEA4hPGeL/h1DuWb99C8j3rGffAvI969m37hAlaEOEekJ6IJ7 CfGoQ7wfCN191nC/BWSPVG/HKyA/ T4nYHBgiDwGCWAT0IcEzQ1CfRV5riRA5Y G02lvEO0CRN8gngsQ7wbxXYD4CFT Hj2dREIoXICIEJyYtG7TFvRuQHrQbkA0eG5APEjdgKTguwHxIXADUrsCCSByAxKBcAMiGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEIYwhCEMYQhDGMIQhjCEIQxhCEMYwhCGMIQhDGEIQxjCEIYwhCEMYQhDGMIQhjBkCyRxAxK58/O92g1I7c5PXJ350XHhBqRw54f5mRuQHnI3IC0oV64TceaCF5qXen8sIwjoxPx7vwQpdgFyv5bKiWnrflGYdODWh8fVbS5csFXfL9NzYbQ/rjdEBzYpPxdOOrC2/1wBiuQPiUHzA kcGCIPCPnb234vLqa b/y7ShqJn9v/LvemPgH/v25dkd6lDC7Ap923BiUJaPetYZEIyvOWUMNCKoQ3ji FVChfuf5a2obuoeSt2BDd gpv5Z/IDvePglxU7/j KJFGdXX/LFpHcwb UkaQZsWhb4UdKTbJ11KbFJvke/FTek0yUo6W3MQ1WiCY2of50ZLNxMoOTRTRpnXAmihrTqq47mSheQzpjPcWpyB0xruH05CGyAkrUTMQKut7hnMQGp3Lw3kIhZnrbcYagSjrT70ixyUQbG0fJhqXQWw/v6e4FGL3R 0vA2QUIi3 jL5n0OYvNWJcM1EMwFoYE BbH1G2qBayF2rvAprofYOAmXcgvEvq8q/rhjEmKbZMoxDbFLMumYgdj0/zbTjjmIPSM nXbMQrC3Y2X0ZhzzEGxt2K10s685D8Hq oNWjCYgGF68FxYZmoGguvQYn RoCoLywoKcQYXmIBcuKHWIRiEYXzMNlxINQzC7QuI1aByCeWLh8rEFgmFg3/KxCYLKt2752AZBmdq2fGyEnHhCWbh8bIac9U1i6fKxHXLONLx4 dgBOWMaXr587IEcvxvWG15qC TgySvK8CzI7Sh/3ECpKzwRgvlRq3wh8VQIqkOOKEm29X02Q27zsPnZy1N4AcR4owTtjpfZA7mNFIO7SNFJvAyC2Jsa9Gm470X2QlBqE0OlzPe x27InbKzVcR hhHIjdLv2LREXmXiHYxAEJs23faJuI6VmTcwBLlPxrG/dt SFHlj6vHmIPdtcVwubhcRFK00 GyjkHu7ZEU92zAiSeNKmn2wacgD0 q0jsSIoSx604ijII/RL8M27rzU94NHar/0Cp3lSh70wH8CDADyhUiNEH7C5gAAAABJRU5ErkJggg=="/>
<path d="M301 92c-7-8-13-17-39-19-28-2-36 8-44 19s-24-28-19-33c10-10 35-18 59-16 42 3 71 24 66 36s-19 19-23 13Z" fill="#f0f0f0" />
<g mask="url(#a)">
<path d="M197 83c3-9 12-17 22-19a32 32 0 0 1 5-1c-7-1-13-1-18 3-7 3-9 10-9 17Z" fill="#fff" />
</g>
<g mask="url(#b)">
<path d="M257 47c-31-1-49 6-59 14h-1v1a40 40 0 0 0-4 4c-5 5-8 14-9 22-1 6 0 12 2 15 0-5 4-9 8-13-2-13 0-25 14-30 7-2 14-1 21 0 12 2 21-5 32-7 9-2 17 0 25 4l17 8 14 4h1l-3-2a108 108 0 0 0-58-20Z" fill="#fff" />
</g>
<g mask="url(#c)">
<path d="M241 64a88 88 0 0 0 14-2c11-2 20-1 30 3l20 5c-15-5-27-16-44-13-7 1-13 5-20 7Z" fill="#fff" />
</g>
<g mask="url(#c)">
<path d="M300 87c8 1 15-3 18-12 1-3-1-5-3-8l-1-1c2 7 0 11-5 16-5 3-11 3-16 2l-38-8c-14-3-29-4-43 0a35 35 0 0 0-12 4c15-8 35-6 52-4 16 2 32 8 48 11Z" fill="#d4d4d4" />
</g>
<g mask="url(#d)">
<path d="M320 71c3 11-7 21-21 18l-23-4c-12-3-24-5-37-6-16-1-33-1-44 10 5-3 69-11 113 9q15 1 20 7c3-4 6-16 0-25a43 43 0 0 0-8-9Z" fill="#d4d4d4" />
</g>
</svg>
</div>The used custom function svg2Png() is just a simplyfied example code and might not be appropriate to provide the best legacy browser support.
Thus consider posting a issue report on github for 'html2canvas' (or other used libraries).