Perplexed by SVG viewBox, width, height, etc

Because the coordinates of viewbox are not x1, y1, x2, y2 - they are minx, miny, width and height.

For a precis on the viewBox see the (only) figure in this article: https://web.archive.org/web/20140119030353/https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg, inlined below for convenience:

That picture is worth 1000 words of explanation.

The width and height parameters, aka the viewport in W3C terminology are a different thing. But you're not changing those in the above example. There is a slightly complex algorithm for determining if the width and height from the SVG actually do anything because they can be overridden for example by the <object> tag that embeds the SVG in an HTML page. There are more corner cases explained at http://www.w3.org/TR/SVG/coords.html#ViewportSpace. For a more visually oriented (and perhaps more approachable) explanation of this viewport issue, you could also consult the Inkscape manual http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-SVG-Positioning.html (As an aside, there's an extension available to set the viewBox visually from Inkscape http://pernsteiner.org/inkscape/viewbox/; you don't really have to edit the XML directly as the Inkscape manual [still] says.)