{"_id":"svg-injector","_rev":"10-3222cdb23143556940f3c3c7997d334e","name":"svg-injector","description":"Fast, caching, dynamic inline SVG DOM injection library","dist-tags":{"latest":"1.1.3"},"versions":{"1.1.2":{"name":"svg-injector","description":"Fast, caching, dynamic inline SVG DOM injection library","version":"1.1.2","author":{"name":"Iconic","email":"yourfriends@useiconic.com","url":"https://useiconic.com/"},"main":"svg-injector.js","homepage":"https://github.com/iconic/SVGInjector","repository":{"type":"git","url":"https://github.com/iconic/SVGInjector"},"keywords":["SVG","Scalable Vector Graphics","SVG injector","images","img","html","DOM"],"license":"MIT","devDependencies":{"jshint":"^2.5.0","uglify-js":"^2.4.13","github-changes":"0.0.11"},"scripts":{"test":"jshint svg-injector.js","build":"uglifyjs ./svg-injector.js --stats --compress --mangle --comments --output ./svg-injector.min.js --source-map svg-injector.map.js && mv -f svg-injector.{map,min}.js ./dist","changelog":"github-changes -o iconic -r SVGInjector --use-commit-body","changelog-post":"git add CHANGELOG.md && git commit -m 'Updated CHANGELOG'","release":"for TASK in (test build changelog changelog-post tag); do npm run $TASK; done","tag":"git tag ${npm_package_version} && git push --tags","test-version":"bash -c 'echo $npm_package_version'"},"gitHead":"9f25052fcc815aa719ba86506470b6ac2003612a","bugs":{"url":"https://github.com/iconic/SVGInjector/issues"},"_id":"svg-injector@1.1.2","_shasum":"0e7eaeddd1c1ec15fd1ae3a20750fe7e13ac366a","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"iconic","email":"yourfriends@useiconic.com"},"maintainers":[{"name":"iconic","email":"yourfriends@useiconic.com"}],"dist":{"shasum":"0e7eaeddd1c1ec15fd1ae3a20750fe7e13ac366a","tarball":"https://registry.npmjs.org/svg-injector/-/svg-injector-1.1.2.tgz","integrity":"sha512-BQ5WK9w6+wChsTe2ef0LSfUgB4I+UQjcgkWJSQFH0nSYKRv/aOwS8tRU4TuwhuffnNhgvo5gOaUPpaU9hgXE3Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3l8sogen30FILnjLGi+NYTuENG4NgUjf0L5CJ5oyN+AiEA6KQXNi+dPJEDkWwqQ5RZLkaESKXosyzGcHe0MeYr7m0="}]}},"1.1.3":{"name":"svg-injector","description":"Fast, caching, dynamic inline SVG DOM injection library","version":"1.1.3","author":{"name":"Iconic","email":"yourfriends@useiconic.com","url":"https://useiconic.com/"},"main":"svg-injector.js","homepage":"https://github.com/iconic/SVGInjector","repository":{"type":"git","url":"https://github.com/iconic/SVGInjector"},"keywords":["SVG","Scalable Vector Graphics","SVG injector","images","img","html","DOM"],"license":"MIT","devDependencies":{"jshint":"^2.5.0","uglify-js":"^2.4.13","github-changes":"0.0.11"},"scripts":{"test":"jshint svg-injector.js","build":"uglifyjs ./svg-injector.js --stats --compress --mangle --comments --output ./svg-injector.min.js --source-map svg-injector.map.js && mv -f svg-injector.{map,min}.js ./dist","changelog":"github-changes -o iconic -r SVGInjector --use-commit-body","changelog-post":"git add CHANGELOG.md && git commit -m 'Updated CHANGELOG'","release":"for TASK in (test build changelog changelog-post tag); do npm run $TASK; done","tag":"git tag ${npm_package_version} && git push --tags","test-version":"bash -c 'echo $npm_package_version'"},"gitHead":"bd355bebb1903e1eac608883a8b5af5e7e6d5fd2","bugs":{"url":"https://github.com/iconic/SVGInjector/issues"},"_id":"svg-injector@1.1.3","_shasum":"8fba18d7419e5f818e712c4f82d83ee357610e61","_from":".","_npmVersion":"1.4.28","_npmUser":{"name":"iconic","email":"yourfriends@useiconic.com"},"maintainers":[{"name":"iconic","email":"yourfriends@useiconic.com"}],"dist":{"shasum":"8fba18d7419e5f818e712c4f82d83ee357610e61","tarball":"https://registry.npmjs.org/svg-injector/-/svg-injector-1.1.3.tgz","integrity":"sha512-ZHVssnE/NvBwk3K4dssl06qtejkcWgMrQV85a1bSviDO1P1bRVjQZZ6ObO/BE9jRmIHXx2KnvZBnWTMWC/StAw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvdAhb8gruZF54UArxO17OsuNswssF9G80QMCpu9s0wAIhAN/sN0J61ONLX16TsKWnwtDOznjBK6cbjxz+nTDycqoK"}]}}},"readme":"SVGInjector\n=========\n\nA fast, caching, dynamic inline SVG DOM injection library. Developed by [Waybury](http://waybury.com/) for use in [iconic.js](https://useiconic.com/tools/iconic-js/), part of the [Iconic](https://useiconic.com/) icon system.\n\n## Why?\nThere are a number of ways to use SVG on a page (`object`, `embed`, `iframe`, `img`, CSS `background-image`) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM. \n\nWrangling and maintaining a bunch of inline SVG on your pages isn't anyone's idea of good time, so **SVGInjector** lets you work with simple `img` tag elements (or other tag of your choosing) and does the heavy lifting of swapping in the SVG markup inline for you.\n\n## How?\n* Any DOM element, or array of elements, passed to **SVGInjector** with an SVG file `src` or `data-src` attribute will be replaced with the full SVG markup inline. The async loaded SVG is also cached so multiple uses of an SVG only requires a single server request.\n\n* Any embedded JavaScript in the SVG will optionally be extracted, cached and evaluated.\n\n> Development tip: The dynamic injection process uses AJAX calls to load SVG. If you are developing locally without running a local webserver, be aware that default browser security settings may [block these calls](http://wiki.fluidproject.org/display/fluid/Browser+settings+to+support+local+Ajax+calls).\n\n\n# Documentation\n\n## Install\n\n> **SVGInjector** is compatible with:\n  * [CommonJS](http://commonjs.org/) via `module.exports` for use with [Browserify](http://browserify.org/) or [Node](http://nodejs.org/)/[PhantomJS](http://phantomjs.org/)\n  * [AMD API](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) usage with [RequireJS](http://requirejs.org/)\n  * Plain ol' JavaScript via creation of a global function\n  \n### npm\n\n    npm install svg-injector\n\n### Bower\n\n    bower install svg-injector\n    \n### Manually\n\nDownload the [dist/svg-injector.min.js](https://github.com/iconic/SVGInjector/blob/master/dist/svg-injector.min.js) file from this repository and add it to your project.\n\n\n## Usage\n\n### Quick Start\n\nInclude the **SVGInjector** script on your page.\n\n```html\n<script src=\"svg-injector.min.js\"></script>\n```\n\nAdd some SVG `img` tags.\n\n```html\n<img class=\"inject-me\" src=\"image-one.svg\">\n<img class=\"inject-me\" src=\"image-two.svg\">\n```\n\nInject 'em.\n\n```html\n<script>\n  // Elements to inject\n  var mySVGsToInject = document.querySelectorAll('img.inject-me');\n\n  // Do the injection\n  SVGInjector(mySVGsToInject);\n</script>\n```\n\nThe `img` tags have now been replaced with the full SVG markup.\n\n\n### Configuration\n\nIn addition to passing elements to inject, an options object and callback function can optionally be defined.\n\n```js\nSVGInjector(elements, options, callback);\n```\n\n#### `elements`\n\nA single DOM element or array of elements, with `src` or `data-src` attributes defined, to inject.\n\n#### `options`\n\n```js\n{\n  evalScripts: [always|once|never],\n  pngFallback: [PNG directory],\n  each: [function]\n}\n```\n\n* `evalScript` - String\n\n  Should we run any script blocks found in the SVG?\n\n  * `always` - Run them every time.\n  * `once` - [default] Only run scripts once for each SVG file, even if it is used on a page more than once.\n  * `[false|'never']` - Ignore scripts\n\n* `pngFallback` - String\n\n  The directory where fallback PNGs are located for use if the browser doesn't [support SVG](http://caniuse.com/svg). This will look for a file with a `.png` extension matching the SVG filename defined in the `src` (or `data-src`).\n\n  For additional flexibility, per-element fallbacks are also [available](#per-element-png-fallback).\n\n* `each(svg)` - function\n\n  A function to call after each SVG is injected. Receives the newly injected SVG DOM element as a parameter.\n\n#### `callback(count)` - function\n\nA function to call once all the requested SVG elements have been injected. Receives a count of the total SVGs injected as a parameter.\n\n### Full Example\n\n```html\n<img id=\"image-one\" class=\"inject-me\" data-src=\"image-one.svg\">\n<img id=\"image-two\" class=\"inject-me\" data-src=\"image-two.svg\">\n```\n\n```js\n// Elements to inject\nvar mySVGsToInject = document.querySelectorAll('img.inject-me');\n\n// Options\nvar injectorOptions = {\n  evalScripts: 'once',\n  pngFallback: 'assets/png',\n  each: function (svg) {\n    // Callback after each SVG is injected\n    console.log('SVG injected: ' + svg.getAttribute('id'));\n  }\n};\n\n// Trigger the injection\nSVGInjector(mySVGsToInject, injectorOptions, function (totalSVGsInjected) {\n  // Callback after all SVGs are injected\n  console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');\n});\n```\n\n### Per-element PNG fallback\n\nSince you might be using a single SVG styled in multiple ways, you can also define per-element fallbacks by adding a `data-fallback` or `data-png` attribute to your `img` tags to define a unique PNG for each context.\n\nSee [examples/fallbacks](https://github.com/iconic/SVGInjector/tree/master/examples/fallbacks) for more details.\n\n```html\n<style>\n  .thumb-green {fill: #A6A93C;}\n</style>\n<img class=\"thumb-green inject-me\" data-src=\"svg/thumb-up.svg\" data-fallback=\"png/thumb-up-green.png\">\n\n```\n\n\n# Licence\nThe MIT License (MIT)\n\nCopyright (c) 2014-2015 Waybury\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","maintainers":[{"name":"iconic","email":"yourfriends@useiconic.com"}],"time":{"modified":"2022-06-27T02:33:52.594Z","created":"2014-12-16T07:50:26.482Z","1.1.2":"2014-12-16T07:50:26.482Z","1.1.3":"2015-06-23T23:18:13.935Z"},"homepage":"https://github.com/iconic/SVGInjector","keywords":["SVG","Scalable Vector Graphics","SVG injector","images","img","html","DOM"],"repository":{"type":"git","url":"https://github.com/iconic/SVGInjector"},"author":{"name":"Iconic","email":"yourfriends@useiconic.com","url":"https://useiconic.com/"},"bugs":{"url":"https://github.com/iconic/SVGInjector/issues"},"license":"MIT","readmeFilename":"README.md","users":{"iconic":true,"jondashkyle":true,"nilz3ro":true}}