Question

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 680×508.

You can view the inspected svg element here -> https://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">

Answer 1

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>