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

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)

So what to do?

in this case since is a svg you can comment the empty spaces in HTML.

svg {
    display:inline-block;
}

More info about empty spaces using inline-block

---

UPDATE(2019)

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
}