Simple jQuery SVG Image Replacement Plugin - replacesvg
File Size: | Unknown |
---|---|
Views Total: | 689 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

replacesvg is a simple jQuery plugin for SVG Image Replacement for legacy browsers like IE 6/7/8. SVG is an XML-based vector image format that can be searched, indexed, scripted, and compressed. Web browsers which can display SVG images on web pages include Firefox, Internet Explorer (IE 9+), Opera, Safari and Google Chrome.
replacesvg comes with 2 modes:
- Graceful Degradation Mode: If browser support SVG, do nothing. If not, replace SVG Image with a common image format like png.
- Progressive Enhancement Mode: If browser support SVG, replace common image with a SVG Image. If not, do nothing.
How to use it:
1. Markup
<!-- Graceful Degradation Mode --> <img src="star.svg"alt="star" data-altimgsrc="star.png" class="js-replacesvg1"> <!-- Progressive Enhancement Mode --> <img src="star.png" alt="star" data-altimgsrc="star.svg" class="js-replacesvg2">
2. Include the latest jQuery library and replacesvg plugin on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.replacesvg.js"></script>
3. The javascript
<script> // Graceful Degradation Mode $(function(){ $('.js-replacesvg1').replacesvg({ defaultsvg: true }); }); // Progressive Enhancement Mode $(function(){ $('.js-replacesvg2').replacesvg({ defaultsvg: false }); }); </script>
This awesome jQuery plugin is developed by FiNGAHOLiC. For more Advanced Usages, please check the demo page or visit the official website.