November 18, 2011
Save Time Converting SVGs to Raphael.JS

I’ve been working on a really sweet side project relating to… Well, you’ll just have to wait and see. 🙂 What I can tell you is that I had an image set that I wanted to let users interact with and was extremely eager to test out SVG interaction in the browser! I tested a few different libraries and jQuery plugins and ended up going with Raphael.js, which I feel is one of the best out there.

The biggest headache I encountered was converting all of the paths, shapes, etc., over to JavaScript.  It’s not hard, but it takes a ridiculously long time to do if you have a heavy SVG file to work with.  Also, what if you make a few changes to the SVG? Ughhh!  I came across a few converters, but they all sucked in one form or another, and the resulting SVG never looked the same as the original.

To make a long story short, I developed a tool that allows you to upload an SVG file and have it output the Raphael.js JavaScript code for you to plug right into your application.  Check it out and let me know your thoughts.  I’m are also looking for contributors to help make it even better.  Check it out at https://github.com/allankiezel/readysetraphael.

Ready.Set.Raphael – SVG to Raphael.js converter

Hopefully it saves you time (and money)!

 

Copyright © 2022 Allan Kiezel – Long Island Web Designer & App Developer. All rights reserved.