SVG Clocks

Display UTC and local time using analogue clocks. This document uses Javascript and inline SVG code in an XHTML document. It can be viewed using a SVG-capable browser such as Chrome. I wrote this page nearly a decade ago and only ported it to Blogger.

Firefox 3 SVG Performance Improvement

I did a quick check of my SVG Game of Life demonstration with Firefox 3 and found that it ran much faster compared to Adobe's ancient SVG Viewer 3.03 (ASV). The performance ratio used to be roughly 3:2 in favour of Firefox. Now, it's close to 5:1!

The raw numbers on the same computer: 24-27 fps on Firefox 3, 5-6 fps for MSIE6 + ASV.

Renesis SVG Plug-in

It's old news that Adobe no longer develops its SVG Viewer plug-in. The only browser that really required an SVG plug-in is MSIE; Firefox, Opera and Safari browsers support SVG. If you're still using MSIE and want to view SVG, Examotion has a pre-release Renesis SVG plug-in.

I viewed some pages containing SVG with Renesis and found Renesis can display static images and Javascript animation in an <object> tag. Renesis doesn't currently support in-line SVG (essentially SVG code in XML).

Software: SVG Submarine Assault

Marek Raida was kind enough to send me the link to his SVG Submarine Assault game. It's pretty cool and comes with sound effects.

Software: SVG Planetoids finished

After some feedback from some friends and tweaking the update code, SVG Planetoids is finished. Some bug causes ASV3 to crash but I can't figure out how to solve it. Maybe later I'll try to create a test case to reproduce the bug.

Edit: Changed name to Planetoids.

Software: SVG Planetoids beta

A Planetoids game implemented in SVG and Javascript that works OK on Firefox 1.5 and Opera 9 (beta), but eventually crashes on MSIE6 + ASV3. Still investigating.

Edit: Changed to Planetoids.

Software: SVG Cannons Update

Added some minor features to the SVG Cannons:

• Player can change gravity value.
• Basic keyboard shortcuts to elevate the barrel and fire the cannon.

Thanks to Jonathan Chetwynd, Richard Gnyla and Geoff Tham for their feedback!

Software: SVG Cannons, Updated Sliding Tile Game

Been busily hacking over the last couple of weekends and finished SVG Cannons and updated SVG Sliding Tile puzzle.

Cannons is a simple turn-based game where each player tries to blast the other. Initially, I thought of introducing a basic AI for the second player but the whole project exploded into a mess of inter-related function calls because of the animation routine, so I left introducing an AI until I can figure out a more systematic way to do browser animation.

In the updated Sliding Tile Puzzle, the player can now choose a different sized puzzle (3x3 and 4x4) and there's a new randomize button which generates (in theory) solvable puzzles.

Julian remarked that my site, with all these 80s games, has a retro feel. :)

Misc: Add SVG to Internet Explorer

If you are interested in seeing SVG implemented in Internet Explorer 7, login to the Microsoft Connect site and vote here. The only annoying thing with Connect is that you have to have a Passport account and you need to provide your name, country of residence and e-mail address (again!) in order to register to vote.

