Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

While SVG has been around for a long time, its value in websites has been made more obvious by recent innovations in display technology. Retina displays and pinch-to-zoom touch screen devices have made all of your old PNG images and sprites look terrible.

SVG is here to save your icons from looking like an 8-bit arcade game on new devices, but they don’t work exactly like your old PNG images. Here are some techniques for getting the most from your SVG icons.

Note: For these examples I’m using some free icons from the open source Iconic library.

CSS Background Images

The following examples are abbreviated for this blog. For the full versions of the CSS and HTML, see Examples on JSFiddle.

Most modern browsers support linking to SVG images directly in your CSS like you would any other background image. When the icon is just the image it’s pretty easy.

Using only a small variation you can also line up your icon neatly next to some text.

This is great and will result in an image that not only looks good on the desktop, but also on high pixel-density devices like the iPhone 4. But unlike raster images, SVG images aren’t limited to a fixed size. You can dynamically resize your icon based upon the size of the text.

There are two important things to notice here. The first is the use of em instead of px for the padding, width and height values. The second is the use of the background-size CSS3 property. When used together you’re able to set the size of the icon relative to the font-size. 1em means use the current font-size as the width and height of the icon. 1.5em is equivalent to 150% of the font-size and is used to give a relative amount of space between the icon and the text.

If there are circumstances where you would want to use very complex small icons, it might make sense to use PNGs. But that should be a rare exception.

SVG Sprites

Making sprites out of your icons reduces the number of downloads your browser has to make. You’re probably used to using PNG sprites for icons and may be wondering if you can make sprites with SVG icons. The short answer is Yes. But it’s a whole lot more complicated than you might expect. There is a great article about this technique on Smashing Magazine called Resolution Indepdence with SVG. I prefer to use a simpler approach that provides most of the same benefits.

Base64 Encoded SVGs

If you want the primary benefit of sprites, less concurrent downloads, without the hassle of relative positioning with em’s and other problems, there is a solution that might work for you. It’s pretty easy and has support for all modern browsers that also support SVG.

You can base64-encode your SVG icons individually and just include them directly in your stylesheet.

The obvious question at this point is “Well how do I base64-encode my SVG files?” It sounds complicated, but actually it’s not. You don’t have to be a Photoshop wizard. There are some great tools out there that will automatically prepare your SVG icons for inclusion in your sytlesheet.

SVG is Rad

SVG is Rad is tool I made to help you base64-encode your SVG images for use in a stylesheet. Just drag in your SVG image and you’ll get back a base64-encoded data-uri you can use in your CSS.

You can then paste the output in your CSS file like this:

Compass

The Compass extension for Sass has an inline image helper that will take an image thats in a file and base64-encode it into your compiled stylesheet. Making the process about as easy as good old PNG background images.

gzip

Icons always add some weight to your pages and SVG icons may be a little bit larger than PNG icons, but if you gzip your stylesheets you’ll likely not see any difference between them.

If you’re having a really hard time keeping your stylesheet size down you could experiment with breaking out the icons into a separate CSS file. That way the main styles for the page can render while your icons are still downloading.

Modernizr

Assuming you need to support older browsers like IE8 and lower, or Android 2.2 and lower, you’ll want to use something like Modernizr.js to provide a PNG fallback.

Conclusion

Vector-based icons can make your website look way better on the latest crop of mobile devices. No doubt future desktops and tablets will continue to push SVG further into the mainstream. Using these techniques and fallbacks you can start using SVG graphics on your site today.

Safari Books Online has the content you need

Check out these HTML5 books available from Safari Books Online:

HTML5 Games Most Wanted: Build the Best HTML5 Games gathers the top HTML5 games developers and reveals the passion they all share for creating and coding great games. You’ll learn programming tips, tricks, and optimization techniques alongside real-world code examples that you can use in your own projects. You won’t just make games—you’ll make great games.
Targeted to the experienced Web programmer, SVG Unleashed equips the reader with the practical knowledge to create and manipulate Scalable Vector Graphics (SVG) programmatically, both on the client and the server side.
HTML5 will transform web and mobile gaming. As new browsers rapidly adopt it, HTML5 will do everything “legacy” technologies such as Flash and Silverlight have done—and much more. In Learning HTML5 Game Programming: Build Online Games with Canvas, SVG, and WebGL”, pioneering developer James L. Williams gives you all the knowledge, code, and insights you’ll need to get started fast!
HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. HTML5 Multimedia Development Cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications.
The HTML5 canvas is revolutionizing graphics and visualizations on the Web. Powered by JavaScript, the HTML5 Canvas API enables web developers to create visualizations and animations right in the browser for the first time without Flash. HTML5 Canvas Cookbook covers the fundamental methods and properties of the HTML5 canvas API. As soon as you are familiar with the API, the book provides advanced techniques for handling animations, image and video manipulations, canvas interactivity, data visualizations, game development, 3D modeling, and more.
One of HTML5’s most exciting features, Canvas provides a powerful 2D graphics API that lets you implement everything from word processors to video games. In Core HTML5 Canvas Development, best-selling author David Geary presents a code-fueled, no-nonsense deep dive into that API, covering everything you need to know to implement rich and consistent web applications that run on a wide variety of operating systems and devices.

About this author

Jamund Ferguson is a UI Product Architect at oDesk where he helps other people find the joy of working from home. He’s a passionate advocate for mobile web and an enthusiastic node.js hacker. He works from his home outside of Salt Lake City where he lives with his wife and two kids. You can find him on Twitter at @xjamundx.

Tags: base64, Compass, gzip, Icons, iPhone 4, Modernizr.js, PNG, retina displays, Sprites, SVG, SVG is Rad,

Comments are closed.