Introduction
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Not all of you know that SVG format existed for more than 15 years and the first SVG specification appeared in 1999. But widespread using of SVG received recently with becoming of huge number of devices with high resolution.
Also today, almost 80% of the world's population has a mobile device and 45% of internet traffic comes from smartphones and tablets. So, most developers follow the Mobile first rule.
Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences.
You could read more about it here.
SVG is the best approach for creating a responsive design. Vectors format allows for you to have one image for any devices: mobile, tablet or desktop. Another goodies of SVG is small file sizes. If you increase eBay and Amazon page load speed by 9%, then they lose 1% of their profit. With SVG, you will forget about problems with scaling images and reducing its sizes for any type of device.
Why Do You Need SVG?
- Small file sizes and good compressing
- Scaling to any size without loss of quality (except of very small sizes)
- Looks good on the retina displays
- Additional opportunities which provides filters and interactivity
If you still don't work with it, I will prove that SVG is very simple for using. In this tutorial, I want to talk how you can easily add terrific drawing animation effect to your project.
How Can You Use SVG in Your Project?
-
As image element:
<img src="some.svg" alt="SVG is awesome">
-
As background image in CSS:
<a href="/" class="logo">
Your logo
</a>
.logo {
background: url(your-logo.svg);
background-size: 130px 70px;
-
Directly in HTML markup:
<body>
<!--
</body>
or:
<?php include("some.svg"); ?>
-
As object element:
<object type="image/svg+xml" data="some.svg" class="logo"></object>
Today, almost 97% of all browsers support SVG instead of lower versions of IE8 and Android 2.3. The first two cases of using don't allow to change SVG via CSS. Last case with <object> has a better browser support, but if you want to make changes with CSS, you must put <style> tag directly in the included SVG file. Yet another opportunity of this way is that object element instead of directly insert in HTML could be cached by browsers.
SVG Filters and Interactivity
<!--CODEPEN IFAME-->
http://codepen.io/anon/pen/JGewOd
Let's started with choosing some icon for our experiment. I recommend the awesome Flaticon resource for finding all of your needs.
After making your choice and download icon, you should include SVG image in HTML. Because we would interact with this, it must be placed as svg element, not as path to image in src attribute of img tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg id="logo" height="300"
xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px" viewBox="0 0 404.7 354"
enable-background="new 0 0 404.7 354">
<path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,
10 L 130,110 z" fill="red"
stroke="orange" stroke-width="5"/>
</svg>
</body>
</html>
Next, we will work with path element. It's just a line and in its attribute d specifies the coordinates of the points by x and y axis, which is divided by comma. Also you can see fill, stroke, stroke-width attributes, exactly that's what we can change with CSS.
svg path {
stroke-width: 3;
stroke: #cc0000;
fill: #fff;
}
The last step is power on a great Vivus.js library which will do all drawing animation process. You just need to include vivus.min.js and create a new Vivus class:
// logo is id of svg element
new Vivus('logo', {
type: 'delayed',
duration: 300,
animTimingFunction: Vivus.EASE
});
Vivus supports five types of animations (delayed, async, oneByOne, script, scenario or scenario-sync), few easing functions and good number of methods and options which help you to set all that you want.
You could see more examples on the official page of project or try it by yourself.
Additional information can be found at http://it-blog.qarea.com/tag/html5/.
