Graphics are an important field of your visual identity, but also can make your web to load slowly. In this post I will show you how using SVG graphics you can optimize and improve overall customer’s experience and your site load time.
If you know what is a vector graphic and it’s differences between a bitmap image you can skip the introduction and jump to How to improve your server speed with SVG icons section where I talk about how to increase the speed of your site.
Introduction: what is SVG hence a vector
SVG (Scalable Vector Graphics) is a format standardized by W3C on 1999 that aims to port the advantages of vector images to the web.
To understand what is a vector first we must know how images store their info. There are two ways to define an image: to store which primary colour of the additive model (Red Green and Blue) is inside a pixel grid, or to use maths to define a geometric form and store it’s info with numbers and text.
- Bitmap photos and videos formats use the grid approach.
- Vector graphics use maths to calculate the final render.
Let’s say we have two images of a box, one is bitmap and the other one a vector. Focus your attention at the bitmap box (we will rotate it slightly to see the effect) and we will make zoom on it. It’s dimensions are 100×100 pixels and 72 PPI ( how many pixels are contained in an inch, Pixel Per Inch).
As you can see our bitmap box is pixelated, while the vector image is not. This happens because bitmap images are defined in the space and limited by attributes such as resolution (how big is an image, heigh and width) or PPI. The grey pixels are a result from interpolation. So now you know one vector’s advantage, quality is mantained when you make zoom on them because they are being defined by maths and are scalating their dimensions.
Well, you maybe encounter yourself thinking if there could be a photograph represented by vectors, the answer is yes, but that’s not what vectors are for. For photos and videos, bitmap format is the right choice because it has another advantages such a better realistic look, a more affordable way of processing and modifying data and a very good relationship representing complex forms with subtle colour transitions such as clouds or skin tones.
Vectors on the other side were made to describe simple and complex geometric images where there is normally not many transition of colours and than can be scalable to big sizes.
So what is SVG?
SVG is a format / way of writing vector images using markdown language just like html is made for layering text. A box in SVG format will result in something like this:
<svg height=”100" width=”100">
<rect width=”100" height=”100" style=”fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)”></rect>
</svg>
which result in this :
Let’s get dirty, for example this time we will use my logo which has a clearly difficult path and we will convert it to SVG. You will see it doesn’t matter how difficult the shape it is, it can be always be defined by maths. My logo in SVG result in this:
How to use SVG on the web
Is very easy to use SVG on the web the only thing you have to know is the SVG code of your icon. All kind of vector drawable software like Adobe Illustrator or Inskcape have an option to export your work as an SVG. Then, you only have to paste it onto your html and you are done.
Of course you will need to add some code to your taste (exmaple; a SVG inside a div to position it on the right of the page). If you become competent with SVG you can make changes directly at the code, no need to use Illustrator to make little changes anymore.
When to use SVG
SVG is specially good for icons. You should try to use it every time you can. There is an png icon on your web? change it and convert it to SVG.
How to improve your server speed with SVG icons
Think, when you enter a webpage and your browser has to download images from the server, these occur via HTTP GET request. While making request, the server can be slowly due to some reasons or you computer can have a slow internet connection resulting in a slow load time. When you use SVG you are reducing the number of petitions to the server.
Imagine that you have 10 PNG icons on your page, that results in 10 request more to the server, an increment of 0,300ms. You can get rid of that 0,300ms and make your web load faster using SVG icons. Now because your icons are part of the code and are sent to you via the html file, you are downloading only one archive and making only one petition to the server.
Here you have an example: this site, which I created for this case, is using 10 .png icons, downloaded from mdi-icons page, and it’s hosted on GitHub. When we use the inspector tool ( Ctrl + Shift + C) from our browser and go to network tab, we get the site’s loading speed in ms. You can see that there are a total of 12 request which result in a load time of 655ms.
Now if we visit the same site with svg icons notice what happened to all the request, they are gone and the load time is faster.
Well, we have gotten a really good result, we have gone from 655 miliseconds to 343 miliseconds! but also pay atention to the other parameters, all except DOMContentLoaded are faster. SVG let’s you icrease your site speed while increasing your icons quality, it is a win-win situation.
In the next section I will explain some others advantages of SVG.
Others advantages of SVG:
Quality and size
- Your will improve the quality of your site when the user makes zoom in the page icon the quality will be the same.
- You will forget about colour profiles (ICC profiles) since the colour is read directly from the code and profile is defined by the browser.
- SVG is made of text, text always means less consumption of resources and the lesser weight of all of kind data types. You will gain some free space on your server and remember text can be compressed to the maximum (if you server have some kind of compression) bitmap images can’t be compressed to maximum, just a tinny fraction.
SVG will Increase your workflow
- As we have talked before you can make direct changes to the code, no need to open your favourite vector software to retouch it, save and upload the img to a server again.
- You can share your vectors easily via e-mail with your teammates or you just can copy it directly from the source code of the page in case you don’t have access to the archive.
You can animate SVG with CSS
- Yep, you can animate SVG with CSS, say goodbye to GIFs embrace the code. For example you can change the colour of some path from your SVG when hovering the mouse. This opens you to a world of new possibilities the limit it’s on the code side.
You can use text inside SVG
- You can put text in it and modify it as you desire. It’s selectable and also you can make curved text.
You empower you brand against illicit use of your logo by commons folks
- SVG are a double-edged sword, the common folks are not going to be able to download any image from your site, it will be almost impossible to them figure it out how to print and modify your logo; but people with techie knowledge can use it instantly instead of having to recreate it again from an image.
Conclusion
You should always try to use SVG in web development. They are fast, they have the most quality of all img formats and they are easy to implement, and you server will have less request to attend.
