Inline SVG

    

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.

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.

``html


`
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 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;
}

// 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 alt text and add in an aria-labelledby attribute and