0

I have the following code:

const svg = new Image();
svg.src = "https://svgur.com/i/soR.svg";

const ctx = document.querySelector("canvas").getContext("2d");

function drawImage() {
  ctx.drawImage(svg, 0, 0);

  requestAnimationFrame(drawImage);
}

requestAnimationFrame(drawImage);
<canvas></canvas>

If you run this in Chrome or Safari or Edge, a lamb is rendered to the canvas.

However, in Firefox, this does not occur.

If I give the svg file a width and height value, then it renders in Firefox, however, I do not want to do this. I only wish to use viewBox, and I have hundreds of SVGs, and I really, really do not want to manually calculate and add width and height values to each one.

Is there a way to get this SVG to render in Firefox without modifying the SVG?

Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
  • No, you must modify the file, be it in the browser. Or you could write a patch to Firefox so that they finally fix that bug. – Kaiido May 04 '23 at 15:18
  • Okay, I ended up just loading all the SVG images in Chrome and querying the `width` and `height` values that Chrome computed, and took an hour to edit all the SVG files and inserted all those width and height values into the SVG files. Works now – Ryan Peschel May 04 '23 at 16:16
  • You could have prevented hard-coding all width/height values with my native JavaScript [```` Web Component](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd); – Danny '365CSI' Engelman May 05 '23 at 06:28
  • @Danny'365CSI'Engelman they want to draw it on a canvas. They must hardcode the width and height attribute for Firefox to be able to do that. – Kaiido May 10 '23 at 12:10

0 Answers0