SVG – expanded

Contents

• Preparing & Optimising
• Implementation options
• CSS Manipulation
• JS Manipulation
• Fixed width vs responsive
• Animating
• Spriting
• Media queries
• Fallbacks
• Resources

Introduction

We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can look crisp at all screen resolutions, can have super small file sizes, and can be easily edited and modified.

This guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.

Scalable Vector Graphics are an XML based markup that can contain two-dimensional vectors. The vectors can be simple shapes, paths, or well just about anything you can do in Illustrator. It’s an image format that has more in common with a web page that it does with a JPEG. SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS).

• Resolution independent
• Supported by all modern browsers
• Future-proof (W3C standard)
• Easy to make and edit
• Manipulatable with CSS & JS
• Highly compressible

Preparing & Optimising

Preparing an SVG for use on the web is a simple process and no more complicated that exporting a JPEG or PNG. Work as you typically would in your preferred vector graphics editor (Illustrator, Sketch, Inkscape [free], etc [or even Photoshop if you use shape layers]) with the graphic at the size that you expect to use it. I’ll explain a few things I do using Illustrator as that is what I typically use, but the same principles apply to any software. You’ll probably want to convert any text to outlines as it most likely will not show in the correct font unless you plan on styling them with a web font you are using on the page (which you can do!). Don’t worry about expanding all your objects to solid shapes, particularly if you have strokes as you may want to manipulate these on the page and expanding them typically doesn’t make the file size any smaller. Any names you put on layers / groups will be added in to the SVG as an ID on that element. This can be handy for styling, but will add a little to the overall file size.

To export, check that the design is sitting in an area of whole pixels (i.e. not 23.3px × 86.8px) otherwise it may not actually be crisp and then crop the artboard around it. You can do this in Illustrator with Object > Artboards > Fit to Artwork Bounds. Next hit save as and choose SVG and use the default settings. You can do some optimising here, but it isn’t really worth it as we will be post-processing them to optimise and any time spend playing with these settings is wasted.

Tips for smaller file sizes

(See the resources for external article links)

There are a number of good articles on SVG optimisation on the web which offer a wealth of knowledge on this subject, but I would like to share a few tips and tricks that I have found to be most effective and useful for me. They don’t take much extra work and can be easily added in to your workflow.

To keep your SVGs as small as possible you effectively want to remove anything unnecessary. The most well known and best (at least I think so) tool to post process SVGs is SVGO. This strips out all the code that isn’t needed — note: remember to be careful when using this if you plan to manipulate with CSS / JS as it can sometimes over-optimise your files making them harder to do what you planned to with them later on. A very handy thing with SVGO is it can be added to your build process so it is automatic (or you can use a GUI to do it yourself if you prefer).

Taking things a step further in ‘removing anything unnecessary’ we can do some more in the graphics editor. First you want to make sure you are using as few paths / shapes as possible to achieve what you want and also that there are as few points on these paths as possible. You want to combine and simplify anything that you can. Then you want to remove as many points from your paths as possible. VectorScribe is an Illustrator plugin that has as part of it a Smart Remove Brush Tool — this allows you to remove points whilst still keeping the overall shape the same.

Pre optimisation

Smart Remove Brush Tool removed point

Next you are going to want to zoom in. In Illustrator you will want to enable the Pixel Preview with View > Pixel Preview and take a look at where your path points sit. For the smallest file sizes you want these to sit on the pixel grid (i.e. at whole pixel values). This takes a little bit of time to snap them all in place but is worth the extra bit of effort as this also ensures the sharpest rendering (notice how before you can end up with some half-pixel areas).

Points off pixels

Pixel snapped

If you have two (or more) shapes that align you will want to remove any unneeded overlap. A thing to look out for is they can appear to have a thin white line between them even if the paths align, so sometimes you need to overlap them a little to prevent this. Note: in SVG the z-index is defined by the order they appear in the file with the bottom being the highest, so put the top shape at the bottom of the file in the code.

Last but not least, one thing that is often forgotten about, remember to enable gzip compression for SVGs on your websites in the .htaccess file.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" 
                                      "text/css" 
                                      "text/html" 
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

---

As an example of how effective these techniques can be, I took the original Breaking Borders logo and optimised it thusly: re-sized it to as large as it needed to be, tidied the paths, removed as many points as possible, moved the points to whole pixel values, removed as much of the overlapping area as possible, and put it through SVGO.

Original: 1,413b

Optimised: 409b

All in all that makes it ~71% smaller (and ~83% smaller if gzipped)

ADDITION: Rob Sterlini pointed out that as the ‘b’ is repeated you could probably use a <use> element to repeat it which might make it smaller — and he was totally right.

Optimised further with <use>: 311b

~78% smaller

If you do this to all the SVGs on a site it can really add up.

When it comes to using SVGs on the web there are a number of different ways you can go. Some of them have benefits which can be useful depending on what you would like to achieve and some of them are best to be avoided. If you want to just keep things basic to get the resolution independence and file size benefits you can reference the SVG in an img or as a background-image in CSS just as you would any other image format.

Img

Just as you would with any other image. You can also use SVGs in a <picture> element. Note that this method limits manipulation functionality.

<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">

Background-image

It’s best not to base64 encode them as it this will block the loading of the rest of the styles while it downloads. Note that this method limits manipulation functionality.

.logo {
  background-image: url(bblogo.svg);
}

Iframe

You can load SVGs in an <iframe>. It does let you do most things, but I’m not sure it is the best method to use moving forward ¯_(ツ)_/¯.

<iframe src="bblogo.svg">Your browser does not support iframes</iframe>

Embed

<embed> is meant to be used to integrate ‘an external application’ or ‘interactive content’. You can use it for SVGs but yea probably just don’t.

<embed type="image/svg+xml" src="bblogo.svg" />

Object

<object> is pretty much the best option to use if you want to be able to manipulate an SVG without having to put it inline in your HTML.

<object type="image/svg+xml" data="bblogo.svg">Your browser does not support SVGs</object>

Inline

Putting your SVG code inline will save an HTTP request but it will mean the image isn’t cached by the browser. It is the easiest way to manipulate, however maintaining inline SVG code can be a pain.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

---

To Conclude

If you want to get the most out of your SVGs use <object>. Alternatively you can use them inline to save the HTTP request, but note that it will not be cached. If you just want to use SVGs as you would any other image use <img> or a background-image. You have the ability to use <iframe> and <embed> but I don’t think they are the best options going forward (and for the purposes of this site, I will not focus on them any longer).

	Object	Inline	Img	Background-image
CSS Manipulation	Yes	Yes	Some inline	Some inline
JS Manipulation	Yes	Yes	No	No
SVG Animation	Yes	Yes	Yes	Yes
Interactive SVG Animation	Yes	Yes	No	No

Note: ‘Some inline’ means somethings work, but only if the CSS <style> is embedded within the SVG code. More info on this in the next section.

CSS Manipulation

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>

// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#000000; #4e86b1; #000000" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#4e86b1; #000000; #4e86b1" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
    </path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseout"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseout"/>
  </path>
  </svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: #000; transition: fill 0.1s; }
    .firstb:hover { fill: #4e86b1; }
    .secondb { fill: #4e86b1; transition: fill 0.1s; }
    .secondb:hover { fill: #000; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>