Odd spacing between SVG elements

Question

I have generated SVG elements using some basic javascript and string concatenation: http://jsfiddle.net/8d3zqLsf/3/

These SVG elements have very little spacing betwe

Answer 1

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;
}