As of 4 May 2006, there are 198 votes, which seems (can't sort the features by votes) by far to be the largest number of votes for any feature.

Software: SVG Sliding Tile Puzzle

I wanted to create a simple interactive SVG demonstration, so I wrote this sliding tile puzzle (see http://kamhungsoh.com/000e.xhtml).

The initial coding was straightforward and quick. Only when I wanted to make the demonstration work in MSIE6 and ASV3 did I run into trouble. The first problem was that ASV3 did not process events for SVG elements if the SVG code was inline XHTML, so onclick didn't work. The workaround was to put all the SVG code in a separate .svg file and get the user to open that file. The second problem was that MSIE6 (or ASV3) did not accept a function reference as the first argument to the setTimeout() function, unlike Firefox and Opera. That stumped me for about half an hour until I found an example that used a string as the first argument.

1 May 2006: Tested the program on another Windows XP computer using MSIE6 + ASV3, and it works without needing to open another window. It must be some setting on my notebook.

2 May 2006: In a Gamedev.net thread, Enselic points out that the shuffle doesn't usually move the "1" and could be replaced by a randomizer that ensures that the initial configuration is solvable. I found some maths required to determine if a sliding tile puzzle can be solved in Kevin Gong's Analysis of the Sixteen Puzzle.

Software: SVG Conway's Game of Life

Between driving 2 * 650 km, amusing the kids and visiting my in-laws over the Easter break, I managed to put together an SVG version of John Conway's Game of Life. The interesting bits are:

• Using SVG lines to create a raster by twiddling the lines' stroke-dasharray attribute.
• Making the demonstration work for Firefox and Opera 9 was straightfoward, but I had no idea how to make it work for MSIE + ASV because MSIE does not support the DOM function createElementNS().
• The demonstration ran like a dog until I spent some time optimzing the Javascript code. It's still not blazing fast but I can't think of any more tricks.

I picked up the stroke-dasharray tip from Kevin Lindsey and Martin Honnen showed me how to use ASV's SVGDocument properly. See the Yahoo! svg-developers mailing list for the discussion.

Software: Javascript SVG Analogue Clocks

After a weekend's break due to real life intrusions, I finished a demonstration of SVG-drawn analogue clocks animated by Javascript. It's the simplest thing I could imagine that could not be easily done using just XHTML + Javascript because it involves rotating the hands of a clock. Along the way, I found some unexpected gotchas involving CSS and SVG (see my programming notes below the clocks).

Software: Limitation Of Using SVG Plugin

Is this a limitation of displaying content using a MSIE browser plug-in: elements can't be shared between plug-ins? For example, using MSIE + ASV, I can't seem to define elements in one SVG element, then use them in another SVG tag. What I wanted to do was to define some SVG elements, then use a XHTML table to lay them out in a grid:

<svg>
  <defs>
    <g id="myElement"> … </g>
  </defs>
</svg>

<table>
  <tr>
    <td>
      <svg>
        <use href="xlink:#myElement" > … </g>
      </svg>
    </td>
    <td>
      <svg>
        <use href="xlink:#myElement" > … </g>
      </svg>
    </td>
  </tr>
</table>

While Firefox 1.5 can display my SVG elements in a table, MSIE + ASV shows nothing.

Software: Basic SVG Shapes and Javascript

Once I realised that I can reference SVG objects in Javascript by using object = document.getElementById(), it became a straightforward task to change any attribute of an SVG object using object.setAttribute(). I added a control panel to my Basic SVG page, which I started last weekend, to interactively set the attributes of the SVG objects on that page. Now, I can immediately see the effects of setting different values to fill, fill-opacity, fill-rule, stroke, stroke-linecap, stroke-dasharray, stroke-linejoin, stroke-opacity, stroke-width.

Software: Basic Inline SVG At Last!

It seemed like such a simple task: put some SVG code into an XHTML document on my hobby web site. I managed to do it but it required jumping through several hoops. The best source of information on inline SVG can be found in this Wiki article. Here's some extra gotchas that I found while developing this simple page. Note that I'm using Firefox 1.5, IE6.0, ASV 3.03 and Windows XP Professional SP2.

Create your XHTML + SVG document

Follow the Wiki article and create an XHTML document (one with DOCTYPE and the required namespaces) and insert your SVG fragment with its own namespace. Save your file with a .xhtml extension.

The .xhtml extension is required otherwise Firefox will load your file in HTML standards compliance mode and you will not see any SVG image at all. On the other hand, if you use the .xhtml extension and try to open that file in IE6.0, IE6.0 will show the XML tree view! In the end, I stuck with the .xhtml extension because there's a web server workaround (see the Wiki article) and made a copy with a .html extension for testing with IE6.0.

Add special tags for IE6.0

The extra <object> tag and <?import?> processing instructions tell IE6.0 to use ASV for the svg namespace elements. The only gotcha is that IE6.0 leaves a blank space for the tag and processing instruction.

Add web server support

Fortunately, my hobby site is running on an Apache server, so it was easy to add the required changes to the .htaccess file.

Finally …

After spending some hours setting things up and working through the gotchas, I finally got a simple draft page on my hobby site. It isn't much to see at the moment, just a yellow disk. Still, it's a start!

Software: SVG Red Circle Test

Can I include SVG pictures in blog entries without mucking around with <embed> tags and separate files? If you have an SVG- and Namespace-aware browser such as Firefox, can you see a red circle below this paragraph?

Probably not. If you check this page's properties (context menu View Page Info) Blogger has sent this file with Content-Type: text/html, so Firefox goes into quirks mode and displays this file as old-fashioned HTML, ignoring the svg elements. I tried changing the template's <meta> element to change the file's Content-Type but no go.

2 March 2006: Wiki describing the horrors of inline SVG coding.

21 August 2015: Yay, nine years later, I can see a red circle after reading Making SVG work with Blogger.