Search code examples
javascriptphpcanvassvgmozilla

SVG image is not loading in canvas in Mozilla browser

SVG image is not loading in canvas in Mozilla browser but the save code is working fine in Chrome. I attached my code here. Please check and let me know the solution.

var canvasProduct = document.getElementById('canvas');
var ctxProduct = canvasProduct.getContext('2d');    
var newproductSvg = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.11 205.65">.....</svg>
    var imageObj = new Image();    
    imageObj.onload = function() {
                ctxProduct.drawImage(imageObj,0,0,100,100);
                console.log("Shadow image loaded");
            }
    imageObj.src = "data:image/svg+xml;charset=utf-8,"+newproductSvg;

Here is svg data :

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 376.94">
                                                <defs>
                                                    <style>
                                                    .cls-2 {
                                                        fill: #1e73be;
                                                    }
                                                    </style>
                                                </defs>
                                                <title>crewNeck Tshirt</title>
                                                <path class="cls-2" d="M80.16,372.86c1.81-21.51,2.63-43.09,3.14-64.65.37-15.66,1.46-31.28,1.73-47,.45-25.59.13-51.24,2.52-76.78.52-5.58.92-11.19,1.12-16.79a30.28,30.28,0,0,1,6.09-17.16c2.05-2.82.26-5.66-.38-8.17s-3.29-.81-4.88-.34c-15.57,4.57-32,5-47.42,10.4-2.09.73-4.12,1.16-5.62-1.35-11.8-19.69-25.69-38.14-34.94-59.32-.4-.92-.74-1.86-1.06-2.81-1-2.91-.56-4.75,2.59-6.55,6.25-3.56,12.2-7.58,19.56-8.52a3.87,3.87,0,0,0,1.55-.61c16.7-10.87,34.36-20,51.69-29.81,18.15-10.23,38-15.12,57.74-20.57,9.94-2.75,19.78-5.88,29.64-8.94,1.42-.44,2.69-.84,4.15-.29C187,21,206.46,20.18,225.81,12.57c2-.79,4-1.58,6.24-.54,11.9,5.61,24.74,7.88,37.51,10.25,22.42,4.16,43.69,11.66,64.41,21,7.05,3.18,14.84,5.06,21.33,9.07,13,8,28.47,8.4,41.91,14.78,2.75,1.3,3.43,2.26,2.22,5.27a375,375,0,0,1-18.94,40.94A219.55,219.55,0,0,0,369,137.41c-1.45,3.6-3.06,5.28-7.38,5.16-13.64-.38-27.29,1-41,.22-4.16-.23-8.27-1-12.48-.72-1.68.13-2.14.87-3.06,2.13-3.18,4.34-3.09,8.82-3.22,14.06-.34,14.66,3.28,28.78,4.25,43.22,1.38,20.52,3.69,41,4.91,61.5,1,17.65,3,35.25,3.83,52.92,1,21,1.87,42,1.58,63,0,2.58-.68,3.67-3.46,3.3-11.82-1.6-23.57.13-35.23,1.47-34.8,4-69.61,6.29-104.63,3.75-20.8-1.51-41.49-4.36-62.34-5-8.91-.29-17.85-.16-26.77,0-3.26.05-4.93-.57-4-4.32C80.51,376.4,80.16,374.58,80.16,372.86Z" transform="translate(0 -11.53)" />
                                            </svg>

Thanks in advance

Solution

  • You've two separate problems.

    1. the root <svg> element needs explicit width and height attributes that are not percentages
    2. the # character is a reserved character in a URL and must be escaped as %23