Rich Media Advertising with SVG and JavaScript

Introducing SVG and HTML5 VIDEO element to the mainstream advertising

Table of Contents

Rich Media Advertising
Rich Media Examples
Is it accessible?
Is it reusable once created?
Is it CPU / Bandwidth hungry?
How big are those files?
How much does it cost to produce one of this?
Rich Media Authoring Applications
Why Flash is ahead and SVG is still behind?
Why SVG can be better?
Rich Media Creative with SVG and the VIDEO element
Rich Media Creative with Flash (SVG Equivalent)
Creatives performance (SVG vs Flash)
Why SVG over CANVAS?
Facing problems
The Good News
SVG Tools
Video encoding
Browser support!!!
The Future

With introducing the CANVAS and VIDEO elements as part of the HTML5 Specification, a new opportunity is open to introduce SVG and web standards as platform for rich media online advertising (interactive and video content in online ads). The tools and apps for rich media online advertising provided nowadays are build with the Flash technology as delivery platform, and therefore are dependant on one vendor, Adobe, to provide IDE, API and Frameworks.

This project will present rich media creatives produced using Flash, ActionScript and Flash Video, and show complete equivalent of the same creative produced with SVG, JavaScript and the VIDEO element. The aim is to compare latency, file sizes, accessibility, tools and workflows of this two technologies, and hopefully provide blue print to introduce SVG and web standards (HTML, CSS and JavaScript) to the mainstream advertising as equivalent if not better delivery platform.

Back in October 25, 1994 HotWired (the online sibling of Wired Magazine) was the first web site to sell online advertising space in large quantities to a wide range of major corporate advertisers. They were also the first company to provide click through analytic reports to its customers. This (sales) initiative was the brain child of Rick Boyce, a former media buyer with San Francisco advertising agency Hal Riney and Parnters. [source]

In late 1996 Hewlett Packard partnered with San Francisco-based online agency, Red Sky Interactive, to produce what is now regarded as the worlds first interactive rich media banner ad (dare I say Advergame). The ad was developed by Red Sky programmer Chris Hurwitz (using Macromind Director) and allowed users to play the classic videogame Pong within a banner ad. Looking back, it seems quite poignant that the world’s first rich media ad was based on the world’s first video game, Pong. [source]

Historically Rich Media advertising is dominated by the Flash technology, manly because their authoring environment was tied in with Agency Design Tools, like Macromedia Freehand and Adobe Photoshop in the past, so designers who initially create advertising content or Agencies in the process of moving from print to web were familiar with this environments and tools. Also, by being initially made to be cross-browser, cross-platform (well, only for Mac and Windows, Mozilla and IE at the time, but now it is very ubiquitous, even on Linux and braking on to the smart mobile devices), the platform became instantly attractive to the advertising world. There were early attempts with JavaScript and lately with AJAX, but with no big success.

As Internet expanded, and online advertising was recognized as best ROI, Creative Agencies had to be more smart in delivering bespoke solutions for their clients, they started to use ActionScript more and more, started to use games, micro-sites and video and wanted all this to be measurable and tracked, all nicely detailed in reports in various formats. This required more coding, and Third party Ad Serving vendors (web services sitting between Advertisers and Publishers) started to extend Flash with components and provide web authoring tools to simplify the process for the users who where not willing to learn coding but still wanted complex solutions and creative adverts (i.e. Expanding banners, Floating adverts or Peel downs with lots of rich media and video in them). Every single vendor in this arena is based on the Flash technology. Similar to the YouTube Video revolution that was made possible with the Flash ubiquity.

Few questions are arising when it comes to authoring ad content for the web:

Online advertising applications are still only SWF (Shockwave Flash, binary compiled format) upload, test and publishing platforms, not creative authoring tools. Main content development is still done in Flash and Adobe CS.

  • SVG and Web Standards move too slow, propriety software move faster

  • Modern Browsers (aka FF and Webkit) - only recently started to support SVG native with full spec implementation.

  • IE - we still have to hack it to make it work with this technologies and use the old-school plug-in work around or wait for the big industry players to distribute this solution

  • Luck of professional authoring tools

  • Accessibility

  • Semantics

  • Open Standard

  • Development Environments

  • Testing

  • QA

  • Maintenance

See the images to compare loading times and file sizes. Note that in this prototype I was using non-ziped SVG file. If used as "svgz", the file size will be reduced by 70%. You can also open the prototype links above in FireFox and use FireBug to see the Net stats.

  • Accessibility

  • Semantics

  • Developers familiarity with web standards

  • Same thing, yet another API

Authoring tools for the masses. Not everyone is engineer or web developer. Designers, main force behind online advertising creativity and solutions, like to draw and paint, not code. They think in images, story boards and animation, not code. Coding should be done in the background as magic, similar to the current desktop authoring tools, but web based with the data in the cloud.

There are some authoring tools, like Inscape (very powerful but with no time based animation features), but they are copying Adobe Illustrator and are mostly used as free alternative. Adobe Flash is offering everything needed for rich media authoring, and established as standard in the advertising world.

Therefore, production of ads can be very expensive if you hire only engineers (with no design and media skills) to produce SVG/JavaScript based ads.

SVG "foreignObject" is here to save the day.

You can insert the VIDEO tag and add all video player scripting using the "foreignObject" element:

<g transform="translate(418,10)">
  <foreignObject width="300" height="240">
    <video autobuffer="autobuffer" xmlns="" width="300" height="240" id="dilbert">
      <source src="dilbert.mp4" type="video/mp4" />
      <source src="dilbert.ogv" type="video/ogg" />
  <rect x="0" y="240" width="24" height="24" fill="blue" stroke="none" onclick="document.getElementById('dilbert').play()"/>
  <rect x="28" y="240" width="24" height="24" fill="blue" stroke="none" onclick="document.getElementById('dilbert').pause()"/>


I'm sure there are plenty more, but I find this selection very useful and promising:

Video authoring services will need to encode web videos in MP4 (Safari, Chrome) and Theora Video OGV (Firefox, Chrome) so the video can be played using the HTML5 VIDEO element. Encoding software I used for the Dilbert video in the prototypes are:

Grouping constructs, when used in conjunction with the 'desc' and 'title' elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.

  • If IE is sorted, there will be no breaks to implement SVG as mainstream rich media advertising platform. There are workarounds, but we would like to see native support, ideally.

  • If we develop professional authoring environments, SVG will be adopted by the advertising services industry.

  • Yes, it is possible to design and create SVG rich media ads with video. You saw the working prototype. It works.

  • Yes, we still have lots of work to do by providing authoring tools and updating existing or create new ad serving platforms.

  • Yes, it will happen.

  • Let's do it!