javascript - How does chrome determines SVG size

Question

I wanted to load an image via base64 in vanilla javascript. So I used this bit of code (code simplified to show my point) :

let FR = new FileReader();
FR.addEventListener("load", function(e) {
  let img = new Image;
  img.onload = function() {
    console.log(`image size : ${this.width}x${this.height}`);
  };
  img.src = FR.result;
});
FR.readAsDataURL( value.files[0] );

However, when I load an SVG which has only a viewbox and no height/width, the size is not the same on Safari and Chrome. Where Safari seems to use the viewbox as a base for it's size, Chrome seems to choose random values.

Example :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.92 41.51"><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path d="M21.78,37a2.62,2.62,0,0,0,3.7,3.7,19.79,19.79,0,0,1,28,0,2.62,2.62,0,0,0,3.7-3.7A25,25,0,0,0,21.78,37Z" style="fill:#192736"/><path d="M11.13,26.39a2.62,2.62,0,1,0,3.7,3.7,34.87,34.87,0,0,1,49.26,0,2.62,2.62,0,0,0,3.7-3.7A40.11,40.11,0,0,0,11.13,26.39Z" style="fill:#192736"/><path d="M39.46,0A54.32,54.32,0,0,0,.77,16a2.61,2.61,0,1,0,3.69,3.7,49.49,49.49,0,0,1,70,0,2.62,2.62,0,1,0,3.7-3.7A54.36,54.36,0,0,0,39.46,0Z" style="fill:#192736"/></g></g></svg>

On Safari, the height of the image would be 79x42, whereas Chrome would show 285x150. Thus when I am processing the height and width of the image, I obtain different results on Safari and Chrome.

The obvious answer would be to set a width and height explicitely on the SVG itself, but I really want to know why this happen and how to prevent it from happening.

question from:https://stackoverflow.com/questions/65625935/how-does-chrome-determines-svg-size

Answer 1

An outer <svg> element is technically a replaced element as far as the html/css specifications are concerned. If the size of a replaced element cannot be determined then the browser should fall back to a size of 300 x 150px.

Chrome can't determine the size so that's what it's using. Note that a viewBox should only be used to define the page's aspect ratio and not any absolute size so it seems that Chrome is using 150 and the viewBox aspect ratio to produce 285 i.e. 150 x 78.92 / 41.51 ≈ 285.2

Safari's rendering would seem incorrect as there is no defined size here. The viewBox determines the internal co-ordinate system and the aspect ratio it should not be used to determine the external size as well, that's what the width and height attributes are for.

In short if you want things to work well cross-browser, use width and height attributes or CSS properties.