CODEWITHSUNDEEP
htmlsvg
Endy Tjahjono
Endy Tjahjono

Reputation: 24500

Vertical gap between SVG and DOM

I have an SVG embedded inside HTML like this:

<p>Before SVG</p>
<svg viewBox="-1 -1 19 6">
    <g>
        <circle cx="0" cy="0" r="0.4"></circle>
        <circle cx="17" cy="0" r="0.4"></circle>
        <circle cx="0" cy="4" r="0.4"></circle>
        <circle cx="17" cy="4" r="0.4"></circle>
    </g>
</svg>
<p>After SVG</p>

I have made a fiddle of it.

In Google Chrome 30.0.1599.101 there is a big vertical gap / space between Before SVG and the SVG and between the SVG and After SVG. In Firefox 24 and IE 11 there is no vertical gap.

Is it possible to remove those gaps in chrome? I want the svg to be as big as the g.

Upvotes: 3

Views: 735

Answers (3)

Paul LeBeau
Paul LeBeau

Reputation: 101966

You haven't specified a width and height. So the SVG is defaulting to width="100%" height="100%". Just add a width and height, like so:

<svg viewBox="-1 -1 19 6" width="20px" height="7px">
    <g>
        <circle cx="0" cy="0" r="0.4"></circle>
        <circle cx="17" cy="0" r="0.4"></circle>
        <circle cx="0" cy="4" r="0.4"></circle>
        <circle cx="17" cy="4" r="0.4"></circle>
    </g>
</svg>

Although at 20pxx7px it's a bit hard to see. I'm assuming that's what you meant by "svg as big as the g".

Demo: http://jsfiddle.net/AG7xf/3/

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241278

Weird behavior..

The height seems to stretch to 100% therefore creating this vertical gap by extending the vertical alignment of the viewBox. By setting width:100%, and height:0% this behavior is overwritten.

jsFiddle here - appears to work in Chrome/FF/IE

Additionally, the p has a default margin. Reset those to 0px.

Note: In the above example - I tweaked the cy values of the circles in order to eliminate all the gaps. Here is an example without that. jsFiddle here - there is still a slight gap, however, it is nowhere near what it was before.

Upvotes: 1

mavrosxristoforos
mavrosxristoforos

Reputation: 3663

I just changed the miny value, and it seems to have removed the gap:

<svg viewBox="-1 4 19 6">

http://jsfiddle.net/AG7xf/1/

Upvotes: 0

Related Questions