The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Gaps between svg paths

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #195839

    This is a bit of an svg/css hybrid question!

    I’ve created a graphic in Adobe Illustrator which is made out of 4 separate simple shapes, all straight vertical or diagonal lines. The reason they’re broken up into separate shapes is so I can animate each part using CSS on a webpage.

    The coordinates/points where 2 shapes meet of are identical, or as far as I can see they are. I’ve even tried using “Align to pixel grid” as well. But when I export to SVG there are very fine gaps between some of the ‘joins’. I’ve uploaded the SVG to Codepen so I can give an example:

    I can’t actually see it in the Codepen example but locally where the 2 vertically straight lines join (where the 2 shades of colour meet) have a small gap too and they should be flush with each other and from what I can see they have the same ‘point value’ in the SVG code?

    Hope someone can help!


    Could be a sub-pixel / rounding issue…I only see it a certain zoom levels in Chrome.

    One question though…why 5 paths and not just 3?


    It’s the vertical joins that get me, like 2 div’s side-by-side, I assumed they’d be flush!

    I would have thought so too but unless it’s an actual decimal precision thing, I’m not sure how to resolve it.


    I had a thought….what about the stroke on the path?

    So I added that (same color as fill) and it looks like that might be a ‘fix’.

    Alternatively, perhaps setting it to 0

    the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a percentage is used, the value represents a percentage of the current viewport. If a value of 0 is used the outline will never be drawn.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.