svg4everybody

Name Modified Size
LICENSE.md3 years ago1.09 KB
README.md3 years ago3.75 KB
demo-symbol.html3 years ago1.55 KB
demo-symbol.svg3 years ago818
demo.html3 years ago1.63 KB
demo.svg3 years ago797
demo.svg.camera.png3 years ago3.44 KB
demo.svg.pencil.png3 years ago1.88 KB
eye.png3 years ago7.89 KB
svg4everybody.ie8.js3 years ago1.86 KB
svg4everybody.ie8.min.js3 years ago1015
svg4everybody.js3 years ago1.52 KB
svg4everybody.min.js3 years ago772

SVG for Everybody

Use external SVG spritemaps today. SVG for Everybody minds the gap between SVG-capable browsers and those which do not support [external SVG spritemaps](http://css-tricks.com/svg-sprites-use-better-icon-fonts/##Browser Support).

To use svg4everybody, add it in the <head> of your document.

<script src="/path/to/svg4everybody.ie8.min.js"></script>

Only IE6-8 require the script run this early, in order to shiv the svg and use elements.

If running the standard script in IE9-11, be sure to set X-UA-Compatible higher than IE8. This can be done with a response header or the following <meta> tag.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Usage

spritemap.svg:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="codepen" viewBox="0 0 64 64"><title>CodePen</title><path etc.../></symbol>
    <symbol id="youtube" viewBox="0 0 64 64"><title>YouTube</title><path etc.../></symbol>
    <symbol id="twitter" viewBox="0 0 64 64"><title>Twitter</title><path etc.../></symbol>
</svg>

The preceding spritemap may be referenced without assistance in Chrome, Firefox, and Opera. This script polyfills the experience in IE9-11.

<svg role="img" title="CodePen"><use xlink:href="spritemap.svg#codepen"></use></svg>
<svg role="img" title="YouTube"><use xlink:href="spritemap.svg#youtube"></use></svg>
<svg role="img" title="Twitter"><use xlink:href="spritemap.svg#twitter"></use></svg>

3 SVG logos

In IE6-8, the document markup is modified to fallback to PNG images.

<svg role="img" title="CodePen"><img src="spritemap.svg.codepen.png"></svg>
<svg role="img" title="YouTube"><img src="spritemap.svg.youtube.png"></svg>
<svg role="img" title="Twitter"><img src="spritemap.svg.twitter.png"></svg>

Fallback PNGs point to the same location as their corresponding SVGs, only with the # hash replaced by a . dot, and with an appended .png extension.

Individual labels

Markup SVG sprites with a combination of attributes and elements that best communicate their meaning to a variety of accessibility tools.

Within SVG markup, each sprite may use a <title> element to identify itself.

<g id="codepen"><title>CodePen</title><path etc.../></g>

This title will be read aloud in JAWS and NVDA.

Then, within document markup, each sprite reference may use a title attribute to identify itself.

<svg title="CodePen"><use xlink:href="spritemap.svg#codepen"></use></svg>

This title will be read aloud in VoiceOver and NVDA. At present, the title attribute is the only way to properly read aloud an SVG in VoiceOver.

For maximum compatibility, both the title attribute in the document and the title element in the SVG should be used.

Smaller SVGs

SVG files, especially exported from various editors, usually contains a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.

Use a tool like SVGO to optimize SVG spritemaps.

$ [sudo] npm install -g svgo
$ svgo spritemap.svg

The standard script is 1.29KB or 514B minified + gzipped. The IE6-8 compatible script (which also works for IE9+) is 1.63KB or 596B minified + gzipped.