SVG stands for Scalable Vector Graphics and right now it is trending all over the internet. Website developers are extensively using SVG icons in order to make their websites more animated as well as interactive in nature. Even all the major web browsers today make use of SVG icons for providing best in the class services to their users. Looking at the use and benefits of SVG icons, in this post you will learn how to animate SVG icons using CSS.
First of all, SVGs are very easy to style and use with the help of CSS, like in the case of HTML. But CSS3 animation is required while working with SVG icons. You must be wondering why to use SVG icons at all? Well, the use of these super- interactive icons can provide a more amazing experience to your visitors. Apart from this, you can also add elements such as context, in order to let the user know about what each of your icon represents.
All you need to know about SVG code:
The foremost knock with SVG is that its entire code is not easy to deal with. The reason behind this is that the code represented by Illustrator (a well- known Vector Graphics editor) will appear unreadable the very first time you will look at it. The code looks utterly complex and hence developers are most likely to lose interest in it at some point of time. However, there are better alternatives to Illustrator which do a better job in representing the code. For instance, you can use Inkspace. Inkspace not only simplifies the SVG code to a very large extent, rather it also gives the option of exploring as well as formatting the code. This is definitely a great thing because it gives the developer better understanding of the SVG code and also the possibilities of future scope and formatting.
SVG codes are fully unreadable and complex for the web developers, for example following code is copied from Abode illustrator for blinking Christmas light –
<?xmlversion=”1.0″encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPEsvg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svgversion=”1.1″id=”Layer_1″xmlns=”http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“x=”0px”y=”0px”
width=”64px”height=”64px”viewBox=”0 0 64 64″enable-background=”new 0 0 64 64″xml:space=”preserve”>
<pathid=”outline”d=”M38.178,12.142H25.822v10.723c-1.605,2.67-2.461,6.529-2.461,11.406c0,9.473,4.748,17.587,8.637,17.587
s8.641-8.114,8.641-17.587c0-4.881-0.854-8.744-2.461-11.412V12.142z”/>
<rectid=”basefill”x=”29.822″y=”16.142″fill=”#4D4B4C”width=”4.355″height=”4.273″/>
<pathid=”lightfill”fill=”#FFFFFF”d=”M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.271-8.566,2.207-9.855
h4.857c0.945,1.293,2.213,4.08,2.213,9.855C36.639,41.542,33.402,46.809,31.998,47.768z”/>
</svg>
Now I will simplified it for you –
<svgclass=”svg-light”
viewBox=”0 0 64 64″
xmlns=”http://www.w3.org/2000/svg“
>
<pathclass=”outline”
d=”M38.178,12.142H25.823v10.723c-1.606,2.67-2.461,6.529-2.461,11.406c0,9.473,4.748,17.587,8.636,17.587c3.889,0,8.641-8.114,8.641-17.587c0-4.881-0.854-8.744-2.461-11.412V12.142z”
/>
<rectclass=”base”
x=”29.822″
y=”16.142″
width=”4.355″
height=”4.273″
/>
<pathclass=”bulb”
d=”M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.272-8.566,2.207-9.856h4.858c0.945,1.293,2.213,4.081,2.213,9.856C36.639,41.542,33.402,46.809,31.998,47.768″
/>
</svg>
Now the part left is animate the bulb I used above using CSS –
<pathclass=”bulb”
d=”M31.998,47.768c-1.402-0.959-4.637-6.229-4.637-13.497c0-5.775,1.272-8.566,2.207-9.856h4.858c0.945,1.293,2.213,4.081,2.213,9.856C36.639,41.542,33.402,46.809,31.998,47.768″
/>
.svg-light .bulb {
fill: hsl(204, 70%, 23%);
animation-name: glow-blue;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
And define the glow-blue as well –
@keyframes glow-blue{
0%{ fill: hsl(204, 80%, 23%); }
100%{ fill: hsl(204, 80%, 63%); }
}
Basic Elements in a SVG code:
There are some very basic elements inside a SVG code which are responsible for bringing out the effect or magic as desired by the user. All these elements are carefully embedded inside the entire SVG code and hence interact with each other in a very co-operative manner. Some of these elements responsible for providing shapes to different objects are Paths, Rects, Circles, etc. The best part about using these elements is that they are predefined and hence the developer only needs to specify the co-ordinates for each of the shape that he is using inside his SVG code.
Now that you have written all your required SVG code, the next step is to indent them according in order to make it easily readable to the users. For this purpose, you can use the SVG base tag. Once you use this tag, you will notice that your SVG code has become easily readable.
Depending on the type of editor that you are using, you can create a lot of different animated SVG icons for your website.