How to automatically size SVGs?

Question

JavaScript

There is a certain SVG and there is not a certain number of elements inside it, I want the width and height and also the viewBox to be calculated relative to the content, that is, in other words, all the elements inside should be visible and for this I began to calculate its number and sizes like this .. .



But it’s obvious that I don’t know something ...

Somewhere I don’t count the sizes correctly or don’t count them at all ...

How is this done correctly?

The question does not carry any commercial meaning and does not have a monetary note .. only for educational purposes

Answer 1

If it is possible to edit the svg, then you can wrap all the content in a tag <g></g>and call the getBBox method for it , the resulting values ​​can be used as a viewBox

Alternative way: sum BoundingBoxes of all elements in svg, already suggested on another forum.

Answer 2

If proportions are not important, put on the background:

.mySvg {

  background: url('../mySvg.svg') #fff;
  background-size: 100% 100%;

}