Starting through.

This page is for the new Browser.

Alexander Fritze has added libart which is a library for high-performance 2D graphics to Mozilla.
Thanks to him all of my earlier work is the past. ;-)

These circles with hover opacity are just one example of the newest developments, thanks to Alex. But as with all new things it also brings an oppertunity to learn more. Take the wonderful development to the left. Circles, stroke and fill, opacity, transform and a little CSS of hover, (gets us into a little trouble, but more on that later) yes these have been in plugin SVG for awhile, however look MA no plugin.

Let's start with a basic shape; polylines. This basic shape looks so. As you see from the script below it is and an island of svg in this docuement. One thing that you also will notice is the white background. This is the viewbox being set in the first line of the image. It looks so.
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
You might have to close the 'My Sidebar' if it is open to see this, of course it depends on you monitor resolution.
This whole site is written mainly for 800 X 600 on a 17" monitor set a 16 million colors.
So back to this polyline stuff. There really isn't much more to say about it, just look at the code and it should be plain to see that a system of X|Y corrdenates are being used with X="0" and Y="0" at the upper left corner. Don't be misslead by by the fact that this image is not starting in said corner. There has been a transform set to X="20" Y="20". The transform attribute will be covered later.
You will also noticed that png images have been added, these are here for the folks who are not using the new browser.

This is SVG.
 This is a png image of the SVG.
polyline-new.png (1K) 

<svg xmlns="http://www.w3.org/2000/svg" width="380px" height="60px"> 
<polyline points="0,0 0,20 40,20 40,0 80,0 80,20 
120,20 120,0 160,0 160,20 200,20 200,0 240,0 240,20" 
style="stroke:red; stroke-width:2;">
</svg>

Now let's take a look at polygons. The figure below is the same script as the polyline above with the only difference being the name was changed from polyline to polygon and in the styling fill:yellow; was added.
Polygons always connect from the last X|Y points to the first pair in the script. This is shown nicely with the stroke line from 240,20, the last point to 0,0, the first point.
Notice also how the fill works, only the areas on the inside from the last point to the first point is filled.
So the difference between a polygon and a polyline is that the inter areas of a polygon are filled.

This is SVG
 This is a png image of the SVG.
polygon-fill.png (3K)

Now here is the latest imaged that has been add, the circle. That hover has already been set for an opacity change for the three circles at the top, I've left this one change also. hover:opacity will be covered more later.

This is SVG
 This is a png image of the SVG.
circle-new.png (3K) 

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
<circle cx="50px" cy="50px" r="40px" style="fill:yellow; stroke:red; 
stroke-width:15;" />
</svg>
As you can see from the script above, the center of the circle has been placed at the center of the viewbox; i.e. X="50px" and Y="50px".

The next thing we want to look at is 'transform'.
This is a very useful way to manipulate SVG images. At the moment this browser from Alex can render three forms:

transform=""
These can be use seperately or one can combine them. As stated above with the polyline, transform has already been used in this page; transform="translate(x,y) scale(0.0)"
So let's see a little in action, okay. All three polygons are the same as far as script of points are concerned.
The first pologon has had no transform added.
The second has had [transform="translate(80,25) scale(1.5)"] added to the first polygon.
The third has had [transform="translate(200,60) scale(2) rotate(180)"] added to the first polygon.
This is SVG.
 This is a png image of the SVG.
polygon-three.png (1K)

Well let's take a look at a little animation. When you click on the 'X bar' it should retract. While when you click on the 'Y bar' it should repaint itself. And of course we all all know what a refreshing button is for, right?
The script that allows this animation to work is located in the head of this document and was adapted from one at Alex's site.