attachment-527d2c0ee4b0ce906bc9f215

A pixel-based raster image. (Click to enlarge)

An image converted into a vector format. (Click to enlarge)

Within the shift from using Flash to HTML5 for rich media, advertisers are gaining access to a lot of great capabilities. One of them is the ability to use SVG formatted graphics for razor-sharp, resolution-independent images that look great on all screens (even Retina devices).

SVG stands for Scalable Vector Graphics. It's a graphic format with some big advantages. Curious about when and why to use SVG? Read on.

So, what is a vector graphic?

Broadly speaking, there are two types of graphics.

One the one hand are graphics drawn with pixels such as JPGs, PNGs and GIFs. Pixel-based graphics are also known in the industry as “raster graphics.” The majority of images you encounter are this format.

As second type are graphics drawn with math, also known as “vector graphics.” Common file types are EPS and SVG. Vector graphics are typically created in a design program like Illustrator or Flash and can be easily converted to pixels as needed (like I did with the cat image above on the right).

Why draw graphics with math instead of plotting pixels?

While the purpose of this post is to tout the benefits of using SVG, I want to say that pixels are pretty great. When you take a photo, every vibrant detail is captured dot by dot for your viewing pleasure. But if those photos are high-resolution, there can be a lot of dots. As you increase resolution, file sizes increase exponentially, because you’re adding more rows of pixels in both a width and height direction.

You can also never make a raster graphic larger without losing quality. That’s because there is simply no more information available. Images start to look fuzzy when resized.

Vector graphics, on the other hand, are drawn out of shapes and paths. They are great for less complex graphics with fewer colors, like logos, text, and art that involves shapes and silhouettes. On close inspection, note that a lot of the details in the cat photo were eliminated in the vector format because it was too complex.

Vector graphics are composed of color-filled shapes and lines. They can be viewed and even saved at any size because they’re resolution independent.

Raster graphics are comprised of pixels.

Vector graphics are composed of color-filled shapes and lines.

Why use SVG?

SVG is a way of having great-looking, resolution-independent graphics, especially on mobile devices with high screen resolutions. Apple Retina displays, for instance, contain twice as many pixels in length and height as earlier-generation devices of the same physical proportions.

The rise of these high-density displays has caused a lot of images to look pretty bad. It’s not dissimilar to watching standard television on a high-definition TV. To get around this, many sites or ads have implemented a brute force method of using images at twice the standard resolution to accommodate retina displays, and then displaying these graphics at half-size for non-Retina users.

SVG graphics offer a simple, cleaner alternative, as an embeddable vector format that just looks good no matter what. Below is an example SVG of the Flite cloud logo.

Is SVG supported everywhere?

SVG is an HTML5-enabled technology, meaning that modern desktop browsers support SVG: Chrome, Firefox, Internet Explorer 9, Safari, and Opera. Smartphones and tablets universally support HTML5 and SVG.

Older desktop browsers such as IE8 and earlier need a plug-in like Adobe SVG Viewer to view SVG which is available for free. If you cannot see the SVG graphics on this page and have the ability to update your computer, I strongly suggest you install a modern browser such as Google Chrome so you can participate in all the great stuff happening on the web right now.

Using SVG in Advertising

It’s been my experience that the graphics in many ads, especially on mobile, look fuzzy. This is a poor user experience that discourages ad interaction.

Here's a screenshot of a Pandora ad from my phone taken this morning. Click the image to enlarge it. Note how text like the "Tap to Register" baked into lossy pixel-based image formats starts to look pretty bad on a nice display.

Compare that to the super-crisp shapes for the controls at the bottom and you can see why resolution independence matters.

Text in HTML5 functions like SVG in that it too is resolution independent. So by using HTML5 text for text (instead of text baked into images) and SVG for simple graphics and navigation, you can ensure your ad’s message is always crystal clear. That means building ads in HTML5.

Below is a SVG twitter button from an example ad I built this week (bonus points if you've seen it in a video on flite.com). No matter what screen resolution you have, no matter how many times to magnify your view by pressing CTRL or ⌘ and the plus key, the graphic below should always look fantastically crisp.

TWITTER

I would encourage advertising designers to consider SVG for any of these kinds of graphics:

  • Logos
  • CTAs
  • Stylized text and text-based graphics
  • Custom buttons and navigation

SVG also supports animations and visual effects to a certain extent, which will allow it to replace animations that Flash has been used for in many ways. These techniques are more advanced than I’m going to go into it here, but a skilled user could really take SVG to the next level.