Takes an inline image with an SVG as it's source and swaps it for an inline SVG
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.
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.
For a live demo check out this example on CodePen. The demo is still there it's just way out of date and needs updating.
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.
If you're using NPM to manage your dependencies you can include this plugin as a module. Just run npm install inline-svg.
initClass to the body each time an SVG is inlined.aria-label to aria-labelledby and also added role="img" for better accessibility.FAQs
Takes an inline image with an SVG as it's source and swaps it for an inline SVG
We found that inline-svg demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.