0

I've been trying to make some icons in inkscape. However, some icons appear to have a "jagged" or "pixelated" effect at curves especially where two shapes overlap each other.

Here's a quick example

When the shapes are overlapped

enter image description here

Appearance of individual shapes

enter image description here

Here's the rendered SVGs at 100%.

You will notice similar effects on other parts of the icon too. The jagged effect seems to appear even when the shapes do not overlap, but is far less noticeable to me.

enter image description here

enter image description here

All icons are 110x110 pixels and completely aligned to the pixel grid. I've tried saving as "Inkscape SVG", "Plain SVG" as well as "Optimized SVG" all resulting in the same effect. I've also tried enabling / disabling anti aliasing. Disabling as expected worsens it a lot. Is there a setting or trick in Inkscape I am missing.

6

This has nothing to do with Inkscape, but with how anti-aliasing and SVG rendering in general works.

When you overlap multiple lines on top of each other, you also add more and more anti-aliased half-transparent pixels, making them less and less transparent.

Here is a simple line with anti-aliasing and then the same line duplicated over and over. Notice how the line got seemingly thicker as the gray pixels got darker with each duplicate until they were fully black:

enter image description hereenter image description here

In your case I'd suggest to just remove the curved path segments that are covered by the outer circle anyways.

1
  • 1
    The name of these are conflation artifacts. Usually people are concerned of the seepthrough but this overlaying thing is one of the symptoms. Really we have known how to handle this efficiently for about 20 years now, yet universities still seem to teach students the problematic algorithms as if they were the best there is.
    – joojaa
    Sep 11 at 15:24
4

It's caused by having overlapping edges of strokes which causes conflation artefacts. Basically in this case, the effect is like losing the anti-aliasing a bit. This is a common issue with vectors, and not specifically an Inkscape issue.

Conflation can also be caused by having two edges of a shape butting up against each other, which can cause a thin gap to be visible even when paths are lined up exactly.

To fix it, the easiest way is probably to change the construction a little so as to avoid the problem. Instead of having a closed shape for each cog tooth, delete the largest segment, then rotate the teeth around the circle.

enter image description here

Another way to fix it, if you don't want to reconstruct it, would be to select everything, and then do Path > Stroke to Path, then Path > Union. However this method is destructive, can't be undone, and will convert all strokes to a combined path, so editing the thickness of the strokes later might be an issue. I suppose you could keep a copy of the original if you want to edit it later though.

enter image description here

2
  • Yes, I've always converted everything to paths and then combined. In this case however, I wanted to keep things editable for other users. I wasn't aware about "conflation artefacts", funny how I never came across this term over the years. Thanks to you, learnt something new today.
    – TDsouza
    Sep 11 at 20:56
  • @TDsouza - To be honest, it's often a minor problem that is not that noticeable unless you have exact edges of strokes overlapping. It's more noticeable if you have more than two. Another way to fix it I forgot to mention, is to change the stroke width very slightly, say less than a pixel, so that the edges of the strokes don't overlap exactly.
    – Billy Kerr
    Sep 11 at 22:39

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.