Adding Vectors and SVG Images into Website Layouts

Modern design trends have pushed the Internet industry further into new territory. Just 10 years ago it would have been inconceivable to display vector images right in a web browser. Now the idea has been slowly adapted and rolled out into many browser specifications.

Illustrator is the most popular vector program but other solutions do exist. The ability to use naturally scalable vectors would mean that you don’t need to create @2x files for retina displays. You could also handle responsive layouts easily by resizing the image as needed. In this post I’d like to share ideas on vector images in web design and how this trend may evolve over the coming years.

Primary Vector Benefits

Most designers are comfortable with bitmap pixel-based graphics because these have all-encompassing support. But responsive layouts and retina screens have changed the web design process. Nowadays it might be simpler to create a single vector graphic and use this scalable image directly in a website.

Logos and company branding would especially benefit from this type of image format. Vectors and bitmaps can appear similar on a screen, but the expansive properties of vectors give them the advantage. So why don’t we use them all the time? Simply put, there’s not as much support and vectors usually export to larger file sizes than JPGs or PNGs.

Another truly outstanding function of vector design is the ability to animate SVG icons. In the past you would need to use Flash or some type of animated GIF – both of which have their downfalls. Vector icons will export 100% clear with very little compression and you don’t need a plugin like Adobe Flash Player to see the animation effects.

Browser Support

The best vector file type to use would be SVG. This stands for Scalable Vector Graphic and retains mathematical information instead of pixel values. This way the image can scale naturally and the shape/colors will retain integrity. However the biggest problem you’ll face is browser support, which is still greater for the old raster file types.

Take a look at this SVG chart which maps out current browser support. As of 2014 all modern browsers on desktop and mobile support SVG graphics. You’ll notice even modern IE10/IE11 fully supports SVG graphics embedded into a webpage. This is great because IE has always been a troublesome pest for web designers… and although modern Internet Explorer support is great, SVG images still won’t work in the older versions.

To get a wider array of browser support you would need to look into alternative solutions. The HTML5 canvas element can work but it’s also reliant on HTML5-supported browsers. The best method for handling older non-supported browsers would be providing a fallback method. Using JavaScript we can check the current browser and see if SVG is supported – if not then an alternative image will be displayed.

I’d highly recommend skimming through this post on SVG fallbacks which details a handy solution. There are very few JS libraries out there for detecting fallbacks, but it is definitely a great solution. SVG Magic is a jQuery plugin which replaces unsupported SVG images with dynamically-generated PNGs.

Icon Fonts

Another vector format aside from SVG images would be icon fonts. Typical font files can be scaled to any size in any browser using the CSS font-size property. Icon fonts are no different, they just use symbols instead of letters and numbers.

The good news is that you can easily scale these within any CSS3 browser supporting font-face rules. But unfortunately most icon fonts are colored just like text so you’ll have to stick with a single color scheme. This may not be a problem depending on how you need to use the icons. Keep this in mind when deciding between an SVG image vs an embedded icon font.

I tend to include icon fonts for simpler UI design features. Think of navigation elements or detailed lists where icons help accentuate the content. Colorful SVG icons tend to be more useful in a webpage that benefits from a little artistic taste.

Free Vector Packs

If you dig around the web you’ll find plenty of free open source icon font faces. Fontello and Font Awesome are 2 well-known choices which have been around a few years. Twitter Bootstrap even includes a series of Glyphicons which can be used in your layout. All of these font files may be separately linked or hosted externally from another web server.

One of the newest icon sets Captain Icon has turned into my personal favorite. These are hand-drawn icons which include SVGs, PNGs, and font files. The whole pack is free on Github and offers a more customized feeling than the more traditional icons.

If you have some free time, play around with these different icon packs and see if there’s any you could include within future projects. Also be sure to query in Google for other free icon fonts. Designers often release their work online and you never know when the next iconset will pop up.

Closing

It’s fun to keep up with design trends and follow through with new ideas – but you also have to understand that the web constantly changing. Not every concept will grow quickly and not everyone can get behind every new idea at once. It takes time for great ideas to bloom and foster a relationship with designers. I’m in support of SVG images on the web and I hope the following years will offer even better solutions for web designers.

Author: Jake Rocheleau

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau