Convert SVG Image Into Inline SVG Code - iSVG

iSVG is a configurable SVG To Inline plugin which converts SVG images into inline SVG codes so that you can apply custom CSS styles & animations to shape elements.

With a fallback to a PNG file when the SVG image is not found.

See also:

• jQuery Plugin To Make SVG Images Inline - svg-to-inline
• Replace SVG Image With SVG Code - jQuery Inline-SVG
• Apply CSS Animations To SVG Images - Inline SVG
• Convert SVG Images Into Inline SVG Elements - jQuery SVG Convert
•  

How to use it:

1. Embed your SVG image into img tag or data-src attribute as follows:

<img class="isvg" src="example.svg">

<div class="isvg" data-src="example.svg"></div>

2. Download and load the isvg.js script after the latest jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/isvg.js"></script>

3. Initialize the plugin and done.

$(function(){
  $.isvg();
});

4. This will replace the SVG image with the full SVG markup:

<svg ...>
  ...
</svg>

5. Execute a callback function when the conversion is complete

function myCallback ( e ) {
  console.log( "onISVG", e );
}

$.isvg(myCallback);

6. Execute a callback function when the conversion is complete

function myCallback ( e ) {
  console.log( "onISVG", e );
}

$.isvg(myCallback);

7. Customize the file format of the fallback image. Default: png.

$.isvg.fallbackFormat( "jpg" );

8. Make the inline SVG should inherit Id and Class values from the SVG image.

$.isvg.inheritClass( false );
$.isvg.inheritId( true );

---

This awesome jQuery plugin is developed by Cygraph. For more Advanced Usages, please check the demo page or visit the official website.