diff --git a/README.md b/README.md index af7d24a..7e76521 100644 --- a/README.md +++ b/README.md @@ -4,57 +4,51 @@ Takes an inline `` with an SVG as its source and swaps it for an inline `` so you can manipulate the style of it with CSS/JS etc. -Based on this [Stack Overflow](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement) post's answer by [Drew Baker](http://stackoverflow.com/users/503546/drew-baker) with some enhancements from myself and [Oliver Farrell](https://github.com/oliverfarrell). - ## How to use -Use an `` tag in your HTML to embed an SVG graphic. Use something like Adobe Illustrator to make the graphic and save out the SVG file. - -`` +Add the Inline SVG script to your page and initialise the script. You can currently pass two options to the script: `svgSelector` and `initClass`. If these are left out the script will use the defaults. -This is just like how you'd embed a normal image. Note that you need to set the `` to have a class of svg. You can have more than one class, but the svg class is required. The ID is not required. +``` + + +``` -What the code does is look for all ``s with a class of svg and replaces them with the inline SVG from the linked file. You can now manipulate the ANY part of the SVG, be it the `` or a group (``). See below: +The script will look for any `` with a class that matches the `svgSelector` parameter and replace it with the SVG's source. Doing this enables you to manipulate the SVG with CSS and JavaScript. +```html + ``` + +```css svg:hover path { fill: #c00; } -``` -Because the code also ports across the original images ID and classes, this CSS works too: - -``` +// or #logo:hover path { fill: #c00; } ``` -For increased accessibility the code will copy across the ``'s alt text and add in an `aria-label` and `` to the SVG as per the [W3C's guidelines](http://www.w3.org/TR/SVG-access/) on SVG accessibility. +Any additional attributes (`height`, `width`, `data-*`, etc) will be copied to the SVG. For increased accessibility the script will also copy across the `<img>` alt text and add in an `aria-labelledby` attribute and `<title>` element to the SVG. If you give the `<img>` a `longdesc` attribute, a `<desc>` will also be added as per the [W3C's guidelines](http://www.w3.org/TR/SVG-access/) on SVG accessibility. For a live demo check out this [example on CodePen](http://codepen.io/jonnyhaynes/pen/VYqroO). ## Bower -If you're using [Bower](bower.io) to manage your front-end dependencies you can include this plugin as a component. Include `"inline-svg": "1.2.0"` in your `bower.json` file and run `bower install`. +If you're using [Bower](bower.io) to manage your front-end dependencies you can include this plugin as a component. Include `"inline-svg": "2.0.0"` in your `bower.json` file and run `bower install`. ## NPM If you're using NPM to manage your dependencies you can include this plugin as a module. Just run `npm install inline-svg`. -## Browser support - -As the script utilises `querySelectorAll` to grab all the instances of `<img class="svg" />` the browser support matrix looks something like this: - -- Internet Explorer 8+ -- Firefox 3.5+ -- Chrome 4+ -- Safari 3.1+ -- Opera 10.1+ - -However it's recommended that you check inline SVG browser support [here](http://caniuse.com/#search=inline%20svg) as it's not necessarily the same as above. - ## Changelog +- **21/07/15:** 2.0.0 - Major upgrade. Added AMD support and fixed a long standing issue that would result in a warning in Google Chrome as we weren't handling the GET requests asynchronously. - **18/06/15:** 1.2.0 – Converted to a Node.js module - **19/03/15:** 1.0.5 – Cleaning code to comply with Code Climate - **16/12/14:** 1.0.4 – Updated README with new CodePen demo and added an extra line regarding browser support. Changed `aria-label` to `aria-labelledby` and also added `role="img"` for better accessibility. diff --git a/demo/index.html b/demo/index.html index afb2cc5..15d008c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,7 +12,7 @@ </head> <body> <img src="twitter.svg" width="20" height="20" alt="Twitter Icon" class="svg another-class"> - <img src="facebook.svg" width="20" class="svg a-class"> + <img src="facebook.svg" width="20" class="svg a-class" alt="Facebook Icon" longdesc="A longer description of the image."> <script src="../dist/inlineSVG.min.js"></script> <script> diff --git a/dist/inlineSVG.min.js b/dist/inlineSVG.min.js index d52fc8a..dbfffef 100644 --- a/dist/inlineSVG.min.js +++ b/dist/inlineSVG.min.js @@ -1 +1 @@ -!function(a,b){"function"==typeof define&&define.amd?define([],b(a)):"object"==typeof exports?module.exports=b(a):a.inlineSVG=b(a)}("undefined"!=typeof global?global:this.window||this.global,function(a){"use strict";var b,c={},d=!!document.querySelector&&!!a.addEventListener,e={initClass:"js-inlinesvg",svgSelector:"img.svg"},f=function(a){var b={},c=!1,d=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(c=arguments[0],d++);for(var f=function(a){for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&(c&&"[object Object]"===Object.prototype.toString.call(a[d])?b[d]=buoy.extend(!0,b[d],a[d]):b[d]=a[d])};e>d;d++){var g=arguments[d];f(g)}return b};return c.getAll=function(){var a=document.querySelectorAll(b.svgSelector);return a},c.inliner=function(){var a=c.getAll();Array.prototype.forEach.call(a,function(a,b){var c=a.src,d=a.attributes,e=new XMLHttpRequest;e.open("GET",c,!0),e.onload=function(){if(e.status>=200&&e.status<400){var b=new DOMParser,c=b.parseFromString(e.responseText,"text/xml"),f=c.getElementsByTagName("svg")[0];if(f.removeAttribute("xmlns:a"),f.removeAttribute("width"),f.removeAttribute("height"),f.removeAttribute("x"),f.removeAttribute("y"),f.removeAttribute("enable-background"),f.removeAttribute("xmlns:xlink"),f.removeAttribute("xml:space"),f.removeAttribute("version"),Array.prototype.slice.call(d).forEach(function(a){"src"!==a.name&&"alt"!==a.name&&f.setAttribute(a.name,a.value)}),f.classList?f.classList.add("inlined-svg"):f.className+=" inlined-svg",d.alt){f.setAttribute("aria-labelledby","title"),f.setAttribute("role","img");var g=document.createElementNS("http://www.w3.org/2000/svg","title"),h=document.createTextNode(d.alt.value);g.appendChild(h),f.insertBefore(g,f.firstChild)}a.parentNode.replaceChild(f,a)}else console.error("There was an error retrieving the source of the SVG.")},e.onerror=function(){console.error("There was an error connecting to the origin server.")},e.send()})},c.init=function(a){d&&(b=f(e,a||{}),c.inliner(),document.documentElement.className+=" "+b.initClass)},c}); \ No newline at end of file +!function(a,b){"function"==typeof define&&define.amd?define([],b(a)):"object"==typeof exports?module.exports=b(a):a.inlineSVG=b(a)}("undefined"!=typeof global?global:this.window||this.global,function(a){"use strict";var b,c={},d=!!document.querySelector&&!!a.addEventListener,e={initClass:"js-inlinesvg",svgSelector:"img.svg"},f=function(a){var b={},c=!1,d=0,e=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(c=arguments[0],d++);for(var f=function(a){for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&(c&&"[object Object]"===Object.prototype.toString.call(a[d])?b[d]=buoy.extend(!0,b[d],a[d]):b[d]=a[d])};e>d;d++){var g=arguments[d];f(g)}return b};return c.getAll=function(){var a=document.querySelectorAll(b.svgSelector);return a},c.inliner=function(){var a=c.getAll();Array.prototype.forEach.call(a,function(a,b){var c=a.src,d=a.attributes,e=new XMLHttpRequest;e.open("GET",c,!0),e.onload=function(){if(e.status>=200&&e.status<400){var b=new DOMParser,c=b.parseFromString(e.responseText,"text/xml"),f=c.getElementsByTagName("svg")[0];if(f.removeAttribute("xmlns:a"),f.removeAttribute("width"),f.removeAttribute("height"),f.removeAttribute("x"),f.removeAttribute("y"),f.removeAttribute("enable-background"),f.removeAttribute("xmlns:xlink"),f.removeAttribute("xml:space"),f.removeAttribute("version"),Array.prototype.slice.call(d).forEach(function(a){"src"!==a.name&&"alt"!==a.name&&f.setAttribute(a.name,a.value)}),f.classList?f.classList.add("inlined-svg"):f.className+=" inlined-svg",f.setAttribute("role","img"),d.longdesc){var g=document.createElementNS("http://www.w3.org/2000/svg","desc"),h=document.createTextNode(d.longdesc.value);g.appendChild(h),f.insertBefore(g,f.firstChild)}if(d.alt){f.setAttribute("aria-labelledby","title");var i=document.createElementNS("http://www.w3.org/2000/svg","title"),j=document.createTextNode(d.alt.value);i.appendChild(j),f.insertBefore(i,f.firstChild)}a.parentNode.replaceChild(f,a)}else console.error("There was an error retrieving the source of the SVG.")},e.onerror=function(){console.error("There was an error connecting to the origin server.")},e.send()})},c.init=function(a){d&&(b=f(e,a||{}),c.inliner(),document.documentElement.className+=" "+b.initClass)},c}); \ No newline at end of file diff --git a/src/inlineSVG.js b/src/inlineSVG.js index 42c0e9d..9adb795 100755 --- a/src/inlineSVG.js +++ b/src/inlineSVG.js @@ -130,9 +130,18 @@ } // Add in some accessibility quick wins + inlinedSVG.setAttribute('role', 'img'); + + if(attributes.longdesc) { + var description = document.createElementNS('http://www.w3.org/2000/svg', 'desc'), + descriptionText = document.createTextNode(attributes.longdesc.value); + + description.appendChild(descriptionText); + inlinedSVG.insertBefore(description, inlinedSVG.firstChild); + } + if(attributes.alt) { inlinedSVG.setAttribute('aria-labelledby', 'title'); - inlinedSVG.setAttribute('role', 'img'); var title = document.createElementNS('http://www.w3.org/2000/svg', 'title'), titleText = document.createTextNode(attributes.alt.value);