Eu criei elementos SVG usando algumas concatenações básicas de javascript e string:http://jsfiddle.net/8d3zqLsf/3/

Esses elementos SVG têm muito pouco espaçamento entre eles (1px no máximo) e estão a uma distância aceitável um do outro.

Quando copio o SVG gerado e o renderizo como parte do DOM normal e não gerado no carregamento da página, ele possui um espaçamento ímpar entre os elementos SVG.http://jsfiddle.net/1n73a8yr/

Nota: Verifiquei que o SVG tem apenas a largura da forma, portanto, o espaço adicional não vem do SVG.

Por que os SVGs são renderizados de maneira diferente quando são injetados no carregamento da página versus quando são renderizados como parte do DOM? Existe uma maneira de resolver esse problema sem recorrer a um atributo css esquerdo no svgs com um valor de pixel negativo?

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