SMIL Developer Resources

SMIL is an acronym for Synchronized Multimedia Integration Language. Despite its spelling, it is pronounced, "Smile." Based on XML, SMIL not only displays content but also the timing. As a result, it is used to create multimedia presentations and animations. A very simple example would be to display a title card for 5 seconds followed by an image for 10 seconds. But SMIL can do far more than that.

History of SMIL

All the way back in 1997, the World Wide Web Consortium (W3C) started developing SMIL. The first official version (SMIL 1.0) was released in 1999. In 2001, SMIL 2.0 was released, which made some changes to the underlying structure of the language and introduced modules for animation and timing. The current standard is SMIL 3.0, which was released in 2008. It expanded the existing modules and added more.

After the release of SMIL 1.0, Microsoft and some other companies proposed HTML+TIME to the W3C. It was a system to allow SMIL to be displayed in ordinary browsers. W3C changed the system substantially and released XHTML+SMIL, which added SIML functionality to XHTML.

Functionality of SMIL

SMIL allows you to control all the aspects of display that you would control using PowerPoint or a similar multimedia presentation tool:

  • Layout
  • Timing of events
  • Transitions
  • Media (images, video, audio)
  • Animation with SVG[1]

Why Use SMIL

It may seem like a lot of hassle to learn to code SMIL when you could just use PowerPoint and convert it into a flash format for distribution. But SMIL has a number of advantages over these kinds of approaches. Below are the major ones, but you can learn more by reading, What's SMIL and Why Should We Use It?

  • Open file format. This is especially useful if you are collaborating with one or more people.
  • Media files are external. Once your media files are finished, they only have to be uploaded once, even as you make substantial changes to your presentations. In addition, your presentations can use media files on different servers. This also means that various presentations can use the same media files.
  • Ease of editing. Wholesale changes to presentations are often very involved. With SMIL it is just a matter of cutting and pasting lines of code.

SMIL Format

SMIL files look a whole lot like normal XHTML files. In fact, the basic format is exactly the same:


<?xml version="1.1" encoding="UTF-8"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 3.0 Language//EN" "http://www.w3.org/2008/SMIL30/SMIL30Language.dtd">
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
<head>
<layout>
<root-layout xml:id="root" backgroundColor="teal" width="480" height="270"/>
</layout>
</head>
<body>
<seq>
<par dur="5s">
<img src="image.jpg" region="background" left="100" top="100" />
<smilText region="text" begin="0s">
This is an image of the Andromeda Galaxy:
</smilText>
</par>

<par>
<seq>
<smilText region="text" begin="5s" dur="10s" top="200">
This is text for a video delayed by 5 seconds:
</smilText>
</seq>

<switch>
<video src="video.flv" region="video" />
</switch>
</par>
</seq>

</body>
</smil>

As you can see, it is an XML file. The SMIL 3.0 language definition is then loaded.

After that, there are two parts of the file, just like with an XHTML file: head and body. In the head goes the usual stuff like meta tags. Here we've just put in one basic layout tag to set the background to be the color teal.

The body is more interesting. It starts by loading an image and a caption — displaying them for 5 seconds. Then it loads a flash video, waits 5 seconds, and then displays a text caption for it.

In this one example, you see most of the basic functionality of SMIL and how easy it is to create presentations.

Basic Tools

Support for SMIL is sketchy in most browsers. For example, as of version 45, Chrome has deprecated SVG SMIL support. In order to learn to code SMIL, you are best off getting a SMIL viewer. You can use common tools like QuickTime and RealPlayer. You will probably have more success with the open source viewer Ambulant Player. It is actively developed and supports the full SMIL 3.0 specification.

In terms of development, all you really need is a text editor. However, you might want to use an editor tailored to SMIL and XML.

Resources

There are lots of online resources, but they can be hard to locate because many of them have disappeared over the years. Those that remain are often focused on SMIL 2.0. This isn't a problem, because it still includes the relevant information. We've put together the best resources here.

Overview

Tutorials

Reference

Books

Conclusion

SMIL is a great tool for people who want to create and distribute presentations. And it is especially useful if you want to create presentations that need to be updated from time to time. There is a modest learning curve, but once you get the hang of it, it is as easy as coding XHTML. And it allows you to easily reuse code you've used before.


[1] SVG stands for Scalable Vector Graphics. Using SMIL, you can create animations by making time-dependent modifications to the graphics.