Using Canvas, SVG, and Web Fonts - HTML5 Advertising

HTML and CSS Reference

In-Depth Information

create in its library are also DOM objects; thus, you can attach the usual JavaScript event handlers to them for user

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

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

</circle>

</svg>

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

layout, gradients, animation, user input, and masks, but one is driven by a JavaScript API, and the other is formed

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

Search WWH ::

Custom Search

Home