Why is this svg cropped and not scaled?

Question

I'm new to SVG and a bit surprised that this example is cropped and not scaled? Whats missing to make it scaleable/sizeable using width/height in the svg element?

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="200px"
     height="200px"
     viewBox="0 0 400px 400px">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <circle cx="200px" cy="60px" r="100" fill="red"
                    transform="translate(0,50)" />
    <circle cx="200px" cy="60px" r="100" fill="blue"
                    transform="translate(70,150)" />
    <circle cx="200px" cy="60px" r="100" fill="green"
                    transform="translate(-70,150)" />
  </g>
</svg>

Answer 1

Because if your viewBox is invalid the viewport is determined by the width and height of the outermost element (in your case the SVG element at 200x200px). Since your content overflows this it is cropped.

By defining a valid viewBox of 400x400 you gave your content enough room inside the viewBox but it was all scaled to fit inside the SVG element. The viewBox is a sort of virtual space mapped onto the real space.

The issue is fairly involved. The viewport and the viewbox are different things. The spec covers both in detail: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute