Icon gonts, SVG and modern web graphics
The image formats we’ve grown accustomed to on the web are inflexible. JPG, PNG etc aren’t human-readable, aren't editable without re-saving and they’re un-scalable without loss of quality.
They’re so ubiquitous you wouldn’t think of these as limitations but if you consider modern graphic use on the web, these file formats feel increasingly restrictive and backward.
Vector-based graphics use mathematical expressions to represent position. Since an expression scales indefinitely so does a vector image, without loss of quality. Scalable Vector Graphics (SVG) - a popular vector format compatible with the web - uses XML as a file format and being a human-readable language SVGs aren't the locked black box that predecessor formats are.
The need for scaling graphics is relatively new. With the release of high pixel-density display devices e.g “Retina” screens, images using raster formats can be seen to get lower resolution overnight. Try using the "zoom" function to view an old iPhone app on an iPad. Yuk!
Web designers understand this and typically solve it by creating images twice: once at double-resolution for Retina devices, another at standard resolution for everything else. Developers also have to code with two versions of each image in mind. It's not ideal.
Many website images are simple vector shapes - consider an RSS icon or a Twitter bird - and aren't much more complex than the letters of the alphabet. Fonts are vectors too so "icon fonts" were born: a font storing simple vector images instead of letters. You remember “Wingdings”, right? - same thing, except icon fonts can be created from scratch, with every “letter” of the font lovingly crafted by a designer and collated into a bespoke font for your own brand/site.
Icon fonts, therefore, solve the Retina issue: a font loses no detail at any pixel density.
They also improve image production workflow too since anything we can do with real fonts on the web can be done with icon fonts too. Consider a designer creating the same image in red, blue and yellow to suit the colour themes of a site. These colour variations can now be created by a developer in a fraction of the time - literally by typing 6 characters - using the same elementary technology we’d use to make a heading font red, or a link blue - remember: they’re just fonts!
However just as you can’t shade a letter “T” with two colours simultaneously, neither can you colour an icon font. So while they have more flexible than raster images, icon fonts are still limited to monochrome.
SVG advances vector use one step further by supporting multiple colours, plus with XML as a file format the shapes and colours are all dynamically changeable with javascript and CSS. As developers are capable of making significant graphic adjustments using familiar development languages without a designer’s input, this is hugely significant.
Yet despite SVG having existed since 2001 and first supported by Konqueror (anyone remember that?) since 2004, it’s been Microsoft’s reluctance to adopt the standard till IE9’s release in 2011 that has held SVG use back.
Fortunately, use of unsupportive browsers is dropping rapidly. Torchbox are dropping support for IE7 wherever possible and now Microsoft have adopted a more forceful upgrade policy IE8 won’t be long behind. This means IE9 will be the lowest supported browser and with IE9 supporting SVG, this changes the world of web graphics considerably.
As SVG can be manipulated and animated live, we will likely see the web change quite a bit. Adverts, charts, indeed practically any graphic that isn’t a photograph could become far more interactive with far less effort. Exciting times are ahead!
