What is SVG and how to use it?

What are SVG files?

SVG files, unlike images posted on websites to which we are accustomed, belong to the vector graphic group. It's universal format that is a derivative of XML and it isn't charged with any license or patents. We can use it for static images and also we animate it. The code file is stored as text, which means that we can easily open it even in a notebook (as a last resort) and edit it as well! We can invoke to that format in HTML code whithout any problem, because it was designed for use on websites. What is more, we are able to embed it directly into the code, what allowing us to tamper with the code of graphic using CSS and Javascript!

Difference between vector and raster graphic

Most of the images we can find on web pages are a raster. In contrast, as I mentioned earlier, SVG is a vector format. The biggest difference between these two types of graphics is the way of saving it. When it comes to raster, we can save it as JPG, GIF or PNG format and it contains information about every single point / pixel. A picture taken with a digital camera can serve as an example here. As opposed to raster, vector graphic contains a mathematical description of geometric figures localized in coordinate system (along with a description of color). This allows to recreate the image without losing sharpness in any quality (because of it is scalable). The advantage of vector files is their low weight. The reason of that is that computer doesn't need to load the entire image pixel by pixel, but it only generate an image of the described points. Because of this vector is perfect format for illustrations or charts. But it can't be capable of complex graphic and photos.

How to built a SVG graphic?

Since SVG files are based on HTML, a person who not has a problem with HTML (there is someone who has? ;)) can understand its structure without much trouble.
Sample code of SVG file looks like this:

See the Pen eJOxMO by Anita (@smotchi) on CodePen.

I'll try to describe that seemingly complicated code :)

<circle id="kolo" cx="80" cy="60" r="60" fill="#ff8e36" stroke="#000" stroke-width="3"/>

The circle with center located at a point 80 on the X-axis and 60 on theY-axis and with a diameter of 60 points. It characterized by a filling code #ff8e36 and a black border which size is 3 points. It is also possible to obtain an elliptical shape with the ellipse tag.

<rect id="kwadrat" x="200" y="0" style="width: 180px; height: 120px; fill: #000; stroke: #ff8e36; stroke-width: 3px"/>

Quad located at 200 point on the X-axis and point 0 on the Y-axis which dimension is 120 px heigh and 180 px width. It is filled with black and orange and it has border with a width of 3 px.
Have you noticed the difference defining characteristic of a shape? That's right! We can describe the figures in two different way: by using parameter or by using CSS. SVG files adopt most of CSS properites that allows us to add effects such as hover, transition and others. I'll describe it in the next part of this article.

<g transform="translate(10,20)">
[…]
</g>

The structure of SVG files allows us to embed the elements in the group and transform it. In our example, circle and square are in the group that was moved by 10 point on the X-axis and 20 point on the Y-axis.

<path id="linia" fill="none" stroke="#cc0000" stroke-width="5" d="M450,120.8c-10.5-39.2,55.8-45.7,55.8-45.7s30.3,3.2,22.6-42"/>

Path tag is defines the path d-parameter that contains a list of point etc. I recommend to us Adobe Illustrator or InkScape (which is free) at this point, due to the fact that hand writing is difficult and time-consuming.

SVG animation

SVG files can be animated what may lead to increasing the efficiency of the website.
The advabtage over, for example, animated GIFs is smaller size (the animation is generated) and more control.

See the Pen mVbvxq by Anita (@smotchi) on CodePen.

There are two ways to create animation:

• Inside SVG file:

<animate xlink:href="#prostokat" attributeName="height" values="120; 250; 120" keyTimes="0; 0.5; 1" dur="2s" begin="0" repeatCount="indefinite"/>

In this method, we determine the xlink:href element that will be our reference, and attributeName that will be animated. The next two parameters have to be described as the values, to which the selected property should animate, and time in which it shloud occurs. Additionally, by begin we can choose from when our animation is expected to start, while repeatCount defines the number of repetitions. In this case it is infinite.

• Using CSS styles

#prostokat {
animation: rect 2s linear infinite;
}
@keyframes rect {
0% {height: 250px}
50% {height: 120px}
100% {height: 250px}
}

I assume that everything is understood :) Why? Because elements embeded in the HTML code (not displayed using img tag) can be animated like any other DOM element in the structure of the site.

Of course there are many more opportunietes to animate SVG. We can even trigger animations after click or mouseover.
There's any problem to scripted graphics and, for example, animate using transition and change the value.

See the Pen rxBPvN by Anita (@smotchi) on CodePen.

Animated lines

One of my favourite ways of using SVG is path animation.

See the Pen mVbvLq by Anita (@smotchi) on CodePen.

To achieve that effect, we only have to draw the path, confer it a color, contour and then define dashed line by stroke-dasharray parameter. The interval shall be the sum of the length of the path. When it comes to animation, we just should change the value of the stroke-dashoffest to move the dashed line. In this way we're imitating drawing a line.

Extra capabilities of SVG

It is true that there is something like CSS mask, but rarely we can find it and use because of the lack of full browsers support.

See the Pen yeBZjW by Anita (@smotchi) on CodePen.

Canvas as an alternative

An alternative to SVG is Canvas thanks to which we can also draw shapes and then animate them, but in this case Javascript is necessary. Earlier, similar effects can be achieved by using Flash, which also requires a plugin in your browser.
The great advantege of SVG is the possibility of light the website up without using scripts or external solutions.

We used successfully SVG files in our project Polish Christmas Guide which is a perfect excellent summary of this article - just see it ;)