jQuery Plugin For Easier SVG Image / Sprite Embedding - svgSwap

svgSwap is a jQuery SVG embedding plugin used to build and return SVG content from single SVG file and/or SVG sprite file that will replace referencing element using XMLHttpRequest. Then you can easily apply your own styles to the SVG images / sprites in the CSS.

See also:

• Convert SVG Images Into Inline SVG Elements - jQuery SVG Convert
• jQuery Plugin To Make SVG Images Inline - svg-to-inline
• jQuery Plugin To Apply Custom CSS Styles To SVG - SVG.js

Installation via NPM:

$ npm install jquery-embedSvg

How to use it:

1. Install the svgSwap via NPM or load the latest version of jQuery library and the jQuery svgSwap plugin in the document as usual.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.svgSwap.js"></script>

2. Embed your SVG images and SVG sprites into the webpage as follows:

<i src="binoculars.svg" width="80" height="80" class="svg-swap">
<i src="heart.svg" width="30" height="30" class="svg-swap">
<i src="phone.svg" width="44" height="44" class="svg-swap">

<i src="symbol-defs.svg" sprite-symbol="icon-office" class="svg-swap" width="32" height="32"></i>
<i src="symbol-defs.svg" sprite-symbol="icon-newspaper" class="svg-swap" width="80" height="80"></i>
<i src="symbol-defs.svg" sprite-symbol="icon-compass" class="svg-swap" width="32" height="32"></i>

3. Initialize the plugin on document ready and done.

$('.svg-swap').svgSwap();

4. Style the SVG paths whatever you wish.

.sprites svg path {
  fill: red;
}

5. Enable / disable the caching functionality.

$('.svg-swap').svgSwap({
  disableCache: true
});

---

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