I came across David Bellot's SVG cards awhile back and thought it would be cool to put together a simple online card game in SVG.


The SVG cards (2.0) are a 1MB gzipped SVG file. Unfortunately, in the currently available version there is a fatal typo that cripples the cards in Firefox and Opera. The xmlns:xlink namespace is improperly spelled as "http://www.w3org/1999/xlink" which should be "http://www.w3.org/1999/xlink". It's amazing to me how a simple typo like this can render the XML useless. Anyway, I let David know about the typo and gave him some further suggestions on how to make his beautiful cards more useful to SVG application developers. He said he plans to release a new version soon.

For now, I'm using a seriously stripped-down version of his cards in my playable demo: Solitaire. I also thought I'd use Rob's new WP plugin to inlay the SVG into my blog, but that didn't seem to work quite right in IE+ASV. Not sure why yet...

Click here to play SVG Solitaire in the full browser window.

It's a little rough around the edges, there's no "win" screen or message, and some of the drag/drop tolerances may be a little off. To reset the game, you just reload the web page. It's also a little slow in Firefox (but quite snappy in IE+ASV). Doesn't work yet in Opera 9 due to the dragging problems I've been experiencing (I've heard from Opera developers that this problem should be fixed in the next build).

I also had to update my Drag SVG library to allow me to register callback functions on drag events, something I should have obviously foreseen when I first wrote the library. Version 1.1 of the library is here.


§207 · January 18, 2006 · Games, Software, SVG, Technology, Web · · [Print]

Leave a Comment to “SVG Time Waster: Solitaire”

  1. Rob says:

    Wildly cool.

  2. jamie says:

    Great! I’ve been thinking about the exact same thing. There’s definitely lots of potential for browser based SVG card games. I’ve been *trying* to work on a “light weight” set of SVG cards myself. But given the detail in the face cards, I think it would be very difficult to render all of them in SVG as well and still have a playable game.

  3. stelt says:

    # Error Line 11, Column 32: required attribute “type” not specified.

    # Error Line 12, Column 34: required attribute “type” not specified.