Who Needs Flash, I Don’t, SVG For Me.
Hey guys, yesterday and today I’ve been helping out with a US LoCo project (which I’m forbidden to talk about) but I wanted to share with you how awesome svg is.
If you believed what people say, you’d believe that flash is the only answer for web based flashy graphics, this is a map of the USA and each state, it uses css and javascript to produce an mouse over (although in the project it’ll be changed to an onclick) and it works out the position of the info box from the direction of the line leading to it.
It should be possible to take this and create other maps, similar in nature since all shapes work from IDs. The tools I used for editing and scripting where:
* Inkscape – although inkscape messes up CDATA and inserts far too much garbage. It’s still the defacto standard for editing and creating the svg file. Often I would create copies, edit in inkscape and then copy out the edited parts to make sure I didn’t get garbaged.
* Imagemagik, bash and wget – For creating resized flags from a script which dowloaded the svgs from wikipedia and outputted 64×64 scaled images.
* vim and gedit – I used vim for the main editing and gedit for parts where I needed to copy large amounts of text on one line (vi isn’t good with 400 node paths).
I also took good use of google to fill in any javascript gaps and although this isn’t yet finished for the project it’s still pretty cool.
2009-05-20 at 23:37
Looks fantastic! Are you planning on integrating it with the LoCo database once it rolls out?
2009-05-20 at 23:54
You’ll have to ask someone who can say, I’ve been hushed up.
2009-05-21 at 07:10
Great community spirit where activities have be to kept secret
2009-05-20 at 23:57
Nice work, but the links for each state are seemingly unusable, as they disappear as soon as I end my mouseover to click them.
2009-05-21 at 00:03
Yep, it’s supposed to do that. a) because those aren’t links, just text and b) because it’s a demo.
2009-05-21 at 00:19
Regarding Inkscape inserting too much garbage… “Vacuum Defs” for those who don’t know, is a handy tool for clearing away a lot of that garbage with one click.
It’s in the file menu.
2009-05-21 at 00:19
Pretty snazzy, btw!
2009-05-21 at 01:11
Inkscape, by default, saves to “Inkscape SVG” format, but there is a normal SVG option available as well, which I think involves less garbage.
Where’s DC?
2009-05-21 at 01:12
Is there, it’s just very hard to mouse over.
2009-05-21 at 06:03
You can zoom in with normal browser keys to find it (SVG is cool!). Btw. for zooming in it would be nice if the flags were SVG as well
2009-05-21 at 01:14
Small typo: It says Kanasas instead of Kansas.
Nifty and snazzy thing this map!
2009-05-21 at 02:41
Nice work!
Purge that inscape poo using scour:
http://codedread.com/scour/
PS: why not show the SVG flags? SVG within SVG FTW!
2009-05-21 at 03:03
I love it.
SVG has been too long hushed up.
Keep up the good work.
2009-05-21 at 04:22
To make the map fully usable without any Javascript, you can use the :target selector in CSS.
https://developer.mozilla.org/En/Using_the_:target_selector
You will still need javascript to display the infobox on mouseover (CSS :target requires a click) and autohiding it on mouseout
2009-05-21 at 04:31
One of those US states this year holds the SVG world conference: California
See http://svgopen.org
2009-05-21 at 07:32
So… this is fine for what it is, but until I see SVG music videos, I’ll keep flashplugin-nonfree installed…
2009-05-21 at 07:41
@wolfger – The video tag is being introduced into html, why should you need svg for that? to be honest, I’ve never understood why flash did video and vector animation. But hey Adobe. Anyway I’m looking forward to watching ogg theora videos in firefox in comming years.
2009-05-21 at 07:50
As long as a tool knows what is good for, and informs its users so.
If Flash was not omnipresent and polluting websites, just because it pretends to be a universal answer to webdev needs, this post would probably have a different title (I’m convinced that the subject is not to decry Flash, but to demonstrate a nice use of SVG).
Note that Flash has nothing of a music nor video format, it’s just too often used as a wrapper for it : definitely a bad example.
2009-05-21 at 07:37
Good stuff.
2009-05-21 at 10:13
FFS, please turn off the snapshots widget. Terribly annoying.
2009-05-21 at 11:31
I have no idea how.
2009-05-21 at 10:23
I will continue to point out the conflicts between wanting to be a open source community and being so secretive. If that is described as stirring shit up and being a smug head, then that is what I shall be.
2009-05-21 at 11:33
Fortunately I’m not in the open source community, I’m in the FOSS and Ubuntu communities. Nothing is really secrete, just not announced, if you had been paying attention you’d have realised that by now.
2009-05-21 at 10:37
You might want to check out the GFX package of Dojo (http://dojotoolkit.org). It makes working with SVG in a cross-browser way very simple.
2009-05-21 at 14:11
Nothing like using XML for representing graphics.
SVG rendering performance across all browsers is *terrible*. This is one of the big reasons why the element is becoming more popular as a Flash alternative.
2009-05-21 at 15:02
Oh! If you do not use flash you will miss the constant crashes of your browser.
2009-05-21 at 15:45
I find it rather odd that the info layer disappears when your mouse moves over the black line to it, but that doesn’t happen for the circles that appear in the center of the state. Any way to fix that?
Also, Kentucky’s flag appears to be broken.
Aside from those issues, this is looking pretty damn good. While I can’t exactly see this as being a viable alternative to Flash, I also can’t see Flash being a reasonable alternative to this.
2009-05-21 at 20:42
Fantastic…! Make me stand up…!
2009-05-21 at 21:06
Excellent use of SVG! The Web site/IRC Chat/Forums/Wiki text look like they will become clickable menus in the final version. Did you consider using SVG versions of the state flags so that they retain clarity when zoomed? (for instance http://www.google.com/search?q=svg+U.S.+state+flags )
2009-05-24 at 12:13
Some suggestions for improvements that haven’t yet been mentioned:
- specify pointer-events=”none” on the banners/lines etc so that they don’t flicker on and off
- in the pop_element function, if you don’t add “var” before “parent” then what you’re doing is actually overloading “window.parent” which is probably not what you want
- the appendChild trick for moving the hovered element to front doesn’t work properly in Opera (reported as Opera bug CORE-13754), it’s possible to work around this, you need to be aware then that you might get an event on the parent of the path element when it is removed from the tree
2009-05-30 at 14:06
[...] Owens: Who Needs Flash, I Don’t, SVG For Me. Martin has found a great way to use rich graphics for the web without having to go the proprietary [...]
2009-06-17 at 16:54
In case you are interested: Our Federal Statistical Office in Germany is using this technology for a figure on our population:
http://tinyurl.com/mqpg6b
Even if our politicians suck ass with regards to the Internet, some political institutions do pretty well. I think the Federal Agency for Civic Education publishes several documents under Creative Commons license. At least I’ve received one CC-image in school and I have one CC-book of them at home (but the other books are not CC).
2009-06-22 at 19:24
[...] Animations 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 [...]
2009-05-21 at 07:40
@neo – sure, it’s a great community when one person respects to wishes of another developer. I don’t think there is anything worth keeping a secret since it’s all FOSS and on launchpad, but I will still respect the main dev wish to have a big announcement when it’s all done.
2009-05-21 at 07:47
“sure, it’s a great community when one person respects to wishes of another developer”
Why does that person feel the need to keep it as a secret? There is no need for such bullshit.
2009-05-21 at 07:53
@neo: there’s also no need to stir shit up.
2009-05-21 at 08:16
@neo I don’t control the minds of others. Perhaps it’s because he wants all the media coverage to go to a proper explanation of what the new thing will do and that page has not yet been written, who can say.
Although there’s no need to be a smeg-head about it on my blog. Calm yourself.