The complete guide to SVG

How to use SVG

There are a number of ways to use SVG on the web; browser support is very good with support only lacking in IE8 and below, and really early versions of the Android browser. It's safe to use it, so we should be using it! By using SVG, you're sending the instructions of how to draw something to the browser instead of the drawn thing itself.

The image tag

You can embed an SVG image into the page the same way you do any other image using the HTML image tag;

<img src="myAwesomeSVG.svg" alt="My Awesome SVG">

Embedding the image into the page this way will assume the size of original SVG file unless you specify a width and height attribute in HTML or via CSS. Using the image tag is good for logos and other content when you need screen readers to have access to the alt attribute. You can provide fallbacks for when SVG isn't supported using Modernizr to swap in a PNG. 

CSS Background Image

You can also embed an SVG image into the page in CSS, using the same method as you would to attach any other kind of image to an element;

.hero {
  background-image: url('myAwesomeSVG.svg');
}

By using the SVG this way, we can take advantage of the other CSS background properties allowing us to size, position and repeat our image as the background of an element.

background-repeat: no-repeat;
background-position: center center;
background-size: contain;

To provide support we can use a trick in the way CSS is parsed by the browser and provide a fallback PNG right before we include our SVG.

.hero {
  background-image: url('myAwesomeSVGfallback.png');
  background-image: url('myAwesomeSVG.svg');
}

Inline SVG

SVG can be written inline, straight into the document using the SVG tag;

<svg 
  width="100px" height="100px" 
  viewBox="0 0 100 100" version="1.1" 
  xmlns="...">
  <title>My Awesome SVG</title
  <circle class="circle" 
  cx="50" cy="50" r="50" 
  fill="#FFFF00">
  </circle>
</svg>

Since SVG is scalable (it's in the name) if we provide the tag without the width and height attributes the SVG will grow to the size of the container. By writing our SVG into the page we could remove the fill from the inline SVG and style it in CSS;

.circle {
  fill: #FFFF00;
}

Fallbacks for using this method again rely on providing a PNG fallback and using Modernizr to detect support. The only other disadvantage is that inline SVG – being markup – will not be cached by the browser.

As an object

You can also embed SVG as an object or iframe, which will utilise the browser's cache but will maintain the style-ability of the SVG.

Next: Writing SVG for the web