For many years the web's dominate image format has been raster graphics1. Think of the raster format as a grid of dots that form an image. Types of raster images popular on the web include JPEG, GIF and PNG. These formats may still have their place on the web, but a different breed of imagery is quickly becoming an important to the web.
With all these different types of images, how do you choose the correct format for your web graphics? A few factors important for the web:
File size: Files need to be sent over HTTP and stored by the client. Smaller file sizes are important for performance.
clarity: How accurate is the final displayed image compared to the original? Lossy compression2 of images or high resolution screens can result in a less than desired outcome.
function: Web graphics have the ability to interact with the audience or animate on their own. How the graphic fits or interacts with the rest of the document is also a factor with transparency and filter capabilities.
But file size, clarity, and function aren’t the only factors to consider anymore; there’s also screen resolution. Websites are viewed on all kinds of devices with different resolutions. Both retina laptops and smart phones offer higher resolution screens that display more pixels than a standard screen. Raster images that define colors pixel-by-pixel are exposed on high resolution screens if the image's pixel density doesn't match that of the screen. This can cause blurry and unappealing imagery.
Vector graphics are in one way different than Raster graphics in that pixel density doesn't matter. Think of vector graphics as a collection of information about how to build the image rather than a grid of colors.
Listed are a few ways to accomplish resolution independence on the web:
CSS shapes: This is similar to vector graphics in that it is only instructions given to the browser on what to render. The information is written in CSS and has very limited capabilities. This can be effective to make rectagles, triangles or circles.
fonts: Think of fonts as set of vector graphics that are mapped to each character. For a long time browsers have supported custom fonts, and a technique called icon fonts arose exploiting this capability to add resolution independent shapes to the browser.
SVG (Scalable Vector Graphics): This is the current standard format for delivering vector graphics to the web.
To demonstrate why SVG is such a great solution for vector graphics, let’s revisit the important factors for web images:
File size: SVGs are typically small since the data being sent is only information about how to render the image rather than raw pixels.
Clarity: SVGs are made to have the same clarity on any device due to inherent resolution independence.
Function: SVG has a host of capabilities, from basic shapes and paths to animation and filters. Since SVG is XML and has elements for describing the content, it is also more accessible for screen readers than CSS shapes or fonts.
- SVG 1.1 Second Edition Specification
- Vector graphics
- Inline SVG vs Icon Fonts
- Resolution Independence With SVG