SVG for Everybody
To use it now, include the script in your document.
To support Internet Explorer 6-8, include the legacy script instead.
As of v2.0.0, you must manually call
svg4everybody(). If you are using an AMD/CommonJS dependency loader then you may call it within the callback closure.
IE 6-8 require you to put the script in the
<head> in order to shiv
<use> elements. For best results in IE, set X-UA-Compatible to
ie=edge. This can be done with a response header from the server or the following HTML in the
Create an SVG image.
This spritemap displays fine in Chrome, Safari 7.1+, Firefox, and Opera. SVG for Everybody polyfills the experience in Safari 6, IE 6+, and Edge 12.
IE 6-8 requires a trailing slash
/ when using a self-closing
Browsers not supporting SVG fallback to images.
By default, fallback images point to a PNG file in the same location as the SVG, only with the
# hash replaced by a
. dot and then appended with a
.png extension. If you want to change this behavior, you can define your own fallback.
<use> elements that are descendants of an
<svg> are checked for external content. If you want to change this behavior, you can define your own validator.
You can override whether the script polyfills External Content at all (
polyfill), or whether SVG should even be used over fallback images (
Use of the
nosvg option will requires you to use the legacy version of SVG for Everybody.
Modern browsers support external content in SVGs, except Edge. No frets; we can shim it.
|*||Opera Mini 8+||✔||✔||—|
|And||And. Browser 40+||✔||✔||—|
|And||And. Browser 4.1+||✔||✖||✔|
|Win||IE 9 - 11||✔||✖||✔|
|Win||IE 6 - 8||✖||✖||✔|
As you can see, all major browsers support external content.
We had been waiting on Edge, previously, but David Storey, Edge’s project manager assured us that native support for external content in SVGs was high on their checklist. We would track progress and vote for attention to this issue. Then, just as I predicted...
I have complete faith in the Microsoft Edge team and absolutely expect support to arrive within the next few months.
— Jon Neal (August, 2015)
All of our dreams came true.
Readability and accessibility
SVGs are compelling to use for many reasons, and one of them is their ease of accessibility.
Within your spritemap, have each sprite use a
<title> element to identify itself.
All together, use the
title attribute in your document and the
title element in your SVG.
ARIA roles may also be used to provide even more information to assistive technology.
When a sprite is merely decoration, use
Find me on Twitter
role="img" and remember to add a description.
- Tips for creating accessible SVG
- Using ARIA to enhance SVG accessibility
- SVG symbol a good choice for icons
- Implementing inline SVG Icons
SVG files, especially exported from vector tools, often contain tons of unnecessary data such as editor metadata, comments, hidden elements, and other stuff that can be safely removed without affecting SVG rendering result.
Use a tool like SVGO to optimize SVG spritemaps.
$ [sudo] npm install -g svgo$ svgo spritemap.svg