| .. | ||
| .editorconfig | ||
| .jshintrc | ||
| bower.json | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| svg4everybody.js | ||
| svg4everybody.legacy.js | ||
SVG for Everybody
SVG for Everybody is a script that adds external spritemaps support to otherwise SVG-capable browsers.
To use svg4everybody, include the script in your document.
<script src="/path/to/svg4everybody.js"></script>
To support IE6-8 as well, include the legacy script instead.
<script src="/path/to/svg4everybody.legacy.js"></script>
The IE6-8 script needs to be included in the <head> 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>
This spritemap works fine in Chrome, Firefox, and Opera. SVG for Everybody 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>
Older browsers falls back 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.
Readability and accessibility
Within your spritemap, each sprite may use a <title> element to identify itself.
<symbol id="codepen"><title>CodePen</title><path etc.../></symbol>
When this sprite is used, its title will be read aloud in JAWS and NVDA. Then, within your document, each sprite 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.
ARIA roles may be used to provide even more accessibility. role="presentation" should be used when a sprite decorates other content.
<a href="//twitter.com/jon_neal"><svg role="presentation"><use xlink:href="sprite.svg#twitter"></svg> Find me on Twitter</a>
Alternatively, role="img" should be used when a sprite necessitates its own description.
<a href="//twitter.com/jon_neal"><svg title="Find me on Twitter" role="img"><use xlink:href="sprite.svg#twitter"></svg></a>
Futher reading
- Tips for creating accessible SVG
- Using ARIA to enhance SVG accessibility
- SVG symbol a good choice for icons
- Implementing inline SVG Icons
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