title: How to get a proper SVG code
body: <p>I've been trying to create some SVG drawing animations like this:
  <a href="http://codepen.io/MyXoToD/blog/howto-self-drawing-svg-animation" rel="nofollow">SVG animation</a> </p>
  
  <p>The problem I encounter however is how to get a proper SVG code for that. Let's say I have a png drawing and I want to convert it to SVG. When I use Inkscape I get something like this which is useless.</p>
  
  <pre><code>xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcG
  </code></pre>
  
  <p>Online tools like this one: <a href="http://image.online-convert.com/convert-to-svg" rel="nofollow">SVG converter</a>
  are little bit better because they output something like this:</p>
  
  <pre><code>path d="M3875 6730 c-38 -7 -902 -134 -1130 -166 -22 -3 -51 -7 -65 -9 -14
  </code></pre>
  
  <p>I thought that it's gonna work but I was wrong. It won't animate.
  How do I get a proper SVG code like in these <a href="http://codepen.io/MyXoToD/blog/howto-self-drawing-svg-animation" rel="nofollow">examples</a>?</p>