Introduction to Scalable Vector Graphics

June 1, 2016

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:

 

Vector image

 

Raster

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.

Back to blog

Related Posts

Check out our thoughts here.

What is important to a career

Lately I’ve been spending a lot of time thinking about my career and where it’s going. I don’t want to give the impression that I have never thought about my career before, but now the thoughts are becoming constant.

May 8, 2018
Databases: Component or Infrastructure?

There is always strong debate around databases and their role in development. Sometimes they are considered components, while others will consider them infrastructure. Is there a right answer? Let's discuss!

March 15, 2018
Software Maintenance: The Never-Ending Feud

There is one, and only one, primary focus that any software developer acknowledge: the ability for software to be maintainable. Of course, correctness, functionality, and performance are all important, these will always be easier to address with maintainable software.

January 25, 2018