3

I am looking to create an SVG path outline of a logo so I can do some basic logo animations for a website. The logo is pretty much just text in a specific font with a few artistic add ons. Its in two colours, dark blue and light blue.

I want to trace the outline of the text and additional shapes so they become SVG paths that I can animate the fill for a website.

I have followed the recommended tutorial on using tracing, but it traces the outline in black, not the original colours.

Is there any way to get the system to trace the outlines of the letters/shapes in the original colours?

1
  • 1
    Why can't you trace it, and then use the eyedropper tool to change the color? You might also want to use the Node tool (F2) to look at the tracing generated by Inkscape. Sometimes Inkscape interprets an object in... interesting ways. Commented Aug 17, 2016 at 11:44

1 Answer 1

7

You totally can trace a color image in Inkscape. Just select "Colors" in the Trace Bitmap dialog, and adjust the number of scans to match the number of colors in the image. The quality of the results can be variable, especially for images with lots of gradients, anti-aliasing or compression artifacts, but for a simple image with just a bunch of different colored letters, it should work pretty well.

Another option would be to trace the image in black and white, and then recolor it in Inkscape. This works best for images with simple color patterns, like a linear gradient running through the entire image. Alternatively, for images with a small number of distinct colors (but potentially complex boundaries between them), you may get good results by first separating the different colors in a raster image editor (like GIMP) into separate images, tracing each of them in monochrome and then combining the pieces.

Finally, if your image is indeed just text in a standard font with a small number of custom flourishes, you may get best results by retyping the text in the same font, converting it into a path and adding the flourishes manually. This way, you won't suffer the loss of precision in corners and other small details that is otherwise nearly inevitable when retracing a low-resolution bitmap back into a vector image.

(Tip: Import the raster image into Inkscape, reduce its opacity and keep it in the background so you can match your colors and paths to it.)

1
  • For anyone else who has been running into this issue, here's how Ilmari Karonen's suggestion seems to work on more recent versions of Inkscape: (1) Path > Trace Bitmap (2) Select the "Multicolor" tab (3) Adjust the "Detection mode" drop-down menu to "Colors" (4) Change the number of "Scans" to the number of distinct colors in your image. (5) Check "Remove Background" if desired. (6) Click the image and select "Update Preview" to see how it looks before proceeding. Commented Dec 9, 2023 at 12:55

Your Answer

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

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