Scalable Vector Graphics

SVG Fallback with PNG Images

<img src="spacer.png" class="image">	

.image {
    background: url('img/image.png');
    background-image: url('img/image.svg'), none;
}	

.image {
    background:url('img/image.png') no-repeat;
    width:22px;
    height:22px;
}
.image {
    background:url('img/image.svg') no-repeat;
    background-size:22px 22px;
}	

Working Folders

svg_icon/
|__original/
|    |__16/
|    |__22/
|__modified/
|__optimized/	

Edit SVG

1. https://superuser.com/question[...]l-data-from-svg-file^[link1]
   • The easiest way to do this is to save the file as an Optimized SVG file. This option is available in the Save As... dialog dropdown. When you click save a dialog will popup asking you what to remove. Make sure the box Keep Editor Data is left unchecked.

Icon sets

1. https://github.com/KDE/breeze-icons (LGPLv3)
2. http://www.entypo.com/ (CC BY-SA 4.0)

Sources

1. http://www.w3.org/TR/SVG2/
2. https://de.wikipedia.org/wiki/Scalable_Vector_Graphics
3. http://caniuse.com - SVG Browser Support
4. https://inkscape.org - SVG editor
5. SVGCleaner^[link2] - optimize SVGs