Perplexed by SVG viewBox, width, height, etc
svg
Solution
Because the coordinates of viewbox are not x1, y1, x2, y2 - they are minx, miny, width and height.
Problem
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 coordinate values in their `svg` tags. More specifically, for every (x, y) pair in the first listing there's an (x-205, y-55) pair in the second listing.) ``` <!DOCTYPE html> <html> <head><title>title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="210" height="60" viewBox="0 0 210 60"> <g style="stroke: black; fill: none;"> <path d="M 5 5 Q 105 55 205 55"/> </g> </svg> </body> </html> ``` ``` <!DOCTYPE html> <html> <head><title>title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="-205" y="-55" width="210" height="60" viewBox="-205 -55 5 5"> <g style="stroke: black; fill: none;"> <path d="M -200 -50 Q -100 0 0 0"/> </g> </svg> </body> </html> ``` In fact, according to Firefox at least, they look quite different. The rendering that I expected for both of them is what Firefox delivers for the first one (namely, a curve gently sloping down from left to right, with an initial slope of -1/2 and and final slope of 0). I'm utterly befuddled by what FF produces for the second one, because, AFAICT, the second spec is a simple wholesale ("rigid") translation, by the vector (-205, -55), of the first one. Why don't the two displays look identical?