Menu
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?
447
The default 300×150 size also applies to inline <svg> elements within HTML documents, but that's a relatively recent consensus from the HTML5 specifications: other browsers will by default expand inline SVG to the full size of the viewport—equivalent to width: 100vw; height: 100vh; — which is the default size for SVG ...
Values of width and height: With the width and height values you can change the size of the SVG vector. So, if we want to change the size and make it larger, then set the value for width and height, in viewBox, smaller then the width and height properties of the SVG element.
We use viewBox to make the SVG image scalable. viewBox = “0 0 100 100”: defines a coordinate system having x=0, y=0, width=100 units and height=100 units. Thus, the SVG containing a rectangle having width=50px and height=50px will fill up the height and width of the SVG image, and all the dimensions get scaled equally.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. The value of the viewBox attribute is a list of four numbers: min-x , min-y , 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.)
83
Because the coordinates of viewbox are not x1, y1, x2, y2 - they are minx, miny, width and height.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
