HTML and CSS Reference
input or other events. RaphaëlJS is also pretty much cross-browser-friendly as Firefox 3.0, Safari 3.0, Chrome 5.0,
Opera 9.5, IE6.0, and all newer versions of these browsers support it. However, within the advertising realm, RaphaëlJS
is a bit large unless you have room to play with k-weight. Since it sits at approximately 89 kilobytes minified and over
200 kilobytes unminified, it could break the bank with some publishers. So be mindful before going down this path, as
it may be tough to retool the creative or get the publisher to budge on the specs.
SMIL (Synchronized Multimedia Integration Language) allows for animation in the SVG element. According to the
Mozilla Developer Network ( developer.mozilla.org/en/SVG/SVG_animation_with_SMIL ) SMIL provides the ability
to animate an element's numeric attributes, transform attributes, and color attributes and motion path. Listing 4-12
demonstrates how to leverage SMIL within SVG.
Listing 4-12. Leverage SMIL Within SVG
<svg width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" fill="white" stroke="white" stroke-width="1" />
<circle cx="0" cy="50" r="50" fill="green" stroke="white" stroke-width="1">
<animate attributeName="cx" from="0" to="300" dur="1s" repeatCount="indefinite" />
In this listing, a green circle is being moved across 300 pixels within 1 second, and the process is repeated forever.
This is pretty simple to accomplish if you take a look at the bolded line of code. Test the listing in your browser;
you'll notice that SVG animation is surprisingly fast. There are many more features to take advantage of—this simple
code shows animating on the x value only—so be sure to check out the URL [ http://srufaculty.sru.edu/david.
dailey/svg ] and learn more as well as start experimenting. Try adjusting color, animating along a set path, and even
manipulating the shapes while animating. Last of all, always use caniuse.com/svg-smil to check for overall support
before leveraging the SMIL manifest.
Canvas and SVG
You may be thinking, “I have the canvas element and SVG support, but which one do I use?” Well, from an end
user's visual standpoint, they are similar in what they can handle, but they differ greatly in technology. Both support
from XML markup. A benefit of SVG is that it can be styled via CSS because there are actual DOM elements within the
document's markup, whereas with canvas being just one object (container) in the DOM, CSS styling is prohibited,
unless you're targeting just the canvas element itself. In short, you should really leverage both, depending on the
requirements of the creative and the campaign's reach. For an extremely detailed and thorough write-up, go to the
Opera browser's developer site ( dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two ) .
SVG in Advertising
Having SVG in web standards advertising is a pretty big deal. I've used vector art in Flash for many years to save on file
size, and the same applies for development in the browser now. Not only does SVG render simple and complicated
vector drawings by describing a bunch of mathematical coordinates directly within the browser markup; it's also very
important in brand identity, maintaining image fidelity, and font rendering (as the following section explains). In
addition, SVG can be saved via programs designers are already using. This makes the learning curve much easier to
cope with. SVG renders quickly and, as you've seen, combines well with its SMIL animation counterpart. So I strongly