Replace SVG Image With SVG Code - jQuery Inline-SVG

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:

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>

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

  • Publication date: 26.03.2018
  • Source