Get rid of thin white lines between shape 'joins'

Question

I've created an icon made out of basic lines/shapes in Adobe Illustrator, then make it one solid, continuous shape.

I want to use this icon as a pre-loader on a website, the idea being each 'segment' slides/fades in one-by-one. So to do this I've sliced the solid shape up so I can animate each section individually. I've done this but there are thin white lines 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 exactly the same as well.

You can see what's happening in the image below:

Is there away to get around this? It's really going to impact the quality/sharpness of the icon. 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'.

Here's the source for the SVG's I'm working with:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249 351.5" enable-background="new 0 0 249 351.5" xml:space="preserve">
        <path d="M0,0l39,39.9v84.8l85,84.9v57L0,141.8V0z"/>
        <path d="M124,124.8v57L39,96.9v-57L124,124.8z"/>
        <path d="M124,124.8L249,0v57L124,181.8V124.8z"/>
        <path d="M209,96.9L249,57v169.7L124,351.5v-57l85-84.9V96.9z"/>
        <path d="M124,351.5L0,226.7v-57l124,124.8V351.5z"/>
</svg>

Also the codepen where you can see the icon in a webpage:

http://codepen.io/moy/pen/yyvVZm

And how it animates (so you can see why I've broke the shape up):

http://codepen.io/anon/pen/xbYmRJ

Thanks again, hope someone can help!

Answer 1

Here's an idea:

What if you loaded segments incrementally in layers, with each layer defined as a single path? 1. Load segment 1
2. Load segments 1 & 2 on top of 1
3. ...

(If you posted the SVG source, it would help answer the question.)

UPDATE:

Here is a link that may be useful: http://css-tricks.com/animating-svg-css/. Pay particular attention to the example. Here it is in CodePen, where you can tweak the code: http://codepen.io/chriscoyier/pen/dvjhn

Notice that there are no objects, only paths.

AFAIK, paths are the only sure way to avoid the gaps. Don't waste any effort trying to do this with objects. You'll think you've fixed the problem, but when you zoom in or out on the image, the gaps will reappear.

Why? Because though a Scalable Vector Graphic is a mathematically defined image that looks the same at different resolutions, display hardware only understands pixels, which are aligned like the squares on graph paper.

To see what I mean, try scaling either one of your images up and down slowly. At certain sizes, the outer vertical gaps between the objects (2 on the left and 1 on the right) will disappear. This is where the edges of the objects align with the display's pixel grid. (The center vertical gaps, however, appear to be a design flaw.)

But gaps (or overlaps) between diagonal (or curved) edges of objects will always be there because the underlying grid structure of the display cannot properly display any edge except a horizontal or vertical one.

The solution: Don't create separate polygonal objects and expect to join them seamlessly; create paths that encompass all the polygons within a single definition. No edges, no gaps.

SVG is a powerful tool, and paths lie at the heart of it's power.

I hope that this answer helps clarify what @joojaa stated in his response and that the links I listed help you achieve the result you are looking for.

If you have further questions, I'll try to answer in this forum, or you can send me an email (click on my username to see the address).
UPDATE - Jan 30 2015: Whoops, that's not allowed.

NEW UPDATE:

After I got finished with all this yada about paths, I came across this link that seams to put the lie to everything I said: snapsvg.io/demos/#mascot (My level on this forum is too low to post a third link in an answer, so you'll have to copy/paste the link into your browser.)

I don't have the energy to investigate it, but it appears to achieve what you seem to be trying to do. Me, I'm sticking with paths; I understand them.

GOOD LUCK