The width & height attributes
In the <svg>
tag, width
and height
attributes don't scale the image. When you use inline SVG (i.e., put <svg>
directly in your HTML code), width
and height
parameters define the image area within the web page, but the graphics' size stays the same, as well as its placement.
For actually scaling the image itself and defining the image aspect ratio, you should use the magic viewbox
attribute. The syntax consists of 4 numbers, of which the first 2 are x and y coordinates followed by width and height parameters in pixels.