Replace SVG Image With SVG Code - jQuery Inline-SVG

Replace SVG Image With SVG Code - jQuery Inline-SVG
File Size: 39.9 KB
Views Total: 2201
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

How to use it:

1. Install & download the Inline-SVG plugin.

$ npm install jquery-inline-svg --save

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

<script src="" 
<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.




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

<svg xmlns="" 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>



  • 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.