5

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:

Image Skyline

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?

2

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:

enter image description here

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).

enter image description here

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.

  • "you probably need to redraw that skyline yourself" - is there no way to automate it? Might this be of some use? github.com/fablabnbg/inkscape-centerline-trace – Mawg Mar 2 '17 at 10:17
  • 2
    @Mawg: Given the strong requirements and application of the OP, I would say no due to the reasons explained in the question. If you are more lenient regarding what result you accept, the situation is of course different. – Wrzlprmft Mar 2 '17 at 10:25

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.