HTML and CSS Reference
In-Depth Information
graphics directly inside the browser without use of a third-party plug-in. As modern browsers become ubiquitous,
there'll be one set of standards for creating graphics on the web. In addition,
canvas
is great on mobile and tablet
devices; support is very strong across manufacturers, operating systems, and browsers. Browsers on mobile devices
will soon all take advantage of hardware support via the Graphics Processing Unit (GPU) to speed up rendering and
tax the CPU much less. Canvas is a huge game changer for online advertising and for the Web as a whole. Examples of
campaigns using the
canvas
element can be found at the following URLs:
•
I expect to see more ad designers and developers leveraging
canvas
in the near future for their HTML5 campaigns. In
short,
canvas
will be here for the long haul. It will be a customary element for working with graphics on the Web—but
yet again, bear in mind that it is still emerging. Thus, leveraging it for any and all animations and graphics within a
campaign may not be the smartest thing to do unless you have a failover in place.
•
SVG
As you've seen, the
canvas
element is great for creating rich graphics and animations in HTML5, but there's another
graphical language that's been around for quite some time (since 2003): SVG. SVG (scalable vector graphics) and its
now supported inline via HTML5. (“Inline” means SVG content can be included simply by adding
<svg>
tags within
the HTML markup.)
Let's first break down what SVG does. Scalable vector graphics are essentially XML markup defining a set of
strokes, fills, and graphic instructions in a way that the browser can understand. At any size or zoom level, SVG
will render the art to the screen sharply. Within an advertising campaign, it is exceptionally important to maintain
legibility for brand names, logos, typefaces, and overall copy. In the mobile device ecosystem with varying pixel
densities, SVG will still also render crisp to the screen, so use SVG when and where you can.
SVG is powerful yet simple in that its vector-based—which means that strokes and fills are rendered
mathematically onscreen by coordinates. Contrast this with bitmaps, which are rendered in pixels, whose presence
can lead to subpixel aliasing and the creation of feathered or blurred images if they don't reside on a whole pixel.
Native SVG support is an important enhancement to the HTML5 spec; it allows designers to create in Adobe's
Illustrator (or whatever their vector tool of choice is) and export for the screen by saving their work as an SVG
file. This file format is a W3C specification and is widely supported across browsers. SVG is really good at saving
on art's k-weight as well as its legibility and overall fidelity. See Figure
4-6
, which shows the Pepsi logo (from