17 May 13
SVG Images for Web Design
Images have always been an integral part of web design, “a picture tells a thousand words” is a phrase often thrown around and rings very true even in the online world. Without a doubt images are becoming increasingly important with faster connection speeds and the popularity of large screen mobile and tablet devices. Web designers and developers are often faced with the dilemma of image formats, which can sometimes be an area of difference and debate. There are four main types of image formats often used in websites, with SVG being the definite underdog in terms of usage (source: w3techs image file formats for websites). This will be a brief introduction about these image formats whilst focusing on the lesser used SVG format.
Scalable Vector Graphics (SVG)
Other Well Known Image Formats
There have been numerous articles and forum discussions regarding the more popular image formats. JPG vs PNG has been quite the argument amongst web designers in the last decade or so.
Otherwise known as Jpeg, named after the organisation which founded the format – Joint Photographic Experts Group. Originally popularised due to the compression of bitmap images and therefore the most commonly used image format on the web. JPGs are best used when images contain a variety of colours.
For most people this acronym stands for a country, but for web designers this is the format currently most widely used for image transparency. This file format replaced GIF images on the web in recent times and is often being used for icons and other simplistic graphics.
The graphical interchange or GIF format is still found on many websites despite having fallen in popularity. GIFs are still used for image transparency and share very similar functions as PNGs. GIF animations can still be found in many websites as it is still one of the only ways to ensure animations display with no browser compatibility issues.
SVG Creation & Conversion
Adobe Illustrator is absolutely essential when working with vector graphics. Web designers can argue all they want about Adobe Photoshop vs Fireworks for web design, but for vector graphics there is simply no contest against Adobe Illustrator. I won’t be going into HTML code for SVG today as that is a whole other article in itself. Hopefully you are somewhat familiar with vector graphics already. Most professional logos and icons should be created using vectors already. If not, you could try and recreate them yourself in Adobe Illustrator. Another alternative is using Illustrator’s live-trace feature on an existing image. Once you have your image or logo, use “File > Save as”, then select “SVG” from the “Save as type” dropdown menu. Yes it is that simple! Give your file an appropriate name and click “Save”. The SVG options dialogue should then appear. To show the code in a browser, click “Show SVG code” and boom you simply copy the code including the <svg> tags into your html document and that’s it. Older versions of Adobe Illustrator may not support SVG and may require downloading the SVG kit for Adobe plugin.
I believe SVG will see more use over the next few years due to retina displays and pixel density becoming the norm very soon. And the demand for crisp, crystal clear images on different displays and devices will be higher than ever before. It would be unwise to ignore vector graphics as a designer today, give SVG a shot!