<?xml version="1.0" encoding="utf-8"?>

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.

Improve your UX & Product skills with interactive courses that actually work