What Are Scalable Vector Graphics?

What Are Scalable Vector Graphics?

December 28, 2012 • Design, Posts, Web Design

CC Photo by tr8_traitdesigns on Flickr – source

You may have heard the term scalable vector graphics if you’ve been thinking of updating your website. Chances are, if you’re not a particularly technical person, the explanation you were given of them probably made little sense. Trying to break down such a complicated concept into simple terms is difficult, but with a little bit of effort, you should be able to understand the basics of what scalable vector graphics are and how they affect web design. Let’s start by understanding one of the most difficult problems that web designers deal with: the constantly increasing resolution of web enabled devices.

Resolution and Images

Right now, one of the biggest marketing terms out there is being used by Apple. Retina displays, which is really just a marketing term for extremely high-resolution displays, are being adopted in one form or another by just about every company in the tech business. When the resolution of a display increases, web designers have to deal with issues such as pixel density, which affect how good their images look overall. In addition to this, the development of so many different types of mobile technologies has resulted in a situation where web designers are dealing with devices that have a huge range of different screen sizes among them.

Where the size of the screen is concerned, a common and very effective solution has been to make webpages with responsive designs. These responsive designs allow all the different elements of a webpage to be repositioned, so that a user with just about any screen size conceivable can still access everything on a webpage. That doesn’t help with graphics, however, which may suffer greatly in terms of their quality if they are stretched or shrunk too far.

One of the biggest advantages of scalable vector graphics is the fact that they are, just as the name implies, infinitely scalable. One can make them larger or smaller and they retain their quality. Scalability is one of the reasons that web designers are looking towards them as viable solutions for dealing with increasing resolutions in different screen sizes.

Support

As of right now, all of the modern browsers on the market support scalable vector graphics. Not all of the older browsers support this technology, but web designers can usually find ways to work around this. Because they are so versatile and because they are already being adopted so quickly, it’s not likely that support for these types of graphics is going to be dropped from modern browser design in the future. Web designers are always looking for ways to make sure that the work they do is still useful to their clients over at least a few major advances in browser technology, resolution quality and other factors. Because support for scalable vector graphics is already essentially a given, designers are generally free to start developing them in creative ways.

The Simplest Possible Breakdown

If all of this is still vexing you, what follows is about the simplest way that you can understand what scalable vector graphics are.

Normally, any image is displayed in a format that consists of a static bitmap. These bitmaps are composed of a certain amount of pixels arranged so that they form the image you see and, as a general rule, these images do not scale up or down very well. Vector graphics can be more easily understood as the instructions for drawing a picture. For example, instead of purchasing a painting, you would purchase the instructions for making that painting and scale it up or down to fit whatever wall you wanted to hang it on.

Better technology always means that there are going to be some changes in the way things are done. If you’re updating your website, your web designer may well recommend using scalable vector graphics to replace some of your more dated images.

Article by Matt Dandurand

Matt Dandurand is the CEO of MediaContour.com, offering web design in Los Angeles, CA.

Graphics painting Scalable Vector Graphics web design

About the Author: Guest Author

This post was written by the guest author credited above. If you have an awesome idea, or an article you'd like to contribute, or if you'd like to become a regular author, feel free to contact us.