Why doesn't svg scale to 100% width of parent container with an explicit width on the svg

Question

Why doesn't my svg scale to the size of its container when there is an explicit width and height on the svg? I can see that the svg styles are overwritten in the dev tools, but it doesn't seem to do anything.

I understand that I can remove the width and the height of the svg to make it scale, but I am interested why it doesn't work with the css overwrite.

example case:

div {
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

svg {
  width: 100%;
  height: auto;
}

<div>
  <svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
    <rect width="300" height="130" x="0" y="0" rx="20" ry="20" fill="blue" />
  </svg>
</div>

Answer 1

As @Temani Afif said, the svg is taking the full width of its container, but the rect inside the svg element is not. Simply add a style: width:100%; to make the rect take the full width of its container:

div {
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

svg {
  width: 100%;
  height: auto;
}

<div>
  <svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
    <rect style="width: 100%;" height="130" x="0" y="0" rx="20" ry="20" fill="blue" />
  </svg>
</div>