I’ve recently be learning about improving my sites for retina and other high resolution screens. I have to admit at first I overlooked this until I purchased a new phone, and realized how poor a couple of my sites looked. From there I’ve been learning to use svg and icon fonts. I think in the end it incorporates well into my workflow, so there is so much to gain with crisp, scalable images and little to nothing lost. So, how can you get started with svg and icon fonts?

The first thing you should know, and probably already do, is older IE users will not get very good svg support, so there will have to be fallbacks. But hey, you probably already have jpg or png images anyway, right? So with that the first highly recommended read is Chris Coyer’s “Using SVG” article. He covers a lot of ways to use svg: background-image, img tag, inline, etc. He also gives a quick rundown of using Illustrator.

If you don’t have Illustrator you should try Inkscape. It is a great tool and I found the export options are great. A List Apart featured a great article on using Inkscape to convert raster to svg back in 2010.

You will notice though in the CSS-Tricks article they make extensive use of Modernizr, and well, you don’t always have that available. Good news is detecting svg support is extremely simple, and Todd Motto does a nice job showing examples of detection and fallback support with and without Modernizr:

function supportsSVG() {
    return !! document.createElementNS 
        && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}

I will also throw in the mix another handy trick not mentioned in the previous articles you will find useful. Since older browsers who don’t support svg also don’t support multiple background images, the fallback becomes inherited by lack of features. Pau Giner shows you how with what he calls the Invisible Gradient Technique:

background: transparent url(fallback-image.png) center center no-repeat;

background-image: -webkit-linear-gradient(transparent, transparent), url(vector-image.svg);

background-image: linear-gradient(transparent, transparent), url(vector-image.svg);

Finally, my new favorite is icon fonts. If you haven’t tried it you should. The benefits are 10 fold. First they’re scalable. Second, they’re like fonts, so color, size, etc. are just a matter of changing a css style. Best of all they have great browser support! There are some services like Fontello that allows you to build your own font from existing icon fonts. This also helps by reducing the font size to just what you need.

Warning: Once you try icon fonts you will never think about using standard png icons again, ever!

What other svg techniques and tools can you recommend for ever learning minds?