Fear not, by the simple application of your eyes you will be able to read this post. This will tell you all or at least most of what you need to know about SVGs.
What are SVGs?
So, what is an SVG? Well, it stands for Scalable Vector Graphic and is basically an xml file with a bunch of coordinates in it. Your browser interprets these coordinates and draws them out… simple.
Why use SVGs?
The great thing about an SVG is that it is truly scalable. That means you can alter the size without any loss of quality. This is particularly useful with the invention of the retina displays where you would otherwise have to use multiple images of different sizes.
Depending on how you implement an SVG it can also offer more control than with an icon font or an image. As the SVG is an xml file you can target each element separately via CSS.
Original SVG
SVG using CSS
Rocket
Why wouldn’t you use an SVG?
Well until recently SVGs haven’t had the support that they deserve, specifically Internet Explorer 8 and below. For more complex graphics an SVG can be a much larger file size than the equivalent jpg or png. Also if are not a fan of Sketch, Adobe Illustrator or Inkscape you are going to find it difficult to make an SVG.
Don’t let these minor obstacles get in your way, there are ways round them.
How to make an SVG
In adobe Illustrator it is dead simple. Just create a new art board, draw your graphic and then click Save As and choose SVG… done.
If this seems too much like hard work then Flaticon have some very useful icons in a variety of formats including, most importantly, SVG.
How to put an SVG on a website
Here we get to the fun bit. There are a number of ways you can implement an SVG on a website. They all have their pros and cons.
Basic
The simplest and neatest ways, as far as your html code is concerned, is to treat your SVG as an image. In other words upload your SVG file to the server and call it in a <img> tag or as a background image in your CSS.
HTML example:
<img src=”/rocket.svg” alt=”picture of a rocket” width=”200″ height=”200″/>
CSS example:
div{ width:200px; height:200px; background: url(./rocket.svg); background-size:200px 200px; }
Don’t forget to set the size of the image if you want it to be different to the original one you created, also make sure it is the same aspect-ratio as the original.
The main disadvantage with this method is it doesn’t allow any control over the colours or filters.
Advanced
To maintain complete control over your SVG you can paste the code from you SVG file directly into your html.
Inline example:
<body> <!– Place your svg code form your svg file here. –> </body>
However this just looks darn right messy. So a cleaner way of doing this is use a php include.
PHP example:
<?php include(“rocket.svg”); ?>
The most sophisticated way of implementing an SVG is to use the <object> tag.
Object example:
<object type=”image/svg+xml” data=”/rocket.svg”> Rocket <!– fallback image in CSS –> </object>
The drawback with this method, as I see it, is that you can’t target the SVG with your default stylesheet. Instead you have to declare your CSS within the SVG file, as in the example below.
<svg> <style> <!– CSS goes here –> </style> … </svg>
Bowser support
We do have one barrier that stands in the way of SVGs and world domination. Guess what that is, yep that’s right, IE. Specifically IE8 and below. So what is the fallback? Well there is no particularly elegant way of doing this.
The easiest way is probably to make a PNG of your SVG and show that for IE8 and below
PNG fallback
<!–[if gte IE 9]><!–> <svg> … </svg> <!–<![endif]–> <!–[if lte IE 8]> <!– PNG Fallback –> <img src=”rocket.png”> <![endif]–>
Using CSS and Filters
The Great thing about SVGs is the ability to manipulate them once you’ve got them on the website. You can use javascript, CSS and there re also a number filter that you can use, see W3Schools for a list.
Blur Filter Example:
Rocket
Blur Filter Code:
<svg filter=”url(#f1)”> <filter id=”f1″> <feGaussianBlur in=”SourceGraphic” stdDeviation=”10″ /> </filter> … </svg>
The great thing about SVGs is that you can simply add classes to nearly any tag in your SVG file and then target it with CSS.
Adding Classes Example: <svg> <path class=”rocket” d=”….” /> <path class=”engine” d=”….” /> <g class=”flame”> <path class=”flame1″ d=”….” /> <path class=”flame1″ d=”….” /> <path class=”flame1″ d=”….” /> </g> </svg>
Apply CSS:
.flame{ fill:#F7941E; } svg:hover{ fill:#81d941;