How to create an SVG path from a lineart?

Question

I have a line drawing in PNG format, from which I need to create an SVG.

I need to create the svg path from right to left, left to right, center to sides OR sides to center. Here’s an example:

I’m need this for a jQuery plugin (lazy line painter) that animates this line drawing in the sequence of the path provided in the SVG file.

I’m using Adobe Illustrator CS6, and it creates a jumbled-up SVG path in the SVG file. Due to this, the animation starts and ends abruptly from any direction (as per the SVG path in SVG file)

I also have the portable version of Inkscape, although I don’t know how to use Inkscape to import the PNG as line vector.

Pleas can someone suggest a way to do this in either Illustrator, Inkscape, or any other utility?

Also, how to decrease SVG output file in Illustrator? I placed two PNG line arts into illustrator, and then traced them. The output SVG file is 470 kb, while I need less than 40 kb. Is there any online tool or Illustrator/Photoshop plugin to optimize the SVG output to 40 kb size?

Answer 1

Your problems lie in the inevitable flaws of vectorisers such as the tracer you used. For example, below is a close-up of your original image and, overlayed in red, the best tracing I could come up with Inkscape in a minute:

You can see the following:

• The line is not realised as a line but as an area. While this can be fixed, it might explain some of your problems.
• On the pixel level, there are a lot of imperfections of your trace.
• There are far more nodes than actually necessary (which explains your large file size).

While another program or other settings for the tracer may be better than this, the basic problems will remain, as computer algorithms are far worse than humans at recognising shapes and similar.

Thus, to achieve any satisfying result, you probably need to redraw that skyline yourself. Given that it mainly consists of simple geometric shapes, this should be a rather easy task.

Below are the results of a quick redrawing of that close-up I did in less than a minute (with the caveat that I have some experience in doing this).

Note in particular, how few nodes I used.

If you try this, do not forget to make use of tools aligning nodes to one another and to make angles rectangular, if appropriate.

---

If the above does not suffice to reduce your SVG file size, you can get rid of some spurious information (i.e., metadata and other information not actually required for rendering the image or what you want to do) that Inkscape stores in SVG files by saving your file as a Plain SVG instead of Inkscape SVG and by Vacuuming Defs.

No matter what the program, you can also identify spurious information in the SVG’s XML source by hand and then write a small script to purge it.

See also this question on Super User on this.