basselin/svg.html

## svg.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>SVG</title>

    <style type="text/css">
    .svg {
        width: 100px;
        height: 100px;
    }
    .svg:hover path {
        fill: orange;
    }
    .svg.active path {
        fill: blue;
    }
    .svg.active:hover path {
        fill: red;
    }
    </style>
</head>
<body>
    <img src="twitter.svg" alt="Twitter" class="svg"/>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $(function($) {
        $('img.svg').each(function(){
            var $img = $(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            $.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = $(data).find('svg');

                // Add replaced image's ID to the new SVG
                if (typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if (typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass + ' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

                $svg.on('click', function() {
                    // fix: .toggleClass()
                    var className = $svg.attr('class');
                    if (className.indexOf('active') == -1) {
                        $svg.attr('class', className + ' active');
                    } else {
                        $svg.attr('class', className.replace(/\s*active/, ''));
                    }
                });
            }, 'xml');

        });
    });
    </script>
</body>
</html>

## twitter.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="#55ACEE" d="M26.1,6.2c-0.9,0.5-1.9,0.9-2.9,1.1c-0.8-0.9-2.1-1.5-3.4-1.5c-2.6,0-4.6,2.1-4.6,4.6c0,0.4,0,0.7,0.1,1.1
	c-3.9-0.2-7.3-2-9.6-4.8C5.3,7.4,5.1,8.2,5.1,9c0,1.6,0.8,3,2.1,3.9c-0.8,0-1.5-0.2-2.1-0.6v0.1c0,2.2,1.6,4.1,3.7,4.6
	c-0.4,0.1-0.8,0.2-1.2,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,1.8,2.3,3.2,4.3,3.2c-1.6,1.2-3.6,2-5.8,2c-0.4,0-0.7,0-1.1-0.1
	c2.1,1.3,4.5,2.1,7.1,2.1c8.5,0,13.2-7.1,13.2-13.2l0-0.6C25.3,9.8,26.1,9,26.7,8c-0.8,0.4-1.7,0.6-2.7,0.7
	C25,8.2,25.8,7.3,26.1,6.2z"/>
</svg>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8"/>
	<title>SVG</title>

	<style type="text/css">
	.svg {
	width: 100px;
	height: 100px;
	}
	.svg:hover path {
	fill: orange;
	}
	.svg.active path {
	fill: blue;
	}
	.svg.active:hover path {
	fill: red;
	}
	</style>
	</head>
	<body>
	<img src="twitter.svg" alt="Twitter" class="svg"/>

	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	$(function($) {
	$('img.svg').each(function(){
	var $img = $(this);
	var imgID = $img.attr('id');
	var imgClass = $img.attr('class');
	var imgURL = $img.attr('src');

	$.get(imgURL, function(data) {
	// Get the SVG tag, ignore the rest
	var $svg = $(data).find('svg');

	// Add replaced image's ID to the new SVG
	if (typeof imgID !== 'undefined') {
	$svg = $svg.attr('id', imgID);
	}
	// Add replaced image's classes to the new SVG
	if (typeof imgClass !== 'undefined') {
	$svg = $svg.attr('class', imgClass + ' replaced-svg');
	}

	// Remove any invalid XML tags as per http://validator.w3.org
	$svg = $svg.removeAttr('xmlns:a');

	// Replace image with new SVG
	$img.replaceWith($svg);

	$svg.on('click', function() {
	// fix: .toggleClass()
	var className = $svg.attr('class');
	if (className.indexOf('active') == -1) {
	$svg.attr('class', className + ' active');
	} else {
	$svg.attr('class', className.replace(/\s*active/, ''));
	}
	});
	}, 'xml');

	});
	});
	</script>
	</body>
	</html>
	<?xml version="1.0" encoding="utf-8"?>
	<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
	<path fill="#55ACEE" d="M26.1,6.2c-0.9,0.5-1.9,0.9-2.9,1.1c-0.8-0.9-2.1-1.5-3.4-1.5c-2.6,0-4.6,2.1-4.6,4.6c0,0.4,0,0.7,0.1,1.1
	c-3.9-0.2-7.3-2-9.6-4.8C5.3,7.4,5.1,8.2,5.1,9c0,1.6,0.8,3,2.1,3.9c-0.8,0-1.5-0.2-2.1-0.6v0.1c0,2.2,1.6,4.1,3.7,4.6
	c-0.4,0.1-0.8,0.2-1.2,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,1.8,2.3,3.2,4.3,3.2c-1.6,1.2-3.6,2-5.8,2c-0.4,0-0.7,0-1.1-0.1
	c2.1,1.3,4.5,2.1,7.1,2.1c8.5,0,13.2-7.1,13.2-13.2l0-0.6C25.3,9.8,26.1,9,26.7,8c-0.8,0.4-1.7,0.6-2.7,0.7
	C25,8.2,25.8,7.3,26.1,6.2z"/>
	</svg>