I need to convert svg to png and I'm using currently canvg to do this. But it's not working properly. As for example, using the demo app on https://canvg.js.org/demo/index.html with the svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="overflow: hidden; position: relative;" viewBox="-174 -90 468 452" width="468" height="452" preserveAspectRatio="xMinYMin">
<path fill="none" stroke="#333333" d="M60,0L60,128" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,128L60,128" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,128L60,272" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M-84,0L60,0" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<path fill="none" stroke="#333333" d="M60,0L204,0" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.3.0</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<linearGradient id="ikr5p45-_ffffff:0-_B8B8B8:100" x1="0" y1="0.9999999999999998" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="f8x0o45-_ffffff:0-_B8B8B8:100" x1="0" y1="0.9999999999999998" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="lsc6m0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="ewq130-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="z96gg0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="0muoy0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<linearGradient id="v9b5l0-_ffffff:0-_B8B8B8:100" x1="0" y1="0" x2="1" y2="0" gradientTransform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#b8b8b8" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</linearGradient>
<radialGradient id="o2zvpr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="mrqpyr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="utdacr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="wuajcr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="zg67dr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="hidu8r_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="9tpgwr_.5_.1__ccc-_ccc" fx="0.5" fy="0.1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#cccccc" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
<radialGradient id="1ma5zr_.5_.9_hsb_0.53__1__.75_-hsb_0.53__.5__.25_" fx="0.5" fy="0.9" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<stop offset="0%" stop-color="#009dbf" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
<stop offset="100%" stop-color="#203a40" stop-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</radialGradient>
</defs>
<rect x="-30" y="182" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="28.88730162779191" y="240.8873016277919" width="62.22539674441618" height="62.22539674441618" rx="0" ry="0" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(0.7071,0.7071,-0.7071,0.7071,209.9066,41.4832)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<rect x="28.88730162779191" y="240.8873016277919" width="62.22539674441618" height="62.22539674441618" rx="0" ry="0" fill="url('#ikr5p45-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="5.092592592592593" transform="matrix(0.7637,0.7637,-0.7637,0.7637,221.8992,18.4598)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<path fill="#595959" stroke="none" d="M9.182800000000002,25.3319C9.182800000000002,25.3319,0.8701000000000001,33.6424,0.8701000000000001,33.6424C0.8701000000000001,33.6424,3.8665000000000003,36.6388,3.8665000000000003,36.6388C3.8665000000000003,36.6388,12.177000000000001,28.3272,12.17744,28.3272C12.177000000000001,28.3272,14.425400000000002,30.574500000000004,14.425400000000002,30.574500000000004C14.425400000000002,30.574500000000004,17.1578,20.376400000000004,17.1578,20.376400000000004C17.1578,20.376400000000004,6.959700000000001,23.108800000000002,6.959700000000001,23.108800000000002C6.959700000000001,23.108800000000002,9.182800000000002,25.3319,9.182800000000002,25.331350000000004C9.182800000000002,25.3319,9.182800000000002,25.3319,9.182800000000002,25.3319" opacity="1" transform="matrix(1,0,0,1,2.8873,291.1127)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1;" stroke-width="1" />
<rect x="-30" y="182" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="114" y="-90" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<circle cx="204" cy="0" r="40" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(1,0,0,1,3,3)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<circle cx="204" cy="0" r="40" fill="url('#lsc6m0-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<rect x="114" y="-90" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="-174" y="-90" width="180" height="180" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="-124" y="-40" width="80" height="80" rx="0" ry="0" fill="#808080" stroke="none" opacity="0.3" fill-opacity="1" stroke-width="3" transform="matrix(1,0,0,1,3,3)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0.3; fill-opacity: 1;" />
<rect x="-124" y="-40" width="80" height="80" rx="0" ry="0" fill="url('#z96gg0-_ffffff:0-_B8B8B8:100')" stroke="#333333" opacity="1" fill-opacity="1" stroke-width="3" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;" />
<rect x="-174" y="-90" width="180" height="180" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<rect x="34" y="-32" width="52" height="92" rx="5" ry="5" fill="#009999" stroke="none" opacity="0" fill-opacity="0.35" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
<circle cx="60" cy="0" r="6.5" fill="#dc7868" stroke="#000000" stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" /><text x="60" y="-20" text-anchor="middle" font-family="Tahoma" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Tahoma; font-size: 14px;">
<tspan dy="-20" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" />
</text>
<rect x="34" y="-32" width="52" height="92" rx="0" ry="0" fill="#008000" stroke="none" opacity="0" fill-opacity="0.35" transform="matrix(1,0,0,1,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0; fill-opacity: 0.35;" />
</svg>The results are different on png than svg as in the image:
I think this is called masking, but I'm not an svg guru and I don't really know.
Is there any solution or alternative that will raster the images properly?
