5

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:

enter image description here

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!

  • 1
    Merge shapes into one continuous path and animate a dashed stroke over it. Its a rendering artefact sort of writing the rendering engine anew not possible to do. (the rendering engine is not based on sampling but assumptions about how the polygons connect which is a bad bet in certain situations) – joojaa Jan 26 '15 at 16:13
  • If you select all the anchors vertically and use Object > Path > Average and tick Vertical and hit OK is it better? @joojaa is correct that it's an on-screen rendering issue. Usually prints won't show the hairline and saving as raster with Art Optimized anti-alias settings usually removes it as well. But if it's showing in SVG, you may need to rethink the joins. – Scott Jan 26 '15 at 16:27
  • You could adapt an approach similar to the one suggested in this answer. – Wrzlprmft Jan 26 '15 at 16:58
  • Thanks for the replies. I tried Object > Path > Average > Vertical but it didn't seem to make any difference. I don't think I can save an SVG with Art Optimised? I've looked the joins @Scott and they seem ok. The 5 diagonal lines are all the same shape just duplicated and repositioned - so they should be consistent. Zooming in I can see all the flat joins are 100% flat, no bumps or anything. Any other ideas on rethinking the joins? Thanks again - Steve – user1406440 Jan 27 '15 at 14:10
  • Check out this question on GDSE: graphicdesign.stackexchange.com/questions/15475/…. It should help. – chiropterist Jan 30 '15 at 16:40
2

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

  • No problem, I'll post the source I have. I'll I guess I'll have to post it as an answer - hope that's ok! – user1406440 Jan 28 '15 at 17:07
  • UPDATE: I've just realised I can edit my answer, you can see the SVG code there. Thanks! – user1406440 Jan 28 '15 at 17:24
  • Thanks a lot! I'm quite happy to use path's instead if it achieves what I'm after! That Snapsvg link you posted is actually very, very close to what I'm trying to do. I would if the javascript it uses helps the positioning a bit. Anyways thanks for the reply again, I'll give this ago changing the polygons for paths! :) – user1406440 Jan 30 '15 at 10:08
  • What would be the best approach to convert my polygons to paths? I was going to drop you a quick email but I couldn't see the address.. – user1406440 Jan 30 '15 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.