How to make a <svg> element expand or contract to its parent container?

Question

The goal is to have the element expand to the size of its parent container, in this case a

, no matter how big or small that

Answer 1

@robertc has it right, but you also need to notice that svg, #container causes the svg to be scaled exponentially for anything but 100% (once for #container and once for svg).

In other words, if I applied 50% h/w to both elements, it's actually 50% of 50%, or .5 * .5, which equals .25, or 25% scale.

One selector works fine when used as @robertc suggests.

svg {
  width:50%;
  height:50%;
}