0

I have a lot of svgs on the page and each has different viewbox but they should have the same height and width (f.e. 20px), is there a way to map viewbox sizes of all svgs so that they will look the same?

<svg viewBox="0 0 24 24" width="20px" height="20px">
    <path d="M2.75,11.9166667 L10.0833333,11.9166667 L10.0833333,2.75 L2.75,2.75 L2.75,11.9166667 L2.75,11.9166667 Z M2.75,19.25 L10.0833333,19.25 L10.0833333,13.75 L2.75,13.75 L2.75,19.25 L2.75,19.25 Z M11.9166667,19.25 L19.25,19.25 L19.25,10.0833333 L11.9166667,10.0833333 L11.9166667,19.25 L11.9166667,19.25 Z M11.9166667,2.75 L11.9166667,8.25 L19.25,8.25 L19.25,2.75 L11.9166667,2.75 L11.9166667,2.75 Z"></path>
</svg>

<svg height="20px" width="20px" viewBox="-50 0 600 600">
    <path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path>
</svg>

I want them to have the same height and width, but when I resize the viewbox I should guess the sizes and it's very time consuming.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Alopwer
  • 611
  • 8
  • 22
  • 1
    You mean you want to find the viewBox value that would make the content take the full space of the svg area? https://stackoverflow.com/questions/29002472/find-svg-viewbox-that-trim-whitespace-around – Kaiido Oct 06 '20 at 06:55
  • If you have only one path in each svg element you can do `let bb = the_path.getBBox()` and use the result to build the value for the `viewBox = "bb.x bb.y bb.width bb.height"`. If you have several paths in the svg element you may need to grpup those paths and get the bounding box for the group – enxaneta Oct 06 '20 at 11:33

0 Answers0