The Top 3 Reasons To Use SVGs


SVG-header-image
 

For years designers and programmers alike have been taught that there are only three forms of images that work on the web: JPGs, PNGs and GIFs. Now, over the past few years, many companies are beginning to use a new form of image called an SVG or Scalable Vector Graphic. This is essentially a form of vector file similar to an .eps that can incorporate animations and even simple gradients. There are quite possibly too many benefits to list for this form of image but I will just mention a few.

Reason #1

The first, and most widely used application for SVGs currently is for client logos.  If you consider yourself to be a designer, I am sure that many times you have scraped the internet looking for a higher res jpeg or png of a companies logo because their little logo image on their company website won’t be useful to you so small. Well now imagine a world where every company and organization website use SVG files for their homepage logo. Not only will every company have a crystal clear logo that looks great on all high resolution or (retina) screens, but it would also allow designers to have access to an unlimited supply of client logos that are print quality. Something that almost seems too good to be true, but luckily this is the future that has already begun to take “shape” sorry for the bad pun.

Reason #2

Secondly, I touched on it previously, but the fact that high dpi digital screens are quickly becoming the standard means all just about all website that are three or more years old use almost exclusively 72dpi images for all images. This is a rather large problem in every sense of the word because having rather low res images all across the web renders all older website pixelated on virtually every modern day mobile device and modern computers. Luckily, the solution comes in the form of SVGs. Due to SVGs being by definition scalable vector images, it means that all SVG files are automatically future proofing your client’s website to the possibility of higher dpi screens without ever having to “swap out” the artwork again. This goes for all icons, logos and vector illustrations across your web designs.

Reason #3

Lastly and quickly, my third reason for any and everyone to begin the change over to SVGs if you haven’t already is for the flexibility in animations. I have recently began to use fairly complex SVG files to design mall maps in iOS and Android apps, as well as retail websites and it allows me to have much more control over the interactivity that the previous animated gifs just couldn’t. Here is one example of what I am talking about. This sudo 3D mall directory is actually just one large SVG that has roll over effects and can be scaled by the user to any size. I believe this is the future of images in web/ digital design and I hope you agree!

Click to view a Static SVG      Click to view a Interactive SVG

Leave a Comment