Simple jQuery SVG Image Replacement Plugin - replacesvg

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.