How to Scale a Big SVG on a Website - 2024-01-29
When I tried to add a rather big SVG file to a website, I had to find a way to scale it properly (to my current knowledge).
The SVG in question is a map of the world.
When you open the link you can already see the problem that also happens when you try to embed it into a website. It will be shown in its full size.
The file starts with the following <svg> tag:
<svg xmlns="http://www.w3.org/2000/svg" height="1200" width="2370">
The obvious change would be to alter width and height but this resulted
in the SVG only showing parts of the drawn graphic. It kind of zoomes into the
image.
Then I tried to transform the content with an additional element:
<g transform="scale(0.8)">
But this turned out to be a bit static. Viewing the website on a mobile device did not change the size of the SVG at all. So it was too small for a desktop size screen and too big for a mobile device screen.
The solution was to add a div element and some attributes for the SVG tag:
<div style="max-width:300px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 2370 1200" preserveAspectRatio="xMinYMax meet">
[...]
The initial width and height attributes are now part of a viewBox attribute.
The width is set to 100% to make it as big as the parent div element which
has a max-width of 300px. Finally, the preserveAspectRatio="xMinYMax meet"
is something that I do not fully understand yet, but it was the solution to
align the SVG the the left side of the screen.
Sources: