Friday, December 2nd, 2005

Taking Firefox 1.5 for a ride with SVG and Canvas

Category: Browsers, Canvas, Firefox

As soon as Firefox 1.5 comes out, people want to play with some of the shiny nobs.

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>

moon-orbit-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.

canvascape

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?

Posted by Dion Almaer at 8:51 am
9 Comments

++++-
4.1 rating from 15 votes

9 Comments »

Comments feed

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.

Comment by Rob Sanheim — December 2, 2005

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.

Comment by Scott Schiller — December 2, 2005

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.

Comment by Gregory Pierce — December 2, 2005

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

Comment by Daniel — December 2, 2005

I found this one in the end of the “Canvas Tutorial” :

http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html

Comment by mkhDev — December 4, 2005

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.

Comment by Dylan Schiemann — December 5, 2005

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.

Comment by Chris — December 6, 2005

The moon demo also works in Opera 9 Preview 2, if somewhat slower than in Firefox.

Comment by Chris Hester — February 13, 2006

[…] Update: I just found SVG Basics Tutorials through a good comment over at Ajaxian. […]

Pingback by Haunt of Crows » Blog Archive » A good technique for the Ptolemaic simulator — May 29, 2006

Leave a comment

You must be logged in to post a comment.