Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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 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?
So far I've found two options but I'm sure there's more. Here's the image I used to test both:
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).
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.
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.
