jQuery Plugin For Easier SVG Image / Sprite Embedding - svgSwap
File Size: | 17 KB |
---|---|
Views Total: | 534 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.