Get path geometry from image

Question

If i have a logo, let's say done as a jpg or even a png. Any suggestion for how I can use that to define a path geometry? It would be really good if any suggestions could be provided for how i can do it in blend. Thanks

Answer 1

Yes - I just tackled this problem for an LOB application two days ago.

I can't offer advice for Blend (though I've read that it can be done in Expression Designer). However, the best free tool I've found for this is called InkScape (http://www.inkscape.org).

It's opensource, and while it's intended primarily for editing SVG vector-based images, it has two key features that are useful to us WPFers:

1. It can vectorize (i.e. "trace") raster images like bitmaps and jpegs, albeit not as well as one would hope, and
2. It can export the vector image as XAML

You'll invariably find that you get better results from loading vector formats (like SVG, EMF, WMF, etc) and saving to XAML, than if you try to convert a bitmap/jpeg... simply because the process of vectorizing a raster image is error prone at best. So if you want to bring a company logo into XAML, try to get hold of the source files used to create the logo (perhaps done in Illustrator?) and import that into InkScape.

If this post is helpful, please be kind and give it a one-up.

Answer 2

Jasema is a terrific tool right for the job.

Also, don't be shy to use Blend - it is somewhat more difficult to use (drawing shapes using pen) but it gets easier pretty fast. Switch on gridlines and optionally snap to them for good results.

What both Jasema and Blend are lacking, is the ability to easily create shapes with a central symmetry (like stars), so I took parts from Jasema and created my own tool (named Radius) that works a bit like a combination of a ruler and compass.

Answer 3

I have a good idea but you're png, bmp, jpg or other non vector file is must be very simple because we need best scan results and only use inkscape.

1. Step: Drag and drop your file workspace on Inkscape, download free.

Tip: If your image is color white, Top menu item File->Document Properties-> heck Checkerboard Background and if you want uncheck Page border show.

2. Step: Top menu item Path-> Trace Bitmap-> Mode check what you want property, i usually use color property and if your file is png check Remove Background then click OK, then wait again Ok button is Enable and close window.
3. Step: Now you have a two layer, top layer vektor file and bottom layer your file. Select vector file and top menu item Edit-> XML Editor-> select svg path and look side column, d name propery in your data path value.

But this method may not always work or may not give the desired results and draw your own shapes with the scape so you can get the path data from the XML editor.

Example, my first tests this like:

and after working on it some more: