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?
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.
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.
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.
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.
kaeptn
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.
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.
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.
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/
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.
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.
rhassinger
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.
norman.b.robinson
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.
margo
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.
29 Reader Comments
Back to the Articlejvitela
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?
patrick.oscity
nice article!
but in the section with the animation along the path, shouldn’t it be
function run() {<br /> myMarker.animateAlong( myPath“¦instead of
function run() {<br /> myMarker.animateAlong( p“¦skilldrick
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!
TeviH
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.
Brian Suda
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.
Tobias Bergius
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 ?
htmizzle
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?
kaeptn
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.
Avangelist
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.
Alan-A
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
hiredgun
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/
Dmitry Baranovskiy
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.
Alan-A
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. :-)
rhassinger
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.
norman.b.robinson
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.
CHUCKclmnz
You can see the full script and example put together so you can view source to adapt it as needed.
Where is this ?
hertzel
How do you compare Raphael to thejit & processing.js regarding interactivity and dynamic manipulation (realtime data) of graphs/charts in runtime.
James Parry
“The web is all about open standards and unencumbered technologies.” – Couldn’t agree more!
Will be looking into SVG. Thanks for the article.
margo
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Â