SGV everybody love them but we need to compress them as well…

Remember always to compress the files before you go live.

You can use svgo gui https://github.com/svg/svgo-gui for win or mac to do the job.

vsg-compress.jpg

 

Remember always to compress the files before you go live.

You can use svgo gui https://github.com/svg/svgo-gui for win or mac to do the job.

Just open the application and drag your file into the windows but be carefull to have a copy of the original file.

Other way it is using an online application: http://petercollingridge.appspot.com/svg_optimiser

 

There are different ways to include the files into the page and will depend how much you need to control the images.

As a background as a sprite

I have being using svg sprites in the same way of a normal sprite for the web icons like social media and other small images.

For example the html markup can be:

<li class="tw"><a target="_blank" href="#">Twitter</a></li>

And the CSS:

.tw { /img/sprites-socialicons.svg) 0px 0px no-repeat;"}

 

The worst part of the sprites is to create the image with all the icons and get the posisioning but uploading the images to an online application can do the calculations for you.

I like https://icomoon.io/ a website where you can create a free account and upload the images and download in different formats with the html and css code. To find this functionality go to the iconMoonApp

The problem with this method is that it is limited the things you can do with svg image sometimes the opacity do the trick for the hover or to change a bit the color but if you need to more changes like use fill for instance then will be better to have the actual code of the svg and use css to change the style.

You can create the sgv exporting from Illustrator or the free form of http://www.inkscape.org/en/.

A good workflow will be take code from the exported svg and insterted into the html then start to replace all the inline style with css classes.

 

 

 

 

 

 

 

About the author
Eduardo Silva was born in Buenos Aires, Argentina, and has being living in London for the past 15 years. With a background in psychology he is a IT developer and the co-founder of open-ecommerce.org, a digital content social enterprise. His passion is digital story-telling and has created short films and documentaries to help people promote there ideas.