Introduction

In the past, I’ve worked on projects as a graphics design artist and front-end developer. Part of the job included designing graphics for the website such as icons, banners, and logos. At the time, I used simple raster image formats such as JPEG and PNG and to be fair these worked perfectly well. Recently however, I’ve discovered SVG’s; an establish -yet strangely underutilized format that seems to be a perfect tool for the web development community.

What are SVGs?

In the words of Wikipedia, Scalable Vector Graphics (or SVGs) are an XML-based vector image format for 2-dimensional graphics. Although SVGs have been around for a while, they haven’t really taken off until recently. However, if you’re a web developer or graphics design artist working with online graphics, you may find SVGs to be a valuable additional to your skills.

To help give you an understanding of what SVG’s are all about, let’s look at some of the critical benefits:

Resolution independence

Unlike raster-based graphics, which can become pixilated and lose quality when stretched or scaled, SVG’s use vector technology. In short, vector’s use mathematical formulas to define the shapes, rather than a bitmap, this allows the SVG to scale or stretch while maintaining crisp edges.

Try zooming in on the two SparcPoint Logo’s to see the difference:

Accessibility

When it comes to typical image formats like PNG or JPEG, what you see is what you get. If you need to alter the image, even something as simple as changing the color, you need to use image editing software like Photoshop. In contrast, SVG’s are XML-based, and so the file can be edited directly to change everything from colors, text, shapes, and more.

Extensibility

You can do much more than just look at an SVG. Since SVGs are XML-based, they can be controlled or styled using Cascading Style Sheets (CSS) or JavaScript to create animated, interactive graphics.