Displaying chess games in Web pages using ChessGML and SVG

It's taken 4 years, but someone's done it: ChessGML/SVG in 3D! Congratulations Peter Gould and the Hopgood/Duce duo.

If you have the Adobe SVG plug-in installed, you should see an animated chess game just below.

What is it?

The ChessGML/SVG stylesheet is an XSLT transform that converts chess games in ChessGML notation to an SVG file, which can simply be linked to from an HTML page for viewing in a browser that supports SVG.

The ChessGML game notation, created by Andreas Saremba, is an XML encoding for chess games as well as tournament tables. A ChessGML file can be generated by hand or converted from PGN (Andreas Saremba provides a converted with the SGML package). SVG is a vector graphics format for the Web, developped by the W3C. SVG is also an XML vocabulary, so we use XSLT, the XML-to-XML transformation language to perform the transformation. The advantages of using SVG for viewing chess in a browser are:

• it is a vector graphics format, you can zoom in or out the board and you won't get bitmap artefacts
• A game encoded in SVG comes as one file: no separate font or images. Everything is held together in the .svg file, which can easily be embedded in your html.
• SVG, ChessGML, and XSLT are open standards, and many open source implementations exist. Only the Adobe SVG viewer isn't, but it is still freely available.
• SVG, ChessGML, and XSLT are XML standards and therefore benefits from XML's accessibility, interoperability and usability features. See XML in ten points for further details.

How do I put my games on the Web?

1. Get the Adobe SVG plug-in
2. Get an XSLT processor. Many exist, I mainly use saxon or xsltproc
3. Get the ChessGML distribution. It explains the syntax of the language, and provides tools such as a PGN to ChessGML converter
4. Get the stylesheet. It comes as four files
   • The main file is game2svg.xsl.
   • text.xsl, provides templates for formatting text in different languages
   • A chess font file called Chess Sophia (which is automatically included in the output SVG files)
   • board.svgA board description file, also automatically included.

A couple of example are available:

• The Immortal Game (ChessGML, SVG)
• The Scholar's Mate (ChessGML, SVG)

Planned Improvements

• Handle all of ChessGML's markup. In particular, game comments, variations, chess problems.
• Add interaction: forward, back, restart buttons, or a scrollbar. This would require me learning ECMAscript, though. Update: Peter Watkins has written a version where you can move pieces on the board, see all possible moves. He also provides a complete interactive interface to a chess problem database. Check out validating moves and commentary using XSLT. It's impressive.
• Use CSS as much as possible and have an external CSS style sheet, making it easier to change the chess font, the colors and everything.
• Although this is meant for serious chess usage, a version with fancier graphics and animation would be cool.
• Write an XSLT stylesheet that plays against the user.

Acknowledgements

Thank yous go to Dean Jackson who convinced me not to be ashamed and publish this. Vincent Hardy suggested the scrolling move list, Thierry Kormann provided assistance about SVG, and of course kudos to Andreas Saremba for designing ChessGML.

Licence