Major Project 2016

SVG Assets

At my prototype I used Font Awesome icons, but they are not represent all semantic links I have. So I’m going to develop several SVG icons for my prototype.

I need at least 4 new icons for seats reservation, for ‘change ticket’ option, for band tour and for ‘Alchemy’ album. For online use we need monocolor transparent SVG which will be visible on the dark and light background.

I also had to make symbols out of monochrome SVG and then save it.

This on-line tool reducing SVG code to make it lighter for on-line use.

The easiest CSS animation have been applaed to SVG icons at the first row of assets whicn scale and rotate SVG image:

.btn:hover .icon {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: scale(1);
 transform: scale(1);
 transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
 color: #fff;
}

I used online tool wich make SVG code lighter for online use. You put ready SVG icon, which have been exported from the Illustrator and paste it into this tool. Then it gives you SVG which looks the same as original, but the code of it much-much shorter.

Icon Fonts vs SVG Icons