How to create an SVG path from a lineart?

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?