Discuss: SVG with a little help from Raphaël
by Brian Suda
- Editorial Comments
2 Awesome
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.
posted at 01:00 pm on July 20, 2010 by Sean McCambridge
3 Fantastic
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 :-)
posted at 01:01 pm on July 20, 2010 by comet
4 Exporting SVG from Illustrator
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!
posted at 01:11 pm on July 20, 2010 by Brian Suda
5 Design of Pie Chart
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!
posted at 01:26 pm on July 20, 2010 by Evildonald
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.
posted at 02:34 pm on July 20, 2010 by jonathanpglick
7 Raphael is multi-faceted!
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.
posted at 05:17 pm on July 20, 2010 by shakthiav
8 Performance issues.
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!
posted at 05:45 pm on July 20, 2010 by Blaise.Kal
9 Small typo
“ including the center point from the left and right. “
ought to read “ from the left and top.”
posted at 10:28 pm on July 20, 2010 by circus_bear
10 CPU load up to 100%
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!
posted at 07:33 am on July 21, 2010 by scriptin
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 Illustrator to SVG to Web
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 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.
posted at 12:25 pm on July 20, 2010 by natewalton