0

I need to convert this signature into a single path

Raster Signature

This might not be the correct term for what I'm trying to achieve, but basically I want to transform the inside of the shape into a "stroke" without the outside paths, so that I can work with it in CSS.

I've stumbled upon this answer that talks about something called centerline tracing which seems to be exactly what I need, the problem is that the software is not available for OSX.

Does anyone know any other way I can do this?

  • Have you tried Delineate? It's based on AutoTrace, in fact they link to it on their home page... Also are you comfortable using the cmd line? – Skip Jack May 25 '16 at 4:16
  • Thanks, I'll give it a go. Not really comfortable with cmd, can handle the basics mostly @SkipJack – Sean Cobb May 30 '16 at 13:55
  • UPDATE: Delineate is no longer supported on OSX. Any other suggestions @SkipJack – Sean Cobb Jun 2 '16 at 14:48
  • hey sorry about that... I would recommend trying Illustrator's Image Trace (or Live Trace) tools. Just played around with it a bit and it seems like exactly what you're looking for. There's an option for strokes instead of fills. From what I've read none of these tools are perfect but here's a detailed tutorial on it and I'll add an answer if I have time to go through it more thoroughly. – Skip Jack Jun 2 '16 at 15:11
  • I played with it for a while, but the results were pretty bad. I'll try it again, if you manage to have a go let me know. Thanks! – Sean Cobb Jun 2 '16 at 17:46
1

So far I've found two options but I'm sure there's more. Here's the image I used to test both:

Lara Croft Signature

Raster to Vector Converter

This tool made by RapidResizer, who offer other free tools as well, does a pretty good job. They have options for centerline tracing and outline tracing. Here's the outline result and centerline result. I also found a pretty good tutorial for the tool (although it's pretty easy to figure out).

You can change the &output=pdf part of the url to &output=svg to get an SVG instead (output seems to be missing from the initial options).


Illustrator

As mentioned above, Adobe Illustrator CC (and older versions) offers a feature called Image Trace which provides a variety of options and modes. To create an outline trace you simply open the image in Illustrator and look for the Image Trace button in the top toolbar. Hitting it will use the default mode to trace the image, however it's better to choose a mode based on the image you're vectorizing (using the arrow on the right). In this case I used Black and White Logo and got this result:

Image Trace Fills

I got centerline tracing to work by going to the Window dropdown in the top menu and opening the Image Trace window. I unchecked fills and checked strokes instead and then bumped up the stroke up to 100px. This worked OK on a few other test images but the best I could get with the signature was this:

Image Trace Strokes

As you can see this did use centerline tracing but yielded a pretty weak result. However it should be noted that I'm no expert and there's probably ways to optimize the image and change the settings to get a better result.

Update: See @joojaa's comments below. I'll update this section as soon as I have more time.


Conclusion

As you can see from the outputs the centerline tracing is a lot harder to get right. Even with a black and white image, like the one I tried, the results were less than ideal (to be fair though I probably could have optimized it more). On the bright side the outline and fill tracing options work pretty well.

This might not be the correct term for what I'm trying to achieve, but basically I want to transform the inside of the shape into a "stroke" without the outside paths, so that I can work with it in CSS.

I'm not sure exactly what you're trying to do, but, assuming you're trying to embed an SVG element with the converted vector, you can style it's contents with CSS or manipulate the elements with JavaScript whether it is an outline traced vector or centerline traced vector. So because the results are much better I would recommend using outline or fills method but if you have the time definitely read through the tutorials I linked to above and the related question below.


Related Questions

Converting Drawing to Vector in Illustrator

  • 1
    Are you sure your doing it right? This is what i get and i dindt optimize much anything . – joojaa Jun 15 '16 at 16:02
  • @joojaa not sure at all. You are talking about illustrator centerline tracing right? – Skip Jack Jun 15 '16 at 16:05
  • @joojaa if so pls share your steps or feel free to edit that section of the answer. – Skip Jack Jun 15 '16 at 16:06
  • 1
    Yes but the tracing tool in illustrator CC is much worse then the old one. Best not to use too wide max stroke widths – joojaa Jun 15 '16 at 16:11
  • @joojaa So you got that using CS5 or CS6? If I don't bump that stroke width up in CC, it barely picks up anything... – Skip Jack Jun 15 '16 at 16:14

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.