Replace SVG Image With SVG Code - jQuery Inline-SVG

Inline-SVG is a simple lightweight jQuery plugin to replace <img> embed SVG images with inline SVG elements.

How it works:

• Fill cache by src with promise.
• Replace img with svg when cached promise resolves.

See also:

• jQuery Plugin To Make SVG Images Inline - svg-to-inline

How to use it:

1. Install & download the Inline-SVG plugin.

# NPM
$ npm install jquery-inline-svg --save

2. Place the main JavaScript file index.js after jQuery.

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

3. Embed an SVG file into your page.

<img src="410.svg" alt="404">

4. Call the function and the plugin will do the rest.

$(function(){

  $('img').inlineSvg();

});

5. This will replace the 410.svg with the following SVG code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"></path> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"></path> 
  <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle">410</text>
</svg>

Changelog:

2019-03-21

• update package.json "main" field and add "module" field

 

---

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