Get rid of thin white lines between shape 'joins'

I've created an icon made out of basic shapes. It's 1 solid shape and has no gaps at all.

I want to use this icon as a preloader on a website as an SVG. The idea being each 'segment' (line) fades in one-by-one. So to do this I've sliced the solid shape up so each part is it's own shape (or polygon) so I can animated them individually. I've done this but there are thin white lines in between some of the shapes (image attached). I've checked the joins and I don't think I could get the shapes any closer together! The coordinates/points seem to be the same as well when I view the SVG mark-up.

Is there away to get around this? It's really going to impact the quality/sharpness of the preloader. I'm guessing I should be able to fix this somehow as I've seen plenty of more complex shapes which don't have any visible 'joins'.

Thanks, hope someone can shed some light on this ...even if it means drawing the shape again (hopefully not though).

Ok here is the source for the 2 SVG's I'm working with - both are the same icon, they're just both sliced differently so I could see when each 'part' loaded in which version looked best:

SVG 1:

<svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" viewBox="0 0 59.3 83.7" enable-background="new 0 0 59.3 83.7" xml:space="preserve">
<polygon fill="#79CEDB" points="29.6,70.2 0,40.6 0,54.1 29.6,83.7 "/>
<polygon fill="#79CEDB" points="9.6,43.4 29.6,63.4 29.6,49.9 9.6,29.8 "/>
<polygon fill="#79CEDB" points="29.6,29.6 9.6,9.6 9.6,23.1 29.6,43.1 "/>
<polygon fill="#79CEDB" points="29.6,29.6 49.7,9.6 49.7,23.1 29.6,43.1 "/>
<polygon fill="#79CEDB" points="9.6,43.4 0,33.8 0,0 9.6,9.6 "/>
<polygon fill="#79CEDB" points="49.7,9.6 59.3,0 59.3,40.6 49.7,50.1 "/>
<polygon fill="#79CEDB" points="59.3,40.6 59.3,54.1 29.6,83.7 29.6,70.2 "/>
</svg>

And SVG 2:

<svg version="1.1" id="Layer_1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" viewBox="0 0 59.3 83.7" enable-background="new 0 0 59.3 83.7" xml:space="preserve">
<polyline fill="#79CEDB" points="29.6,83.7 29.6,70.2 0,40.6 0,54.1 "/>
<polygon fill="#79CEDB" points="29.6,29.7 59.3,0.1 59.3,13.6 29.6,43.2 29.6,29.7 "/>
<polygon fill="#79CEDB" points="9.6,43.4 29.6,63.4 29.6,49.9 9.6,29.8 9.6,43.4 "/>
<polygon fill="#79CEDB" points="49.7,63.6 29.6,83.7 29.6,70.2 49.7,50.1 49.7,63.6 "/>
<g>
    <path fill="#79CEDB" d="M49.7,23.2"/>
    <polygon fill="#79CEDB" points="49.7,23.2 59.3,13.6 59.3,54.1 49.7,63.6 49.7,23.2   "/>
</g>
<polygon fill="#79CEDB" points="29.6,29.6 9.6,9.6 9.6,23.1 29.6,43.1 29.6,29.6 "/>
<polygon fill="#79CEDB" points="9.6,9.6 0,0 0,33.8 9.6,43.4 9.6,9.6 "/>
</svg>

I've just exported these from Illustrator again so they don't include any tweakery. Not sure why SVG 1 has a 'polyline' in it? And for SVG 2 why there is a <g> with a line/polygon? All the shapes we're constructed the same way and all have only 4 points?

Thanks again, Steve