http://pwdemo.rcode.net/svg_tester

I know I’m probably late to the game on this one, but I had not realized until recently how well SVG was supported in a lot of browsers. I actually didn’t realize it until I needed it for a visually rich application prototype I’m working on. I really didn’t want to use Flash, so I checked out SVG again. To my suprise, it is fully integrated into Firefox, Opera 9 and some (pre-release?) versions of Safari.

So I started with the SVG example from Mozilla.org. It draws three circles with primary colors that are semi-transparent:

   1:  <svg xmlns="http://www.w3.org/2000/svg"

   2:       version="1.1" width="500" height="500"

   3:       baseProfile="full">

   4:    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">

   5:      <circle cx="6cm" cy="2cm" r="100" fill="red"

   6:                      transform="translate(0,50)" />

   7:      <circle cx="6cm" cy="2cm" r="100" fill="blue"

   8:                      transform="translate(70,150)" />

   9:

  10:      <circle cx="6cm" cy="2cm" r="100" fill="green"

  11:                      transform="translate(-70,150)" />

  12:

  13:    </g>

  14:

  15:  </svg>

  16:

I thought a modest goal would be to adapt Protowidget so that it could attach widgets to some SVG elements. I could then use the property bindings to make the circles move around. It’s dumb and pretty simple but forms the basis for creating more advanced SVG widgets.

This turned out to be harder than I had expected. The main culprit was that Protowidget wasn’t fully compatible with real XHTML. There’s the normal stuff: no document.write (it was used to bootstrap the system by writing script elements to the header), createElement must use namespaces, etc. It took a little longer than necessary to fix because I still wanted to preserve compatibility with namespaced xml documents and IE when the advanced features were not in use.

So I fixed all of that and added real namespace support so that the Protowidget attributes are now part of their own namespace if using an XHTML document. If working in normal HTML, the pw.* syntax can still be used. There’s even a hack, so that if you use the “pw:” prefix for your namespace, the parser will be able to work around IE’s deficiencies. I then added an SvgWidget to mirror the HTML DOMWidget (which in hindsight should have b