Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonathantneal/svg4everybody
Use external SVG spritemaps today
https://github.com/jonathantneal/svg4everybody
Last synced: about 2 months ago
JSON representation
Use external SVG spritemaps today
- Host: GitHub
- URL: https://github.com/jonathantneal/svg4everybody
- Owner: jonathantneal
- License: other
- Created: 2014-05-12T21:18:05.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T09:10:06.000Z (8 months ago)
- Last Synced: 2024-07-19T13:37:50.932Z (2 months ago)
- Language: JavaScript
- Homepage: https://jonneal.dev/svg4everybody/
- Size: 178 KB
- Stars: 3,293
- Watchers: 77
- Forks: 354
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SVG for Everybody
[![NPM Version][npm-img]][npm] [![Build Status][ci-img]][ci]
[SVG for Everybody] adds [SVG External Content] support to [all browsers].
To use it now, include the script in your document.
```html
svg4everybody(); // run it now or whenever you are ready
```
To support Internet Explorer 6-8, include the legacy script instead.
```html
svg4everybody(); // run it now or whenever you are ready
```
_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 `` in order to shiv `` and `` 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 ``.
```html
```
## Usage
Create an SVG image.
**map.svg:**
```html
CodePen
YouTube
Twitter
```
This spritemap displays fine in **Chrome**, **Safari 7.1+**, **Firefox**, **Edge 13+**, **Opera**. [SVG for Everybody] polyfills the experience in **Safari 6**, **IE 6+**, and **Edge 12**.
```html
```
*IE 6-8 requires a trailing slash `/` when using a self-closing `` element.*
Browsers not supporting SVG fallback to images.
```html
```
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.
```js
svg4everybody({
fallback: function (src, svg, use) {
// src: current href String
// svg: current SVG Element
// use: current USE Element
return 'fallback.png'; // ok, always return fallback.png
}
});
```
All `` elements that are descendants of an `` are checked for external content. If you want to change this behavior, you can define your own validator.
```js
svg4everybody({
validate: function (src, svg, use) {
// src: current href String
// svg: current SVG Element
// use: current USE Element
return true; // ok, everything is valid
}
});
```
You can override whether the script polyfills External Content at all (`polyfill`), or whether SVG should even be used over fallback images (`nosvg`).
```js
svg4everybody({
nosvg: true, // shiv and elements and use image fallbacks
polyfill: true // polyfill elements for External Content
});
```
*Use of the `nosvg` option will requires you to use the legacy version of SVG for Everybody.*
## Implementation status
Modern browsers support external content in SVGs, *except Edge*. No frets; we can shim it.
| OS | Browser | SVG | External Content | Shimmed |
|:---:|-------------------|:---:|:----------------:|:-------:|
| * | Chrome 21+ | ✔ | ✔ | — |
| * | Chrome 14-20 | ✔ | ✖ | ✔ |
| * | Firefox 4+ | ✔ | ✔ | — |
| * | Opera 23+ | ✔ | ✔ | — |
| * | Opera Mini 8+ | ✔ | ✔ | — |
| And | And. Browser 40+ | ✔ | ✔ | — |
| And | And. Browser 4.1+ | ✔ | ✖ | ✔ |
| iOS | iOS 8.1+ | ✔ | ✔ | — |
| iOS | iOS 6-7 | ✔ | ✖ | ✔ |
| OSX | Saf 7.1+ | ✔ | ✔ | — |
| OSX | Saf 6 | ✔ | ✖ | ✔ |
| Win | Edge 13+ | ✔ | ✔ | — |
| Win | Edge 12 | ✔ | ✖ | ✔ |
| 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 `` element to identify itself.
```html
CodePen
```
When this sprite is used, its title will be read aloud in [JAWS](http://www.freedomscientific.com/products/fs/JAWS-product-page.asp) and [NVDA](http://www.nvaccess.org/). Then, within your document, each sprite may use a `title` attribute to identify itself.
```html
```
That title will be read aloud in [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) and [NVDA](http://www.nvaccess.org/). At present, the `title` attribute is the only way to properly read aloud an SVG in VoiceOver. I’ll let you know if this changes.
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 `role="presentation"`.
```html
Find me on Twitter
```
Otherwise, use `role="img"` and remember to add a description.
### Further reading
- [Tips for creating accessible SVG](https://www.sitepoint.com/tips-accessible-svg/)
- [Using ARIA to enhance SVG accessibility](http://blog.paciellogroup.com/2013/12/using-aria-enhance-svg-accessibility/)
- [SVG symbol a good choice for icons](http://css-tricks.com/svg-symbol-good-choice-icons/)
- [Implementing inline SVG Icons](https://kartikprabhu.com/article/inline-svg-icons)
## Optimized SVGs
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.
```bash
$ [sudo] npm install -g svgo
$ svgo spritemap.svg
```
[ci]: https://travis-ci.org/jonathantneal/svg4everybody
[ci-img]: https://img.shields.io/travis/jonathantneal/svg4everybody.svg
[npm]: https://www.npmjs.com/package/svg4everybody
[npm-img]: https://img.shields.io/npm/v/svg4everybody.svg
[all browsers]: http://caniuse.com/svg
[David Storey]: https://twitter.com/dstorey/status/626514631884804096
[dreams came true]: https://dev.windows.com/en-us/microsoft-edge/platform/changelog/desktop/10586/?compareWith=10240
[SVG External Content]: http://css-tricks.com/svg-sprites-use-better-icon-fonts/##Browser+Support
[SVG for Everybody]: https://github.com/jonathantneal/svg4everybody
[SVGO]: https://github.com/svg/svgo
[track progress]: http://dev.modern.ie/platform/status/svgexternalcontent/?filter=f3e0000bf&search=svg
[vote for attention]: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263916-svg-external-content
[X-UA-Compatible]: http://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible