An introduction to SVG

It all started when I sent an email to everyone in the studio with some cool examples of SVG use in web design, after which, Alex decided I was to become the 'office SVG guru' and learn all there is to know about them. Just over a month later, I thought I'd share what I've found out so far...

So, what are Scaleable Vector Graphics?

SVG, or Scaleable Vector Graphics is an XML based image format for, yep, you've guessed it… vector graphics. Supported in all browsers, except IE8 & below and Android 2.3/Gingerbread & below - for which you would want to use a PNG fallback for those users who really need to update their browser - it makes it a fantastic choice for responsive, resolution independent design. They can be used both "inline" as part of your code and simply as an <img> tag.

For me personally, one of the main advantages of using SVG is the small file sizes that come with them. Anything that helps reduce page load times these days seems to be something of a rarity, but SVG really knocks that out of the park. Not only that, but because SVG uses a DOM node-based API, there should be no unnecessary HTTP requests, unlike using an <img> tag, again speeding up your page load time and making your website more user friendly - unless of course, you did use it as an <img> tag, but we much prefer the inline method. Aside from that, because they are scaleable without a loss of quality, SVGs look great on the new retina monitors, meaning you don't have to create separate, high resolution images just for those people using them, again cutting down on the number of http requests and fall backs you have to put in to place.

Obviously, they aren't the be all and end all of graphics on the web - or they would be in use everywhere already! As they are vector based, they can't replace raster graphics, so I can see why their use may be somewhat limited in certain situations, but I can't understand why they aren't being used more frequently as of yet over the other alternatives. PNGs, for example, aren't scaleable without loss of quality, even if the content is a vector image. One major put off could be what looks like a garbled mess of code that they throw out. Once you get your head around what's going off though, you'll find out they aren't so bad after all. Here is an example of part of the SVG code from a 'Snowman' graphic I created for our giraffe Advent calendar (more on that later)…

<g id="hat">
		
    <path class="hat-ribbon" d="M45.071,104.135l6.829,12.61c34.1-33.933,65.013-19.442,65.013-19.442l-1.961-14.935
			C90.037,83.282,65.447,89.325,45.071,104.135z"/>
		
    <path class="hat-top" d="M112.882,63.362c0,0-8.829-9.698-36.575-5.148C37.661,64.555,35.338,85.67,35.338,85.67l9.733,18.465
			c20.376-14.81,44.966-20.853,69.881-21.766L112.882,63.362z"/>
		
    <path class="hat-bottom" d="M53.534,129.075c0.036-0.068,25.632-34.575,72.603-27.137c2.978,1.543,5.882,3.363,8.606,5.366
			c4.566,3.344,8.269,7.964,11.039,13.238c9.431-9.731,8.321-22.45-4.971-27.139c-20.632-7.306-44.275-2.84-64.322,4.855
			c-16.056,6.149-33.525,18.058-36.938,35.628C37.229,145.866,42.802,151,53.768,154h0.006
			C50.945,146,51.063,137.347,53.534,129.075z"/>
	
</g>

At first glance, you might think that this doesn't make much sense, but once you start to familiarise yourself with it, it's actually fairly straightforward to understand and is very similar to HTML. There are a few other articles out there on the web that will explain this markup in greater detail than I am going to, but to summarise, in the above example, it is basically a collection of groups and paths, and all the mess of numbers are points within those paths. You can also utilise shapes such as circles and polygons, which tend to look a little cleaner, although none of those were used in this example. Even so, you should never really need to touch these numbers manually, after all we have Illustrator for that! You can see a completely broken down version of the whole thing, complete with animation over on JSFiddle if you want to investigate further.

One thing we did find, that you may find useful when developing yourselves, is that it was far easier to use a PHP include within our template whenever we wanted to call in the image, to keep our main body of code nice and clean and less of clutter. Nobody likes huge messes of code that make it difficult to find what you are looking for.

Putting it in to practice.

Another of the major benefits we thought SVG had, was the ability to animate independent layers of an image using CSS and/or Javascript, which is exactly what we got up to recently in our 'Advent Calendar' project for giraffe restaurants - I told you there would be more on this! As part of this project, for each of the advent windows - or doors, whichever you prefer to call them! - we incorporated the use of SVGs instead of regular PNG files and animated them to really bring the calendar to life.

Initially, each image was created in Illustrator, in this case, by one of the other guys here without SVG in mind - before we decided to give them a whirl. As this was fairly new to me, I spent a little time fiddling around and exporting the images and messing around with the code. Through this, I quickly learnt some useful practices when creating your vector image with the web in mind and I went back over the images, tweaking them where necessary to help me out in the long run.

• Firstly, and rather importantly, name all your layers with appropriate names - something I know most of us are guilty of not doing, especially in Illustrator! In doing so though when we export our SVG those layers that are named will be auto assigned IDs using the layer names from Illustrator - although sometimes they will still need tweaking afterwards as Illustrator seems to like adding random numbers onto layer names at the export stage - don't ask me why as I have no idea - if you do maybe you could shed some light in the comments below? Either way, at Engage we prefer to use classes to IDs, but that's a quick and easy change once the SVG is exported. In doing this, we will later be able to control each part of the image easily using CSS.

• Secondly, group objects together that may need to be linked during your animation and again, give this group an appropriate name. As you saw in the example above, all the elements of the snowman's hat were grouped together. I found this makes your workflow easier when deciphering your code later on. Also, be careful of using layer names that may interfere with your HTML, such as "body". When working with things such as a Snowman and a Robin as I did in this project, I had to be careful I wasn't tempted to do that. I wouldn't worry too much if you forget to group things together at the Illustrator stage, it is easy enough to add a group into your code at a later point, but to save yourself time, doing it now will definitely help.

• Finally, to export your Illustrator file as an SVG, simply go to File, then Save As, and select the SVG option from the drop down box. Press Save and you will be prompted from another dialogue box. From here you can either go ahead and save out the SVG file, or click the box that says 'SVG code' which will open up the file in your default text editor.

From here, you will most likely want to tidy the code up a little bit, depending on personal preference. From each of the images created for our advent calendar I tidied the code up in line with our style guides and to generally make the code more readable.

For this project, to keep things simple, we stuck to using CSS animation, if you checked out the JSFiddle I posted earlier in this blog post you'll see a broken down version of how we animated the Snowman, but the possibilities are endless once you add Javascript in to the mix and there are various Javascript libraries worth checking out for working with SVG such as Raphael and Snap.svg that simplify the process.

Coming to an end...

Unfortunately, that's all I've got time for today, but I hope you've enjoyed the little walkthrough and understand SVGs a little better if you knew nothing about them before hand. They really aren't as complicated as they first seem and give you a huge amount of options when it comes to web design and we are sure to be using them again in future projects.

For those of you out there already using SVG, what are you doing with them? Could you have improved on anything we did above? Let us know in the comments below.