Logo SVG mini tutorial

This tutorial is meant as an introduction to SVG without too much in depth explanation. How to use and control SVG's with CSS.

SVG stands for Scalable Vector Graphics, and as the name indicates, is graphics defined by vectors. A vector is a mathematical term which basically means, an item with a direction and a magnitude. The scalable part means that the graphics in an SVG is scalable without loss in quality (as opposed to "normal" images that gets pixelated when scaled up).

Translated to "normal" English, you could consider an SVG a container for calculated points connected with each other in a coordinate system by lines or advanced calculated paths like bézier curves.

An SVG "image" is therefore extremely usefull in responsive web design, because of this. It's scalable and much more performant than images, since they only contain code/coordinates and therefore has much less data to send across the world wide web.

If you want to know more, in depth about SVG, you can always goto w3schools or MDN for more information.

Some information on common SVG items at MDN:

The following SVG code was taken from my collection of Material Design Icons (if you want to find the SVG in that list, search for "diamond"). 

HTML


<svg viewBox="0 0 24 24">
    <path d="M6,2L2,8L12,22L22,8L18,2H6Z"></path>
</svg>

If you insert the above code directly into your HTML project, it would look something like this:

Yuck! Why is it sooo big??

Well, because we haven't defined any width and height! So let's do that: 

HTML


<svg viewBox="0 0 24 24" width="100px" height="100px">
    <path d="M6,2L2,8L12,22L22,8L18,2H6Z"></path>
</svg>

Better:

Let's also change the color. We do that with the fill attribute: 

HTML


<svg viewBox="0 0 24 24" width="100px" height="100px" fill="crimson">
    <path d="M6,2L2,8L12,22L22,8L18,2H6Z"></path>
</svg>

You can of course also do this by (optionally) giving the SVG a class and define the width, height, fill with CSS: 

HTML


<svg viewBox="0 0 24 24" class="my-svg">
    <path d="M6,2L2,8L12,22L22,8L18,2H6Z"></path>
</svg>


CSS


.my-svg{
    width: 100px;
    height: 100px;
    fill: crimson;
}

You can use a lot of CSS properties like transition: fill 300ms; or transform: scale(1.1); to make the SVG look even cooler
(try hovering the mouse over the diamond):

The CSS for that: 

CSS


.my-svg{
    width: 100px;
    height: 100px;
    fill: crimson;
    transition: fill 300ms, transform 300ms;
}


.my-svg:hover{
    fill: red;
    transform: scale(1.1);
}

SVG's are really simple to use, once you understand them and can help make your web design much more responsive and pleasing for the eye... Hope you enjoyed my small intro to SVG's...