: Convert signature to vector on OSX? I need to convert this signature into a single path This might not be the correct term for what I'm trying to achieve, but basically I want to transform

@Kristi927

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



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:



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:



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

Vote Up Vote Down