SVG with a little help from Raphaël

by Brian Suda

29 Reader Comments

Back to the Article
  1. I was working with SVG awhile back, and found it a little cumbersome. Maybe I wasn’t doing it quite right. My ideal situation would be to create a graphic in Illustrator, save as SVG, and upload to the web like I do with other image formats. I’d also like to be able to specify some parts of it (like colors) through PHP before the image is delivered.

    I found that to use SVG images in a web page, I needed to run a “PHP script”:http://bkp.ee/atirip/ that would first convert the image to a format Raphael could read, and then Raphael could render the image. It seemed to slow things down quite a bit. And I never was able to get a PHP file to load as an SVG even when I changed the content type in the header to image/svg+xml.

    I’m really excited about the possibilities of SVG, but I wonder if I’m missing something about its implementation. I’ll definitely try the progressively enhanced charts described here.

    Copy & paste the code below to embed this comment.
  2. That was awesome.  I’ve never really had the time to dive into SVG, but I’m extremely excited about it now.  Could you give a little more detail about how to create a path in Illustrator and export it to SVG?  I’m sure it’s figure-out-able or Google-able, but I thought it could stand to be part of the example.  Great piece.

    Copy & paste the code below to embed this comment.
  3. That is some seriously awesome technology. I don’t know why I never even thought of taking a table and making it in to a chart using Javascript and SVG. It just seems like one of those things you’d just do in Excel and save it as an image. I’m really enjoying this transition of using images only when they’re needed. Photos of people and places for example. Graphics that are relevant to your content can be better represented by legible data than binary images. Not to mention it will download much quicker. I think I’ll start playing with Inkscape some more :-)

    Copy & paste the code below to embed this comment.
  4. Sean McCambridge, depending on your version, it might vary. Basically using the Pen tool, you draw or trace the route you want. Be sure your image is at zero,zero when you create a path, otherwise it will be offset when you put it into Raphael.

    You can Export or Save As… SVG. Somewhere in the code there will be an element called . The text inside the d attribute describes you path.

    Your mileage may vary, but that is the quickest and easiest way to get the encoded path. You could read-up on how it all works and do it by hand. Once you get the hang of it, for simple paths it isn’t hard. Understanding SVG paths could be an article in itself!

    Copy & paste the code below to embed this comment.
  5. I love the look of your bouncing piechart.  I’m having difficulties finding out how you styled it to look and behave.  Can you share how to style my default pie chart to look like yours?

    thanks!

    Copy & paste the code below to embed this comment.
  6. Ive seen Raphael around but haven’t had a project to use it on yet. This article did a great job showing a useful application of progressive enhancement.  I’m stoked.

    ps: the animation function uses the var p for the path but the example code to create a path uses myPath.  Just a heads up in case this could confuse someone.

    Copy & paste the code below to embed this comment.
  7. This is a very good example of interactive web using Raphael. Raphael has many facets to it. One of the interesting uses that I have put it to recently is to create a general purpose online editor to create, edit and share vector images.

    Copy & paste the code below to embed this comment.
  8. I had this page open in Firefox 3.6.6, and my CPU was 50%. 100% of my Intel E8400 dual core. I think there are some performance issues to iron out.

    I do like SVG though. For dynamically drawing charts etc, but even more for having a static scalable (vector) image format on the web!

    Copy & paste the code below to embed this comment.
  9. ” including the center point from the left and right. “
    ought to read ” from the left and top.”

    Copy & paste the code below to embed this comment.
  10. In Opera 10.60 and Firefox 3.6.6 CPU load grows up to 100% (a bit worse in Opera) causing page to sroll twitchy on my 1,8 GHz Athlon 64 with 768 MB of RAM. And it gets even worse when trying to manipulate page tabs.

    I like the concept of SVG (scripting, scaling, etc.), but I don’t think I would use it in a next few years. And that’s sad.

    Disregard that, article is great!

    Copy & paste the code below to embed this comment.
  11. I already knew about this library and I think it works great on a PC, however I’ve couldn’t watch the page demos on my cell phone, as the article stated (Using webkit browser on android) Did this work for anyone?

    Copy & paste the code below to embed this comment.
  12. nice article!

    but in the section with the animation along the path, shouldn’t it be

    function run() {<br /> &nbsp; myMarker.animateAlong( myPath “¦

    instead of

    function run() {<br /> &nbsp; myMarker.animateAlong( p “¦

    Copy & paste the code below to embed this comment.
  13. First off – yes, patrick, I thought that too, you’re right.

    Mainly, though, what a great article, thanks. I’m working on a project for a client which is starting off in InDesign and Illustrator and going into an HTML format. I was going to convert all the .ai’s into jpegs, but now I’m seriously considering using svg.

    Thanks!

    Copy & paste the code below to embed this comment.
  14. It’s nice to create graphs and data visualizations from hard-HTML-data, but all this extra programming gives me a headache! wish there was a UI to create all this… Or, that Apple supported Flash. Flash can utilize XML data which can just as easily be turned into search engine-friendly HTML, too.

    Copy & paste the code below to embed this comment.
  15. TeviH, there is substantial HTML that could be replaced with a simple image or flash object, but then you lose all the benefits. With progressive enhancement, you start with the basic HTML which is accessible to everyone, including search crawler bots indexing your content. Then you layer on more and more beautiful designs and functionality as the browser accepts it. Had this been done with a image or plugin, it would never appear in search results or via screen readers or devices that don’t support plugins.

    It is a trade-off of how much code you want to write versus the reward. In this case, I’d say the reward is pretty high for the extra effort of progressive enhancement.

    Copy & paste the code below to embed this comment.
  16. So, when using libraries like these, inserting SVG with Javascript, should you create the pages in “XHTML 5”:http://blog.whatwg.org/xhtml5-in-a-nutshell ?

    Copy & paste the code below to embed this comment.
  17. I really love Raphaël, but I have to concur that it is quite prone to performance issues.

    Is anyone aware of any optimization techniques, or is this merely a limitation of SVG?

    Copy & paste the code below to embed this comment.
  18. First of all great article. I like it and I will try it. But I can´t see why it is an “full flash replacement”. I see the benefits of not relaying on a plugin. But the animations are stuttering and not smooth, as pure JS animations also are. I am not a flash fan boy, but in my opinion flash animations are still nicer and smoother.

    Copy & paste the code below to embed this comment.
  19. I do have a great concern that with libraries like this the line between code and design is blurring again.

    I tried to get my head around Raphael after the recent .net piece on it and struggled to make anything happen. I found the learning curve was quite high. I would imagine that for Flash developers wanting to abstract their work into ‘html5’ based data visualisations instead of flash charts this will come with a reasonable amount of ease.

    For those of us not so accustomed with drawing objects with code instead of a paintbrush or a pencil I think there is a real high learning curve.

    Copy & paste the code below to embed this comment.
  20. Is this a programming issue?

    I’ve looked at the main article page in two versions of FF (3.0.19 & 2.0.0.20) and in both cases the firefox process jumps to take something between 89 & 99% CPU, varying continually. This processor use appears to continue indefinately although the page appears to be fully rendered, only stopping when I close the tab or navigate to another page.
    The newer FF version at least says the page is fully loaded, whilst the older one says it is still loading – in between times 20 minutes after the page was fully readable.

    My guess is that we have an endless loop somewhere.

    Otherwise a great article and a very intresting step forward.

    Alan

    Copy & paste the code below to embed this comment.
  21. I can not identify/isolate the problem but, firefox (3.6.7) uses 0-@ cpu time on article page. But insonsistantly (most dangerous form of leak I think, makes very hard to identify problem.),

    Imho svg is not quite ready for animation. Yes it’s good for fun, but looks dangerous for real life implementation. Specially for intensive markets charts etc.

    secondly when it comes to fun; I rather choose processing js.
    http://processingjs.org/

    Copy & paste the code below to embed this comment.
  22. The performance of this particular page is bad, not because SVG is “not quite ready for animation” or Raphaël has a memory leak, but because page has infinite loop. Little red dot goes along the curve all the time: calculating dot position is quite expensive operation and doing this all the time takes a lot of CPU attention. So, it is not any technology fault, but rather unfortunate example. And it is my fault that I didn’t notice it and didn’t warn Brian.

    Copy & paste the code below to embed this comment.
  23. Many thanks Dmitry, for your explanation and the insight it provides. Maybe it’s not so bad an example after all, demonstrating the limits of the method. Most authors of such articles don’t do this. :-)

    Copy & paste the code below to embed this comment.
  24. I’m with Blaise. Firefox pegged one of my 2.4ghz cores (and the laptop fan kicked on) while viewing just those two images, not actually doing anything with them. I opened the page in IE and that pegged the other core. Clearly this approach isn’t ready for primetime yet.

    Copy & paste the code below to embed this comment.
  25. I do hope we can get keyboard access to provide all the same functions currently performed in mouse functions. We review Adobe Flash applications and fail them for Section 508 compliance when they don’t have keyboard access. SVG needs to have keyboard access, a way to focus on individual elements, and while I’m dreaming a perfect dream, color and contrast that respect the user’s system settings.

    Copy & paste the code below to embed this comment.
  26. You can see the full script and example put together so you can view source to adapt it as needed.

    Where is this ?

    Copy & paste the code below to embed this comment.
  27. How do you compare Raphael to thejit & processing.js regarding interactivity and dynamic manipulation (realtime data) of graphs/charts in runtime.

    Copy & paste the code below to embed this comment.
  28. “The web is all about open standards and unencumbered technologies.” – Couldn’t agree more!

    Will be looking into SVG. Thanks for the article.

    Copy & paste the code below to embed this comment.
  29. I totally agree with what you said on how it performs with this kind of specs because I have the same experience too! But I still do hope that they would continue to use it over a period of time possible.


    margo from Escalier escamotable 

    Copy & paste the code below to embed this comment.