Menu
So I am getting a weird size issue with the SVG element in HTML5. It is taking considerable more space than I suspected. Each small rectangle in the image is a rect element with width and height of "20".
The SVG element should have height and width of 20*10 = 200 but instead has dimensions of 680x508.
You can view the inspected svg element here -> http://i.stack.imgur.com/xrofn.png
The HTML looks something like this:
<svg>
<rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/>
<rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/>
<rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/>
...
</svg>
It should be noted that I am running node.js and mustache.js.
Edit: Apparently SVG does something when it isn't sure about the width/height. Setting it manually solves the problem.
<svg height="200" width="200">
644
The real reason for all your extra whitespace is simple. In your SVG you have specified a viewBox of "0 0 600 400" (a 600x400 area with origin at 0,0), but your drawing only occupies a much smaller region in the middle of that. If you fix the viewBox, the graphic will conform to the size you give to the SVG.
This is done using the attribute "preserveAspectRatio" and setting it to "none". Hopefully this helps some of your understanding of SVGs, as they're a really useful tool! Show activity on this post. If you want the SVG to stretch to the entire box, put preserveAspectRatio="none" on the root <svg> element.
Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis.
The SVG viewport seems to be determined by the parent element.
http://www.w3.org/TR/SVG/coords.html states that
The SVG user agent negotiates with its parent user agent to determine the viewport into which the SVG user agent can render the document..
You can specify the size of the SVG viewport by using widht and height
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/>
<rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/>
<rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/>
...
</svg>
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
