web design

What are SVG images, and why should I be using them?

By January 29, 2014 No Comments

What is an SVG image?

An SVG is a Scalable Vector Graphic: a vector image created through text-based XML commands that is scalable to the size of the window in which it is being viewed.

OK, but why is SVG imagery so special?

Today many of the images used online are JPEGs, PNGs or GIFs. While all perfectly capable of upholding their primary purpose of being pretty to look at, quick to load and easy to use, they are bitmapped (displayed in pixels) and always remain a specific size. If you increase the size of your window (say, because your screen is bigger), the picture might grow in size, but it will lose its quality.

SVGs, on the other hand, are made up of many individual, scalable objects, which are defined by code, not pixels. This means that they can be scaled up or down without losing their quality – they are resolution independent. Considering our growing use of mobiles and tablets to go online and the rise of responsive web design, the importance of optimising your website for all devices, sizes and formats, is now more pertinent than ever. SVGs are the image equivalent of responsive web design: they change to suit you, not the other way round.

So, I should be using SVGs for my website?

In short, yes. The benefits are clear:

  • They work across all browsers (apart from IE8, at the moment, at least)
  • They are retina ready, so they will work on all retina display devices such as iPhones, iPads and any number of upcoming devices.
  • They’re easy to make and edit. Even though in the back-end it appears as multitude of code, and mapping each point in code seems like an unsurmountable task at the best of times, SVGs are in fact easy to edit and create with visual tools such as Illustrator and Inkscape
  • They are smaller than other formats, which means that your website will be both quicker to load and cheaper to host.

I’m sold, but can I use SVG for all images on my website?

It depends on your website, but no, probably not all of them. SVG is a vector-based format, so you aren’t going to be able to use it to display photos, or anything especially detailed, but beyond that, the only limitation is your imagination. Paths, shapes, fonts, colours, gradients, filters, scripting and animation are all easily created.

Their simplicity is not only great for scalability, though. SVGs are also great for UX and for taking advantage of the current trend for flat design. Gone are the days of multi-graphic, densely-shaded homepages that are full of bangs, whizzes and designer tricks. Instead, flat design gives websites clean, coherent simplicity, which makes them easier to navigate, quicker to load and better to look at (although you might want to carefully consider which designers you admit that to).

For a more tangible example of what SVGs can do, have a look at some of these SVG beauties:

Using SVG is one fantastic method of optimising your website content, and is quickly becoming an essential component of your content marketing strategy.

About Southerly

We are a creative content agency. We are storytellers.

Address

WeWork Central,
30 Stamford Street,
London,
SE1 9LQ

Phone

+44 (0)20 3397 4971

Mail

info@hellosoutherly.com

All suppliers please contact us at:
suppliers@hellosoutherly.com