Hi SVG lovers,

If you ever tried Raphael.js and wondered about their specific file format for displaying SVGs , and how to transfrom them to make it look nice, this post is for you.

If you look into an SVG you’ll find things like strokes, ids, paths, groups, gradients and so on. But how to convert them to Raphael code? First I was thinking to create a parser in some scripting langage but why reeinvent the wheel? Just check to following link. Those folks have created the best parser I found so far. Just upload your SVG, copy the output string and paste into your javascript file into the dom-ready. You can test it immediatly at their site with just one click. Good for Designers too 🙂


Another hint: If the designer creates the vectors with Illustrator or Inkscape, and he gives each shape a name, they will be transferred into the id-attribute which you can use for animating!


Try to upload and convert this example SVG:







Tagged with:

Leave a Reply

Set your Twitter account name in your settings to use the TwitterBar Section.