Perplexed by SVG viewBox, width, height, etc

Question

If my understanding of SVG were correct, the following two SVG descriptions would result in identical images, but they don\'t. (NOTE: The two code listings differ only in the c

Answer 1

Very late on this one, but to clarify a point Michael made above for future viewers:

if you change some of the numbers in here, but not many, you'll get the same result.

One issue you're running into is that you think that min-x + width is supposed to be the same in either svg node. min-x and min-y are the leftmost and topmost coordinates of your viewBox - effectively changing the 0, 0 position to min-x, min-y, and are really only relevant to the coordinate system of the viewBox (and by extension to your path's d attribute), not to sizing of the viewBox itself.

Also, the x and y position of an svg node are valid but ignored and have nothing to do with any placement.

So to have your second path look like your first, you can strip away the x and y attributes, and change the width and height numbers insideviewBox to match the first one:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 width="210" height="60" viewBox="-205 -55 210 60">

  <g style="stroke: black; fill: none;">
    <path d="M -200 -50 Q -100 0 0 0"/>
  </g>

</svg>

Answer 2

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

Answer 3

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.)