6

I can get good trace results in Inkscape converting a bitmap to a vector image - except for these persistent thin outline artifacts. They resemble a topographic map and pretty much ruin the trace.

"topographic" outline artifacts

There are no strokes on these paths, just fills. So there shouldn't be any visible outlines.

stroke disabled

In case it helps, here are my trace settings: Inkscape trace settings

Such artifacts appear in Illustrator traces as well. But specifically I'm seeking a solution for preventing or removing them in Inkscape SVGs.

0

3 Answers 3

3

The problem is basically in the way Inkscape is deciding to split your image into color regions: instead of simply having the lighter colors overlap the darker ones (or vice versa), you're ending up with two adjacent color areas that both overlap a third color.

Since the edges don't line up perfectly (due to both tracing inaccuracies, and also some fundamental limitations of anti-aliased vector image rendering), some of that third color ends up showing through the gap, creating the "edge" you're seeing.

Alas, I don't know of any good way to fix this issue. You can get rid of the background colors by unchecking the "stack scans" box, but then you get transparent gaps between all paths, which is generally even worse. Sometimes, it may be possible to obtain acceptable results by tracing the image with "stack scans" unchecked, and then applying a small outset (say, 0.5 px) to all the resulting paths to fill in the gaps, but don't expect this to preserve fine details very well.

For your specific example image, one possible solution might be to trace it in grayscale (i.e. selecting "Grays" instead of "Colors") and then re-coloring the traced image afterwards; the grayscale tracing mode doesn't seem to suffer from this issue (which I'd really consider a bug, or at least a design flaw, in Inkscape's color bitmap tracing). Of course, this only works well for images that are essentially monochrome, or otherwise have simple and easily recreatable coloring.

1
  • 1
    You are correct. I found that unchecking "Stack scans", ungrouping the object, then applying an outset was the best "quick fix", but like you said details were not preserved well. In the end I ended up stacking the scans and scanning with just 32 colors which was enough in my case. I then spread out each path in increments using Shift+ArrowKeys, deleted the parts of the paths that overlapped against dissimilar colors, then realigned them. It was tedious but gave me the small file size and scalability that I needed (on a logo for web use). I do not recommend attempting this in bulk.
    – Mentalist
    Apr 5, 2015 at 5:50
2

The artifacts you experience come from the supposed-to-be invisible strokes at the outer rim of the stacked objects created for each color chosen at tracing.

Artifacts may become worse in case we had applied a Gaussian blur to the bitmap before tracing. This is done by the smooth option in the Inkscape trace dialog. Therefore it was a good idea to not check this option.

enter image description here Reproduction of the line artifacts

Define a stroke with the fill color

Now to get rid of the artifact is a bit cumbersome. We have to create a stroke to each of the 256 color objects we had created and set the stroke color identical to its fill color.

  1. Ungroup the selected stacked objects (Shift + Ctrl + G)

  2. Select an object (path mode helps to see we had selected the right one):

    enter image description here

  3. Open Object > Fill and Stroke dialog ShiftCtrlF

  4. Copy fill color on the Fill tab

  5. Open stroke paint tab and make a Flat color stroke of 1 px width.

  6. Paste the fill color to the stroke color:

    enter image description here

  7. Repeat 2. to 6. for each of the objects in our trace.

    enter image description here One single line only was removed

We may find a script or external plugin which allows to define the stroke color matching the fill color for each object of an SVG but my preliminary search on this sadly was negative.

To also remove the still visible color step between neighboring objects we may add some blur effect to the objects but this will lead to a tremendous increase in rendering time of the SVG.

1
  • Thanks, however if you have an SVG with more colors it will become apparent that the actual problem is the stacking of paths, as Ilmari explained, not the "supposed-to-be invisible strokes". At first I too thought it was a stroke problem. You are right about keeping the Smooth setting off. I did try your advice first though, and found that adding strokes by modifying the XML in the SVG file is not so hard - just have to copy/paste for each color/path. If you trace with 32 colors you get 32 paths (31 if you remove background). Could write a Python script to automate this, but it's not the fix.
    – Mentalist
    Apr 5, 2015 at 7:29
0

I'm using Inkscape 0.91 r13725 on Debian 8

Go to: Filters => Blur => Cross Blur

I left the Brightness at 0, Fading at 0

GUESSING that the gaps were 1 pixel I set Horizontal blur to 0.50 I set Vertical blur to 0.50

and there was noticable improvment, but not perfect. Hopefully this helps towards the perfection you seek. The image was too large for my underpowered laptop to experiment much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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