The Rise of SVG

by Matthew Bystedt on November 10, 2012, 10:12 am

Work on SVG started in 1999 and the current version (1.1) of the vector graphics format was released in 2003. While it found great utility in specialized uses, its adoption as a fundamental web technology has been about as successful as lead balloons as party gifts. This is about to change for the following reasons.

Browsers Support for SVG Increasing

Getting browsers to support SVG was a chicken and egg problem. Browser makers weren't going to spend the capital to build SVG support if SVG wasn't used. Since browsers didn't natively support it, SVG wasn't used. I have to think that the only web technology that took off without it being widely natively supported in browsers was Flash.

Still, browsers are now supporting SVG even though it isn't widely used. Why the change in heart? One reason is probably that browsers finally mastered rendering webpages reasonably according to the standards. Website designers had been angrily demanding this as it was the only way forward as web applications became more and more complex. That left the browsers with two major ways to differentiate: be faster or support more standards. SVG is becoming the low hanging fruit in the race to claim that your browser supports the most of more standards.

High Resolution Screens

One really attractive part of SVG (and all vector graphic formats), is that is scales abstract graphics extremely well. It is possible to create high resolution raster images but there is a size problem. It makes images rather stout. A high resolution jpeg needs to be around 4 times the size to support a screen like Apple's Retina Displays. Also, there now must be two versions of many image files. One to give to low resolution users and another to give to high resolution users.

A vector file which already was probably smaller than the low (normal?) resolution version begins to look really attractive. It's a win-win scenario to switch to SVG for certain things like logos. The web designer now has one smaller file that displays nice on both high and low resolution screens.

Pinch to Zoom

Touch is also playing a role. Even if your screen isn't that high resolution, it's now more common to zoom in on parts of the page. This also applies to non-touch devices as the metaphor spreads to more traditional interfaces. This can be seen in Apple's Safari where you can double tap using a magic mouse to zoom in.

Pinch to zoom means that web designers will need to create raster graphics of absurd sizes in some cases to accommodate this activity. Users are quickly going to find it unacceptable to not be able to zoom in on a graph plot and see more detail.

Conclusion

SVG is going to be a major part of the next generation of websites. You can find out more about it by reading my SVG Tutorial. What do you think? Add your thoughts in the comments section.