This time I will share jQuery Plugin and tutorial about Replace SVG Image With SVG Code – jQuery Inline-SVG, hope it will help you in programming stack.
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.
How to use it:
1. Install & download the Inline-SVG plugin.
2 |
$ npm install jquery-inline-svg --save |
2. Place the main JavaScript file index.js after jQuery.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<script src="src/index.js"></script> |
3. Embed an SVG file into your page.
1 |
<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:
2 |
<path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"></path> |
3 |
<path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"></path> |
4 |
<text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle">410</text> |
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.
