: Get rid of thin white lines between shape 'joins' 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

@Si6392903

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: css-tricks.com/animating-svg-css/. Pay particular attention to the example. Here it is in CodePen, where you can tweak the code: 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

Vote Up Vote Down