SVG Animations kinda just like Flash
This is a second part to my Who needs Flash post, I’ve continue with prodding to work on some ideas for simple svg maps. A map that is able to find your country or state, but not directions or anything like as complex.
This map shows the world, it’s interesting because it loads maps from a simple apache webserver using XMLHttpRequest and allows you to drill down each section of the map until you find what you want. For the purpos of this demonstration I have only populated a number of maps, I expect that it’d be very complete and useful with an open streetmap backend cleverly processed into the required output and so forth, maybe combined with wikipedia links and other fun stuff. See here for each of the map files and how it was constructed.
I also used FakeSmile in this project, this allows Firefox to display svg animations, even though Firefox 3.5 doesn’t yet support animations in svg files (coming soon), fake smile is a great project, a credit to the authors, I only have one problem with it so far and that’s the infinate loops and uncaught flipping of properties once animations should have finished, this can cause your cpu to spike, so don’t be worried if your computer grinds to a halt.
You’ll also notice that it makes heavy use of cascading style sheets, very useful for hovering and selecting elements based upon multiple inherited classes.
There isn’t any server side code in this demonstration, it’s all done by matching up the element ids to file names stored on the server. The server did need a .htaccess to report all svg files as xml and not svg+xml which firefox balks at.
Also worth noting is the horrible, horrible speed of everything. Hopefully if more demonstrations in svg can be put together, stretching the framework, we’ll see improvements in Firefox and other browsers when it comes to rendering speeds and svg processing speeds.
I think SVG is the better standard and the better framework when compared to Flash, not because of speed or technology, but just because of how integrated it is with everything. I was able to develop this demo using Firebug, I was able to use standard javascript and standard css to style and run everything. If it wasn’t for the terrible neglect that svg has suffered at the hands of Adobe, we’d have replaced Flash already for a large number of things.
2009-06-22 at 20:52
Wow, this is really impressive. I really love seeing demos that prove that anything that can be done in Flash (despite what people tell me everyday) can be done in a standards compliant way.
2009-06-22 at 21:15
That map is crazy awesome.
Many props.
HTML5, SMIL, ECMA JIT, Theora/Vorbis inclusion in the browser….
Mobile devices that Flash isn’t efficient enough to do justice to…
It seems we have a real chance here. I’m excited for the future
2009-06-23 at 00:07
Very cool! I didn’t know that SVG could be used to this extent.
2009-06-23 at 01:05
I love the 404 messages. Those are my favorite!
Alright snarkyness aside, that is some awesome shite man! Now if we can just get the browsers on board with webforms2.0!
2009-06-23 at 05:36
We need a faster, better SVG rendering engine in Firefox.
2009-06-23 at 05:48
Impressive but incredibly slow ^^ .
VGA hardware acceleration really needs to be used.
2009-06-23 at 10:46
This is really cool!
Though it doesn’t seem to work in Minefield (Firefox nightly) it does work in Safari 4.
2009-06-23 at 12:59
Very cool project. Is anyone else working in a similar area?
2009-06-23 at 13:31
There are people trying to write games and mapping software and various other interesting things in svg. I know that wikipedia and openclipart.org use svg as their vector standard for all editable graphics.
2009-06-23 at 13:21
Is there some tutorial/howto for this kind of stuff?
2009-06-23 at 14:12
I wish there was, would you like me to write one? do you think it’d be useful to you? what kinds of things would you like it to cover?
2009-06-23 at 21:15
I for one would say: +1 to the tutorial. I wish there were a place where I can get awesome tutorials about them. I remember that I can convince my friends that GIMP can do uber cool stuffs because I’m doing the stuff from tutorials in LUG.
If there are some hints on the using the SVG and the basic to grasp it, I think it would spreads.
2009-06-23 at 13:24
Yes, completely agree this is very impressive, although I still remember your earlier demonstration was pretty cool too. ^^
Someone then mentioned that the lack of embedded video and sound would not make SVG a viable replacement for Flash. However, the assumption was that the video and sound HAD to be embedded within the animation framework, when in fact thanks to HTML 5.0 you can have all the elements separated and simply married together to produce a seemless audio-visual experience.
Granted, more work needs to be done to optimize the SVG rendering, but all in good time. ^^
2009-06-24 at 16:13
Hm, this doesn’t seem to work in Opera 9.64. I’m really interested in how fast this is in Opera. SVG is still slow in Opera, but it supports SVG animations, which should usually be faster than scripting.
Anyone else got this working in Opera?
2009-06-25 at 06:21
The pop_element function is still trying to overload window.parent, as commented before:
http://doctormo.wordpress.com/2009/05/20/who-needs-flash-i-dont-svg-for-me/#comment-1150
That’s one reason it doesn’t work in Opera.
2009-06-30 at 20:45
[...] wanted to see if the speed improvements were real and if those speed improvements would effect my svg world map, with all it’s AJAX and [...]
2009-07-01 at 04:36
Hi,
“Kinda like Flash” ??? lol, do you mean kinda like animated GIF for 1998?
You should seriously update your flashplayer
2009-07-01 at 08:44
If you understood anything about GIF, Flash or SVG you wouldn’t say such a delightfully ignorant thing.
The animation you see is not generated by me, it is the fault of your own computer. If it looks bad, it’s because your computer is bad at it, not because my animation skills are 11 years out of date.
2009-07-01 at 10:34
Ok, great so how come everything else runs smoothly in flashplayer, java applets or video games … I didnt say your animation skills were out of date, I’m just saying SVG for animations isn’t the good choice just because it’s an open format, serisouly there are better tools
2009-07-03 at 16:02
whoho..
nice trick dude
i think i need to reinstall my adobe flash
2009-07-04 at 15:18
Well, it looks promising, with all the upgrades to javascript engine that were made recently in all browsers
If you make cool things, someone will want to make them faster …
The thing is, that this seems to require quite a lot of javascripting to do a graphic presentation. Am I wrong?
2009-08-25 at 09:09
Baby steps? Perhaps, but at least they are walking forward. This is very impressive indeed.
SVG is something that have not looked into for webwide use due to the instabilities and lack of cross browser support (this is still important to some people, despite certain companies tendencies to drag their feet). I will have to have a little tinker with this when I get home from work
2009-10-28 at 02:22
This is good stuff. I’ve been looking for SVG examples that people have made that demonstrate the potential for the format beyond “just another image format.” I’ve asked people about alternatives to Flash, and they say that there are none. At the moment, I think that there aren’t any true competitors, but this seems like the one that will do it. Many big names are working on this, including Adobe.
There are two things desperately missing, one was already mentioned. We need better rending engines natively built into our web browsers so that additional plugins aren’t required. Since SVG is open technology, no licensing or proprietary code is a concern. The other tool, is an IDE of some sort. Better yet, many of them, for multiple skill levels from the web developer to the guy who wants to make a demo for a business meeting (good bye power point).
2009-10-30 at 13:05
True – we do need better tool/IDE support. There are many editors out there that support SVG currently, but none that I know of that are developer-focused as opposed to artist/designer focused.
2009-06-23 at 21:20
For basic svg tutorials look at these inkscape tutorials, http://inkscapetutorials.wordpress.com/
For more advanced svg with ajax like the kind of web development I’ve done here, I will consider writing a tutorial.
2009-06-23 at 23:03
Please do
2009-07-01 at 10:46
You don’t get good open tools by using closed and particulate ones. the work here will push people into believing SVG can do something worthwhile, even if it’s just baby steps. It may push a mozilla developer to work just that bit harder on making animations quick and fluid.
My point is that Java and Flash are the wrong solution, a toxic workaround for animated world wide web. Besides, you can’t even pass variables between the html and flash, you can’t mix and match and you can’t download the source and hack on it. The SVG is just like a webpage, it allows anyone to edit it and try things out.
Much better than a system where you need expensive and closed editing and service solutions to get it running.