Imagine you want a graphic which should be resizable and colorable in CSS. How you would do that?
Inline a SVG is the solution. The inspiration came from here http://codepen.io/philippkuehn/pen/zGEjxB. And the task for me was to build a rating star module which should have three size states given from parameters and three choosable colors. For example the class was "big" and "yellow" so you should get a big yellow star.
The advantages are clear:
- you don't need a designer that often who opens Illustrator for example
- you are flexible in your workflow
- it's maintainable
But there are disadvantages too:
- the support for the loser browser isn't so good. IE <9.
- no mobile support for Android < 4.3 and Windows Mobile Phone 8
- more complex than the old PNG solution e.g
So let's get started. I'll do this tutorial in SASS and recommend it to do so. First of all you need the inline svg function.
Line 2 defines your SVG. You get these by open your favorite SVG in a text editor and copy the d-path from it.
Beware: the SVG isn't allowed to be super complex. I tested only simple shapes with this function.
Line 5-44 is the convert mechanism and line 47 is the important one. Especially charset=US-ASCII.
Let's go to the scss file.
It's not too difficult. Try to go through and understand it. I left out the actual construct of the stars because it would be too much. You can use this in what ever constellation you want.