https://github.com/bpierre/webkit-svg-fixer
Fix SVG in WebKit browsers by forcing the rendering of images embedded in SVG docs.
https://github.com/bpierre/webkit-svg-fixer
Last synced: 12 months ago
JSON representation
Fix SVG in WebKit browsers by forcing the rendering of images embedded in SVG docs.
- Host: GitHub
- URL: https://github.com/bpierre/webkit-svg-fixer
- Owner: bpierre
- Created: 2013-03-07T17:29:38.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2013-03-08T15:43:55.000Z (over 13 years ago)
- Last Synced: 2025-06-13T10:56:12.136Z (12 months ago)
- Language: JavaScript
- Homepage: http://pierrebertet.net/webkit-svg-fixer/demo/
- Size: 590 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# WebKit SVG Fixer
Fix SVG images in WebKit browsers.
When an SVG file is not directly in the HTML document (img element, CSS background), WebKit do not display the embedded xlink references (e.g. images), unless the SVG has already been displayed directly in the document.
WebKit SVG Fixer uses this to force the display on WebKit, by inserting hidden SVGs in the document (as `` elements).
- Info: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
- Demo: http://pierrebertet.net/webkit-svg-fixer/demo/
## Installation
### With [component](https://github.com/component/component#readme)
$ component install bpierre/webkit-svg-fixer
### Old Fashion (standalone, AMD)
- Development: [dist/webkit-svg-fixer.js](https://raw.github.com/bpierre/webkit-svg-fixer/master/dist/webkit-svg-fixer.js)
- Production: [dist/webkit-svg-fixer.min.js](https://raw.github.com/bpierre/webkit-svg-fixer/master/dist/webkit-svg-fixer.min.js)
**Note**: if you use this library standalone, the main object, `webkitSvgFixer`, will be attached to the `window`. You can access it with `window.webkitSvgFixer` or just `webkitSvgFixer`, and call the functions on it, e.g. `webkitSvgFixer.fixall()`.
## Quick Start
Just call the main object directly: `require('webkit-svg-fixer')()`, or `window.webkitSvgFixer()`.
## API
### fixall(options)
Fix images in all SVGs embedded as `
`. If the browser is not webkit, it does nothing.
You can provide some options:
- `webkitTest`: Custom WebKit test (Function or Boolean, default: tests `/webkit/` in the user agent string)
- `fixImages`: Fix SVG in image elements (Boolean, default: true)
- `fixBackgrounds`: Fix SVG in CSS backgrounds (Boolean, default: true)
Example:
```js
var svgFixer = require('webkit-svg-fixer');
svgFixer.fixall({
fixBackgrounds: false // Don’t search in CSS backgrounds
});
```
### fixsvg(url)
Fix a single SVG URL. You can safely call it multiple times with the same URL, only one `` will be inserted. **You have to test WebKit before calling this function.**
```js
svgFixer.fixsvg('http://example.com/my-image.svg');
```
### fiximages(images)
Fix all `![]()
` ending with `.svg` in the document. You can also provide the images you want, as a CSS selector or a NodeList. **You have to test WebKit before calling this function.**
```js
// CSS selector
svgFixer.fiximages('img.svg');
// NodeList
var images = document.getElementsByClassName('svg-image');
svgFixer.fiximages(images);
```
## FAQ
### What are the differences with [dirkweber’s flattensvg](https://github.com/dirkweber/flattensvg.js)?
WebKit SVG Fixer does less. The main goal of flatten SVG is to convert external images in base64. Also, it does Ajax requests for testing the browser cache. WebKit SVG Fixer exposes an API which lets you do what you want.
## Credits
* [flattensvg](https://github.com/dirkweber/flattensvg.js)
## License
[MIT](http://pierre.mit-license.org/)