SVG generates blank space

Question

I'm using SVG in my project, now I have to create a SVG element inside a web page with only <defs>. Later in the page I've to use many times the objects defined earlier. The problem lies in the object with the definitions, infact it creates a blank space in the page. Try this code:

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
            </defs>
        </svg>

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
            <use x=0 y=0 xlink:href="#star">
        </svg>
    </body>
</html>

I have the problem with both Firefox and Chrome. I don't care about IE.

jussinen · Accepted Answer

The two reasons why this is happening is:

lack of dimensions
<svg> are rendered as display:inline

Adding dimensions to the <svg> tag will initially hide most of the space taken but a small portion will remain.

Setting display:none will hide any patterns / gradients / etc referenced in other <svg> elements and so is not appropriate.

To hide it completely, set the <svg> tag as display:block. It will then respect the zero-length dimensions given earlier.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block;">
    <defs>
        <polygon id="star" points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </defs>
</svg>

SVG <defs> generates blank space

Tags:

html

svg

Max Markson

1 Answers

jussinen

Recent Activity

Donate For Us