Friday, December 2nd, 2005
Taking Firefox 1.5 for a ride with SVG and Canvas
Category: Browsers, Canvas
, Firefox
SVG: How Did The Moon Get Into Orbit?
One of the early post-release examples of SVG support on Firefox 1.5 was this demo showing moon orbits. If you take a peak into the source you see the magic of SVG right in the page:
<svg id="ssvg" onload="animate(evt)"
xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="-600 -600 1200 1200" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<defs>
<radialGradient id="grad1" cx="25%" cy="25%" r="400%">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
...
</defs>
<circle fill="url(#grad3)" stroke="none" cx="0" cy="0" r="150"/>
<circle id="aim" fill="#aaaaaa" stroke="none" cx="0" cy="-300" r="10"/>
<circle id="circ" fill="url(#grad2)" stroke-width="2" stroke="black" cx="0" cy="0" r="100"/>
<circle id="ball" fill="url(#grad1)" stroke-width="2" stroke="black" cx="0" cy="-300" r="10"/>
<circle fill="none" stroke="#ffaaaa" stroke-width="2" stroke-dasharray="7,4" cx="0" cy="0" r="150"/>
</svg>
Canvascape: Doom via Canvas
Benjamin Joffe wanted to see how far he could go with Canvas, and his proof of concept became Canvascape which is a small 3D world that you run around.
What you are seeing is a test using the new Canvas tag to demonstrate its capabilities. I am beginning a project to port ‘Doom’ to the common browser through javasScript.
It is great to see more and more examples. I saw an impressive example in the Dojo tests too, and I am sure we will see a lot of experiments. Now, if IE7 supported SVG instead of going its own direction…
Has anyone seen good SVG/Canvas examples?
Related Content:
This stuff is great, but I fail to see where it will be used in the large unless IE gets in line with it. I’m sure it will great for some small scale intranet type things.
I know the guys behind this site, they’ve been excited about SVG for a while and have some handy examples and tutorials. I need to look into some of this stuff myself!
http://www.svgbasics.com/
SVG (I think) has the potential to really blow up if the support across browsers grows much like Javascript has over the past few years.
Its certainly interesting, but there is certainly a performance issue with Canvas as it seems to simply not be hardware accelerates AT ALL. The textured version of the “Doom Canvas” is slow as balls, and even on a slow machine with poor hardware it should be significantly better than that.
Try the tutorial on the mozilla developer center.
They have a nice writeup with examples.
I tested a few of them, and they are pretty easy to implement. I especially like the analog clock example.
http://developer.mozilla.org/en/docs/Canvas_tutorial
I found this one in the end of the “Canvas Tutorial” :
http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html
http://archive.dojotoolkit.org/nightly/tests/widget/test_Chart.html
An example showing SVG charts with Dojo using the new charting widgets (works only in Firefox 1.5). Support is planned for VML compatibility where possible.
I’m actually disappointed with FF 1.5 SVG support because it doesn’t allow for zooming/panning of the graphic like Adobe’s viewer does. The real draw to SVG is that resolution remains high when you change the size. Without navigation functions, FF’s implementation leaves a lot to be desired.
The moon demo also works in Opera 9 Preview 2, if somewhat slower than in Firefox.
[...] Update: I just found SVG Basics Tutorials through a good comment over at Ajaxian. [...]