Home

Awesome

Inline SVG

Build Status Code Climate npm Bower Dependency Status

Takes an inline <img> with an SVG as its source and swaps it for an inline <svg> so you can manipulate the style of it with CSS/JS etc.

How to use

Add the Inline SVG script to your page and initialise the script. You can currently pass three options to the script: svgSelector and initClass. If these are left out the script will use the defaults.

<script src="inlineSVG.min.js"></script>
<script>
inlineSVG.init({
  svgSelector: 'img.svg', // the class attached to all images that should be inlined
  initClass: 'js-inlinesvg', // class added to <html>
}, function () {
  console.log('All SVGs inlined');
});
</script>

The callback is optional and is only fired if all the images in the selection are successfully inlined. On the other hand the initClass is applied after the first successful replacement.

The script will look for any <img> 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.

<img id="logo" class="svg" src="/images/logo.svg" alt="Some awesome company" />
svg:hover path {
  fill: #c00;
}

// or
#logo:hover path {
  fill: #c00;
}

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 on SVG accessibility.

<del>For a live demo check out this example on CodePen.</del> The demo is still there it's just way out of date and needs updating.

Performance

By default, the image will be requested twice, once for initial load and secondly for requesting the SVG markup. A more efficent way to set this up would be to have your image src in a data-src attribute, this will prevent the initial request of the image.

<img id="logo" class="svg" data-src="/images/logo.svg" alt="Some awesome company" />

The most harmful side effect of implementing Inline SVG this way is that if your Javascript fails or otherwise doesn't run, the image won't show at all. In the default setup, the image would still load.

Bower

If you're using Bower to manage your front-end dependencies you can include this plugin as a component. Include "inline-svg": "2.2.3" 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 --save-dev inline-svg. You can then require the plugin as shown below.

var inlineSVG = require('inline-svg');

inlineSVG.init({
  svgSelector: 'img.svg', // the class attached to all images that should be inlined
  initClass: 'js-inlinesvg', // class added to <html>
}, function () {
  console.log('All SVGs inlined');
});

Changelog