XHTML+SVG+Javascript: Say goodbye to Flash.

In the past, people used Adobe Flash to create animation on web. These animation are distributed in .swf format and referenced by the HTML. However, there is a huge problem: none of the open-source free players plays Flash well now so it’s better to avoid using Flash. Let me introduce three technologies which can replace Flash on the web:

  • XHTML
    XHTML was developed as an XML serialisation of HTML. HTML was developed as an application of SGML to create web pages. An SGML document consists of tags. However, in SGML, tags can be omitted and must be interpreted in context. XML is a subset of SGML requiring all tags to be opened and closed properly. Compared with SGML, parsing XML is faster because its rules are simpler. Also, XML is designed to be extensible, enabling different XML applications to be used inside a single XML document. XHTML 1.0 and HTML 4.01 are identical except the underlying mark-up used, therefore, authors can replace HTML with XHTML very easily.
  • SVG
    SVG is an open standard of vector graphics. It is an application of XML so it can be manipulated with standard XML tools.
  • Javascript
    Javascript is a scripting language that is a superset of ECMAScript. It is already widespread on the web to create client-side dynamic contents. By using Javascript to control the DOM of SVG graphics, animations can be created.

Here is a small example:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> An example document with animation </title>
 </head>
 <body>
 <svg:svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
 <svg:polygon points="200,100 100,300 300,300" fill="black" id="animation"/>
 </svg:svg>
 <script type="text/javascript">
 <![CDATA[
 function change() {
 var element = document.getElementById("animation");
 if(element.getAttribute("fill") === "black") {
 element.setAttribute("fill", "red");
 } else {
 element.setAttribute("fill", "black");
 }
 setTimeout("change()", 1000);
 }
 change();
 ]]>
 </script>
 </body>
</html>

This is an XML file which contains both the page and the animation. It is uploaded at http://miklcct.com/tests/animation.xhtml and you can use a real web browser to see the effect.