A Simple Guide on How SVGs Work

SVG, or Scalable Vector Graphic, is an image file format that is growing in popularity. They are actually a simple text file that holds coordinates which map out shapes and, therefore, make an image.

The text file is read by the browser which then renders and creates the graphic for you. The S in the acronym implies that the image is resizable – scalable – meaning that the proportions of the image will stay the same making the shapes perfectly clear no matter how zoomed in or out it is. This means that the image is always crisp and preserved.

A Little Back Story on SVGs

People wanted scalable graphics for a long time as typical raster images were a big hassle.

Microsoft created a project called PGML; Macromedia teamed up with Microsoft to make VML. Both projects were similar to SVGs.

However, W3C didn’t recognize these projects and made one of its own. In late 2011, W3C introduced SVG 1.1 as a new recommended standard for browsers in handling vector images. They are actually currently working on SVG 2 in hopes of improving integrations and support across various technologies.

The Support Is Stellar

SVGs have been around for a while and the good news is that browsers have welcomed the new image format. IE8 is the only browser that doesn’t support SVG. All current browsers support the SVG format perfectly. If you are curious about all of this check out the support metric provided by W3C or caniuseit.com

Why Does SVG Matter?

SVGs are an amazing improvement for online images. Their biggest asset is the fact they are vectors, meaning they hold their shape no matter how you resize the image. The other image type is raster or bitmap, like PNG or JPG, which become pixelated when you zoom in and, in turn, lose the image’s quality. More on that a little later. Because SVGs are scalable it makes them a very flexible image type which comes in especially handy because our websites or apps need to be responsive in order to accommodate the various screen sizes currently in use.

SVGs are easy to manipulate so it’s a great choice for a logo that can be small on a small screen like a phone, or big on a laptop screen without losing image quality and without using multiple images per specific screen. SVGs make our lives as designers and developers easier. They are a godsend because they are a true definition of one size fits all thanks to the file’s flexibility. Because SVGs are made up of XML they are also easily manipulated through CSS and JavaScript. You can easily recolor a logo without having to use a separate image.

On top of all of that, SVGs are smaller in file size meaning they download faster than most bitmaps of the same image decreasing a website’s load time. They also don’t require an HTTP request making loading also quicker. The request is part of the image’s source code.

Understanding the Structure of SVG Files

To get a better understanding of how SVGs works lets play with one. I’m going to use a free icon of a paper airplane made by Vincent Le Moign. Download the icon from Iconfinder and unzip it. Open it in either Illustrator or Sketch and see that it is, in fact, a simple vector image. Next open the file in a text editor.

	<?xml version="1.0" ?>< !DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
	<svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g id="Artboard"></g>
	<g id="Multicolor">
	<circle cx="55" cy="55" r="55" style="fill:#25B7D3;"></circle>
	</g><g>
	<polygon points="49.67,76.33 43,83 43,73   " style="fill:#CFD3D4;"></polygon>
	<polygon points="87,27 65,84 43,73 43,83 35,67 23,59   " style="fill:#FFFFFF;"></polygon>
	<polygon points="35,67 43,83 43,73 87,27   " style="fill:#E2E4E5;"></polygon>
	</g>  
	</svg>
	

If you indent all the different parts of the code snippet you will be able to make better sense of it. If the shape is simple, the tag will represent that shape in name. In the above code the blue circle is tagged. The same is true for a rectangles, for instance. The less recognizable shapes are defined as polygons and in this example they are even grouped together.

If you go back to the image in Illustrator or Sketch you can see that the way the different image shapes are grouped is the same way the tags are in the XML file. Understanding what is going on in a SVG file is not very complicated.

Cleaning Up the XML

In the above code you can see that some styling is identified inline, mainly the shapes’ fill colours. It’s fine and dandy until you try to recolour the image and won’t be able to because inline trumps all. What you can do instead is add classes the different shapes. You can target some of the tags directly, like but often time there is more than one, like the polygons, and it’s simply not a recommended practice.

Let’s clean up the code a little, first by removing the inline styling.

	...
	<g id="Artboard"></g>
	<g id="Multicolor">
	<circle cx="55" cy="55" r="55"></circle>
	</g><g>
	<polygon points="49.67,76.33 43,83 43,73"></polygon>
	<polygon points="87,27 65,84 43,73 43,83 35,67 23,59"></polygon>
	<polygon points="35,67 43,83 43,73 87,27"></polygon>
	</g>
	
	

Now, let’s add in the classes; I’ve made mine as descriptive as possible.

	...
	<g id="Artboard"></g>
	<g id="Multicolor">
	<circle cx="55" cy="55" r="55" class="bg-circle"></circle>
	</g><g>
	<polygon points="49.67,76.33 43,83 43,73" class="inside-shadow"></polygon>
	<polygon points="87,27 65,84 43,73 43,83 35,67 23,59" class="overall-shape"></polygon>
	<polygon points="35,67 43,83 43,73 87,27" class="outside-tail"></polygon>
	</g>		
	
	

I’d strongly suggest using an external style sheet to target the SVG file because placing one in the XML will be tricky as XML doesn’t have easy syntax. So within your regular CSS file let’s add the following:

	circle.bg-circle{
	fill:#25B7D3;
	}

	polygon.inside-shadow{
	fill:#CFD3D4;
	}

	polygon.overall-shape{
	fill:#FFFFFF;
	}

	polygon.outside-tail{
	fill:#E2E4E5;
	}		
	
	

The reason this is important to understand is because SVGs can become complex very quickly. Their biggest asset is their flexibility so it only makes sense to take advantage of it by understanding how to manipulate SVG files. To give you an idea, you can have text in a SVG file and you can manipulate it’s font family and font size. You can truly make SVG images into something pretty cool but only if you understand how they work.

Conclusion

SVGs are great and will become the go to standard for online images pretty darn soon. I hope in this post you got an overview of how these things work and how easy it is to use SVG images within your website. I mean, those things are super flexible and give us a lot of freedom when it comes to designing and building great websites.