1- It’s already Markup

Yes you heard that correct! Go on, open a SVG file in a browser. Magic ay! So what’s going on here? SVG are vector images, vector images are basically coordinates of where shapes and lines should be. Obviously all files on a computer are made up of some sort of code. If you open a .svg file in a text editor you’ll see that it kind of looks familiar.

Would you look at that, it even has classes and styles! So when someone creates a SVG it creates this type of code. Applications like Adobe Illustrator is simply a GUI that allows people to create, edit and view them with without having to know the code. It’s valid HTML5 markup! You can just copy and paste your SVG code into an html page and it will work!

2 - By default it’s retina ready

Normally with jpg or png you would have to use srcset or media queries to provide 2x images so it looks pixel perfect on other devices such as retina screens. SVG are vector images. As the image is made up of coordinates they are crystal clear regardless of the screens pixel density. You can zoom in on your browser and they never lose quality!

Always super high quality!

3 - You can style different sections of them!

You may have noticed above that you saw some inline styles! You don’t have to use them this way, you can of course add classes and style it with css. The best part is you can style each element differently. You could target just a third circle to be red.

circle:nth-child(3) {

fill: red;

}

This allows us so much more control than we had before with icons. Normally limited to styling them with just one colour. We now have control over every shape or line that makes up the icon. You can even group a bunch of shapes together. Simply wrapping them in <g> </g> like you’d wrap elements in a div. You can then target the g tag or give it a class and style all of them at once. Even better we can choose to animate certain parts of the icon creating something really unique. Here is a simple example, try changing the colour inside primary-colour and see how it effects the icon.

Something like css variables would be awesome in this case. You could let a user customise an SVG by selecting different colours for it.

4 - Browser support is awesome

Would you look at that!

That is exactly why we all should be using SVG more. Quick tip: make sure you always set a width and height property of your SVG. Most browsers will work with just a width and update the height as if it was auto. IE won’t work and needs you to set both and width and height either as percentage or pixels.