SVG for the Future of High Resolution Displays

Scalable Vector Graphics(SVG) has been around for 15 years now, but the advantages of using SVG images are growing more clear as HTML5, CSS3 and JavaScript are being touted to develop the next generation of progressive web apps.

SVG is a scalable image that can be created and edited with any text editor and printed with high quality at any resolution. It can be searched, indexed, scripted, and compressed. Though it has some limitations, SVG images can be zoomed without degradation which makes it a perfect fit for responsive websites.

A very interesting study using SVG was made by Joe Harrison, a designer in the uk. His project, Responsive Logos, pushes the scalable graphic to the next generation modern web. It’s well worth taking a look at his work.

With screen resolution sizes increasing there is a greater need for crisp and more refined vector graphics that can be controlled and manipulated as different screen sizes require. The size or details of the logo can be controlled by using media queries embedded within the file itself, so as the logo scales in size the different style pops into view. And, because SVG is a vector, no matter how high of a resolution your screen gets you will always have a crisp graphic.

As far as browser support goes, SVG is supported by all modern browsers. If you need to support IE8 then a fallback will be necessary.

Interested in learning more about SVG? Here is a link to a great informational site, SVGOnTheWeb, to get you started or to help brush up your SVG skills.