I have generated SVG elements using some basic javascript and string concatenation: http://jsfiddle.net/8d3zqLsf/3/
These SVG elements have very little spacing between them (1px max) and are within an acceptable distance from each other.
When I copy the generated SVG and render it as part of the normal DOM and not generated on page load, it has odd spacing between the SVG elements. http://jsfiddle.net/1n73a8yr/
Note: I have verified that the SVG is only as wide as the shape within it, so the additional space is not coming from the SVG.
Why do SVGs render differently when they are injected on page load vs when they are rendered as part of the DOM? Is there a way to solve this problem without resorting to a left css attribute on the svgs with a negative pixel value?
HTML:
<div>
<svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
<svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
<svg width="86.60254037844386" height="100"> <polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon></svg>
</div>
CSS
svg {
display:inline-block;
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
}
add display: block; 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! Save this answer.
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element.
Padding on an svg element actually widens the canvas upon which svg shapes can be visible.
It's not your actual SVG's, its the 'automatic' spacing between inline-block elements.
It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. REF
There are numerous ways to counter-act this. 1 approach is shown in @dippas's answer, using a html comment <!-- -->
to absorb the space between the elements.
My preference is to set an encapsulating elements's font-size
to 0
.
svg {
display: inline-block;
}
.container{
font-size: 0;
}
<div class="container">
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
</div>
The Issue:
a series of
inline-block
elements formatted like you normally format HTML will have spaces in between them.
inline-block
is:
The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
in this case since is a svg
you can comment the empty spaces in HTML.
svg {
display:inline-block;
}
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg><!-- --><svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg><!-- --><svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
More info about empty spaces using inline-block
Nowadays (and for awhile), there is a better approach then every hack for inline-block
elements, which is using display: flex
as parent.
div {
display: flex
}
<div>
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
<svg width="86.60254037844386" height="100">
<polygon xmlns="http://www.w3.org/2000/svg" id="0" style="fill:#6C6;" points="86.60254037844388,25.000000000000004 86.60254037844388,75 43.30127018922193,100 -7.105427357601002e-15,75 -7.105427357601002e-15,25.000000000000014 43.301270189221924,0 "></polygon>
</svg>
</div>
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