SVG + JavaScript
SVG is way to describe graphics in XML format. I have been playing around with it lately hoping to use it to add graphs to Adsense Notifier. But graphs, as useful as they can be, are terribly boring. So I have started to see just how far I can push SVG and what it will let me do.
In order to view the files, you will either need an SVG plug-in for IE, or versions of Firefox 1.5 and above have native support (another excuse to try the browser everyone is talking about!).
Both examples below use JavaScript and the SVG DOM to create the XML on the fly. I don’t think that either of these are what the intended use of SVG is for, but then what fun things are? Another neat thing to note, is that the text with the SVG and JavaScript is about 1/3 the size of the thumbnails.
“3d” SVG Example. - This example makes a faux 3d field of cubes and shows off using onmouseover effects and transparency.
Animated Fire Example - Recreates the Fire effect used in many BBS Demos way back when. Creates both the field of boxes, as well as the animated Fire effect on the fly.
Feel free to view the source and play around with them, even though they are only snippets I have released them under the GPL license. Let me know if you make anything fun with them!
Further resources:
Croczilla SVG Samples
Mozilla SVG Project
4 Responses to “SVG + JavaScript”
Leave a Reply
Most Popular
Recent Posts
- Manage Your Posts Only in Wordpress
- Adsense Notifier
- How to Stand Out in a Sea of Fives
- The Secret to the Search Engine Long Tail
- How to Remove the Posts per page limit in Wordpress
- Mortgage Companies are Crazy
- Why your successful site is leaving money on the table
- Firefox Addon Developer T-Shirt
- Windows Wireless API
- What Tools Do You Use for Windows Automation?
Categories
Sponsors
Links
- My Resume
- Vegan / Vegetarian Recipes
- Management College
- Classic Kid's Games
- Hotels of the Rich and Famous
- security.shftleft
Meta
February 9th, 2006 at 11:09 pm
For more browsers with SVG support and a broad range of SVG examples check http://svg.startpagina.nl
February 21st, 2006 at 10:39 am
SVG graphs of my Adsense reports would be awesome!
I’d also love to be able to pick up Yahoo! Publisher Network revenues in the same extension.
You could rename the extension to be called ‘Net Worth
Regards,
Jeff
March 24th, 2006 at 1:09 am
I don’t want anything fancy. Simply a curve graph or a surface graph. That should be enough, but don’t forget to allow changing between day, month, last payment, etc.
Your plugin is already amazing, no need to have super 3d graph that tells nothing but “look” fancy. Go for a nicely designed 2d graph and we’ll all be happy.
June 5th, 2006 at 6:17 am
Keep doing the SVG thing. Don’t worry about Adobe plugin for SVG. Firefox is faster and better, not to mention up to date with strong community support. Death to software that does not support open standards.