I have a svg with background patterns defined using images. To convert this SVG into png and save in disk , I am using canvg to convert first into canvas and into png image as follows:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg'));
v = canvg.Canvg.fromString(ctx, svgString);
v.start();
var img = canvas.toDataURL("image/png");
$("#canvasimg").attr("src", canvas2.toDataURL("img/png"));
But the parts of svg with pattern defined in image are rendered black.
The original SVG is as:
The image comes out as above with black rectangle where handle is in svg.
How do I get and save png image as exactly drawn in svg?
My SVG code is as:
<svg id="lin" viewBox="-1 0 1366 654" preserveAspectRatio="xMidYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="z-index: 2; margin: 0px; padding: 0px; width: 100vw; height: 100vh; position: absolute; inset: 0px; cursor: default;">
<defs id="patternDefination">
<pattern class="ptnMaterial" id="Mirror1" patternUnits="userSpaceOnUse" width="256" height="256">
<image xlink:href="https://i.imgur.com/dt5Fa7t.png" x="0" y="0" width="256" height="256"></image>
</pattern>
<pattern id="smallGrid" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="#777" stroke-width="0.25"></path>
</pattern>
<pattern id="grid" width="180" height="180" patternUnits="userSpaceOnUse">
<rect width="180" height="180" fill="url(#smallGrid)"></rect>
<path d="M 200 10 L 200 0 L 190 0 M 0 10 L 0 0 L 10 0 M 0 190 L 0 200 L 10 200 M 190 200 L 200 200 L 200 190" fill="none" stroke="#999" stroke-width="0.8"></path>
</pattern>
<pattern id="hatch" width="5" height="5" patternTransform="rotate(50 0 0)" patternUnits="userSpaceOnUse">
<path d="M 0 0 L 0 5 M 10 0 L 10 10 Z" style="stroke:#666;stroke-width:5;"></path>
</pattern>
</defs>
<g id="boxgrid">
<rect width="8000" height="5000" x="-3500" y="-2000" fill="url(#grid)"></rect>
</g>
<g id="boxpath"></g>
<g id="boxSurface"><path d="M552,320 L754,320 L754,72 L552,72 L552,320" fill="#fff" fill-opacity="1" stroke="none" fill-rule="evenodd" class="room"></path></g>
<g id="boxRoom"><path d="M552,320 L754,320 L754,72 L552,72 L552,320" fill="url(#Mirror1)" fill-opacity="1" stroke="none" fill-rule="evenodd" class="room"></path></g>
<g id="boxwall"><path d="M559.5,79.5 L544.5,64.5 L544.5,327.5 L559.5,312.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M544.5,64.5 L559.5,79.5 L746.5,79.5 L761.5,64.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M761.5,64.5 L746.5,79.5 L746.5,312.5 L761.5,327.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><path d="M559.5,312.5 L544.5,327.5 L761.5,327.5 L746.5,312.5 Z" stroke="none" fill="#ff0000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path></g>
<g id="boxcarpentry"></g>
<g id="boxEnergy"></g>
<g id="boxFurniture"></g>
<g id="boxbind"></g>
<g id="boxArea"><text x="652" y="174" style="fill:#343938;font-weight:normal;font-size:12.5px" text-anchor="middle">A : 12.10 m²</text></g>
<g id="boxRib"><text x="559" y="190.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 559,195.5)">3.88</text><text x="652.5" y="59" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,64)">3.62</text><text x="761" y="190.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 761,195.5)">4.38</text><text x="652.5" y="307" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,312)">3.12</text><text x="544" y="210.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 544,195.5)">4.38</text><text x="652.5" y="94" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,79)">3.12</text><text x="746" y="210.5" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(90 746,195.5)">3.88</text><text x="652.5" y="342" text-anchor="middle" font-family="roboto" stroke="#ffffff" font-size="0.9em" stroke-width="0.2px" fill="#555555" transform="rotate(0 652.5,327)">3.62</text></g>
<g id="boxScale" style="display: inline-block;"><path d="m794,72 l60,0 m-40,10 l10,-10 l10,10 m-10,-10 l0,248 m-30,0 l60,0 m-40,-10 l10,10 l10,-10M552,32 l0,-60 m10,40 l-10,-10 l10,-10 m-10,10 l202,0 m0,30 l0,-60 m-10,40 l10,-10 l-10,-10" stroke="#555" fill="none" stroke-width="0.3" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" fill-rule="nonzero"></path><text x="824" y="231" fill="#555" text-anchor="middle" transform="rotate(270 824,196)">4.13 m</text><text x="653" y="-23" fill="#555" text-anchor="middle">3.37 m</text></g>
<g id="boxText"></g>
<g id="boxDebug"></g>
</svg>