Replacing PNG with SVG

in Development

Getting started with SVG – Replacing bitmaps with vectors

Replacing PNG with SVG

In this post we’ll show you how easy it is to replace you bitmap icons with crisp resolution-independent SVG icons. SVG is an abbreviation for “scalable vector graphics”, but we won’t go into a long technical explanation of how SVGs works. If you are into that, feel free to read the Wikipedia article or the SVG specification.

A while back we introduced the ability to find and download vector icons at Iconfinder. We did this because we, like many others, believe that vector graphics is going to take over the web in the coming years. This is due to the adverse screen resolutions and pixel densities introduced by post-PC devices like the iPhone and iPad, just to mention a few.

Browser support for vector formats like SVG is getting pretty good and cool technologies like CSS3 and SVG effects are quickly gaining traction.But even though resolution-independent vector graphics are fast, flexible and very suitable for modern UIs, most designers still resort to good old PNGs and JPGs.

Why we need scalable vector graphics

You spent hours, days or weeks on creating beautiful responsive designs and you want them to look crisp and clean on all types of displays. But, ever since Apple introduced mainstream high DPI Retina displays with relative pixel sizes, and others followed suit, getting bitmaps to look crisp has been a bit of a challenge. Vector graphics solves this problem by describing the shapes mathematically rather than as single dots.

Scable vectors

How to replace you PNGs with SVGs

Replacing your old PNGs with SVGs is pretty simple and can be done in several ways. The three most popular are:

1. Linking to an external image file

Simply just replace your image source file with a new one in SVG-format.

Replace

with

Note: If you have a lot of IE8 users, you will need to provide a fallback. There are different techniques for creating a fallback, but this small JavaScript library called SVGeezy makes it really easy.

2. Using SVG in-line

Since SVG is actually just XML, you can copy and paste your SVG source code directly into your HTML markup. This saves you some precious HTTP requests and makes your page load faster, providing a better user experience.

The downside is that you have you graphics mixed with your markup. This makes it a bit harder to update your graphics, plus, it make your code more bloated.

Replace

with

3. Embedding using Base64

This technique is a bit more advanced since it involves converting your SVG XML to base 64 encoded text. But if you want to use SVG in CSS backgrounds, this is good option since it’s a bit faster and saves you a HTTP request.

gets encoded to

which can be used in CSS as a background image.

We won’t go further into this here, but will cover it in a later post. If you are really curious about embedding using base 64 encoding, check out Kyle Fosters video on Youtube.

Our example

So by now you probably get the point of why replacing your PNGs with vector graphics is a good solution for you resolution challenges. So we wanted to provide you with a nice example to show what we mean.

 Example

Feel free to download the source code for inspiration.

Sidenote: Why 2x bitmpas is not the solution

For a while Apple tried to tell the design community, that all you needed to do, was to provide all your bitmaps in two versions. A 1x version for all normal displays and a double-sized 2x version for the Retina displays that was exactly double the resolution.

But the result of all this 2x was mostly a lot of hassle for designers, complicated code, bloated files sizes. But the biggest problem by a mile, was that this “solution” really only was suited for dealing with Apple-devices that had perfect 1:2 resolution proportions between devices.

Write a Comment

Comment

  1. We used all svg graphics on a site I designed last year. After launch we had to go back and replace all the svg icons with bitmaps because svg was causing terrible performance issues and really impacting our page speed. This was not a huge number of graphics — just the standard icons you see on most sites. Perhaps on smaller sites that don’t have low-end users svg is a current solution but for large sites with a broad user base there are problems yet to be resolved.

    • Interesting. I would love to see some data from your experiments with SVG performance and compatibility. SVG on big sites has definitely yet to be proven as best practice. E-mail me at jess@iconfinder.com if you would like to share some learnings that could benefit others. I’ll make shure to send you some Iconfinder swag in return.

  2. Option 2, embedding the SVG within the HTML, shouldn’t be used if the SVG will be repeated. used over and over that will just add to the bloat of the document.

  3. If you use PHP, you can inline an SVG using include( 'my-image.svg' );. If you use Compass, you can inline an SVG as a base64′d sprite using inline-image( 'my-image.svg' );

  4. Nice article, it made me want to switch to SVG immediately. :)

    I started to talk about it at my company and there’s a hurdle I hit I’d like you to know about. The problem is, our front-end coders have licences for Photoshop so they can cut the raster images – but not Illustrator. They don’t have much use for it.
    So they have no way of getting the SVG out of PSD’s they get from designers, except for a pretty pricey plugin. So it’s also only matter of work, but a real cost overhead. It would be required for the designers to cut the vector graphics out, which doesn’t seem like a really good workflow practice.

    So it won’t be really a practical thing until there are affordable import and export options integrated for the Photoshop itself.

    • David, you have a very valid point. Photoshop is simply not made for a modern web design workflow. SVG Kit can indeed help you out, but is way to expensive.

      A lot of designers have started using Sketch by Bohemian Coding, since it’s much more modern and made for interface design.

      Unfortunately there is no simple solution to Photoshops lacking ability to handle vectors, other than trying to work around it.