Benefits of adding SVG icons to your website over PNG

So what is an SVG!? SVG stands for Scalable Vector Graphics and is a XML based vector image format specifically used to define vector-based graphics for the Web.

Here we will discuss the benefits in the use of SVG formats over the use of an optimised PNG file. There are of course advantages with both file formats, however over the years, we have found the results of using SVG to be time-saving and the final image renders are a lot crisper. SVG files can’t be used in every scenario but are perfect when it comes to using icons or logos on your website.

Faster Loading Times

File size may seem not seem like a small issue when dealing with small icons or logo’s, but if you are using PNG files for icons you will be using a file larger in size which will impact your final page loading speeds. As an SVG file is just code, these files are a lot smaller and can be rendered quickly. Faster load times are obviously better particularly when trying to optimize your websites SEO.

Better Rendering Quality

It goes without saying that vector based graphics provide a much better quality over pixel graphics when it comes to vector based illustrations. They offer far more crisp detail which is a must if you want to achieve pixel-perfect icons or high-quality logos for your websites.

Scalable without using image editing software

An SVG (Scalable Vector Graphics) as the name tells you is a scalable graphic that you can size to any dimension without losing any quality. If you are calling in an SVG file into your website you can define the size of the graphic in the code and not have to use an image editing application to size your artwork (and run the risk of pixelating it). See the results below…

SVG’s can be indexed by Google

So this is a cool little feature. Google will actually crawl the code in an SVG files. Although this doesn’t sound that exciting at first there is an option to add some additional meta information and a title which is going to help your icons appear within Google image searches, which in turn creates more ways for visitors to find your website.

Developers can edit using the code

In most cases a web developer will not have access to an image editing application such as Photoshop (for editing PNG’s) or a vector based editing application such as Adobe Illustrator (for editing SVG’s) The beauty of working with working SVG format for your icons is that you can not only resize the SVG in the code, you can also edit the appearance of the icon within the code by altering hex values for colors and even define stroke widths

Graphics can be animated

We have seen some great examples of animated icons and infographics. There are a lot of websites and applications cropping up that make animating SVG artwork simple and effective. As these graphics are vector they retain high quality for each frame, unlike a gif file format.

Can cause issues with older browsers

As previously mentioned, there are advantages over both SVG and PNG file formats. One down side to SVG files is that there are issues when using older browsers, I believe this goes back to IE9 and previous. Although there are fixes if you really want to develop your site with these older browsers in mind.

There are some older SVG’s that have not been optimized

In the past, it was a minefield finding quality icons that were optimized for SVG, we are now seeing some great sites out there that offer high-quality Icons. We, of course, run one of those sites and have been creating icons to the highest possible standards, these icons are pixel perfect and drawn to a 60px grid. The smashicons.com website has thousands of icons that can easily be searched, downloaded and used on your website.

How to use SVG files on your website

The SVG files are just as easy to use within your code as a PNG. We have always used  <img src=”images/file.svg” />, that being said there are other methods out there, you can even call the SVG code directly into your page. Here are some examples of how you can call an SVG file into your website.

<img> tag

Okay so we have already mentioned this, but this is the easiest way to call in an SVG, so it’s no different from calling in a PNG

background image

This one is a bit more involved, we have used this in the past for rendering icons on websites as it makes it more difficult for someone to come along and pinch them.

<object> tag

This is the best method if you are going to be taking advantage of SVG features like scripting or CSS

<iframe>

We personally have not used this method, so we don’t know all of the advantages of using this method. One pro is that it does not require any HTTP request as most browsers can read the SVG code and render it.

Looking for high-quality pixel perfect icons to use on your next project

If you want to find some fully optimized SVG icons to use on your next project, take a look at the massive library we have built at smashicons.com. We have thousands of icons in different styles, that can easily be used with your web or app projects.