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: