WackoWiki: Scalable Vector Graphics

https://wackowiki.org/doc     Version: 3 (28.02.2017 00:39)

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