Created
June 16, 2015 14:17
-
-
Save arturparkhisenko/7a084e604d40bb9e5f45 to your computer and use it in GitHub Desktop.
img src svg to inline svg, with fill option
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
src: http://stackoverflow.com/a/11978996 | |
Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic. | |
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/> | |
This is just like how you'd embed a normal image. Note that you need to set the IMG to have a class of svg. The 'social-link' class is just for examples sake. The ID is not required, but is useful. | |
Then use this jQuery code (in a separate file or inline in the HEAD). | |
/* | |
* Replace all SVG images with inline SVG | |
*/ | |
jQuery('img.svg').each(function(){ | |
var $img = jQuery(this); | |
var imgID = $img.attr('id'); | |
var imgClass = $img.attr('class'); | |
var imgURL = $img.attr('src'); | |
jQuery.get(imgURL, function(data) { | |
// Get the SVG tag, ignore the rest | |
var $svg = jQuery(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); | |
}, 'xml'); | |
}); | |
What the above code does is look for all IMG's with the class 'svg' and replace it with the inline SVG from the linked file. The massive advantage is that it allows you to use CSS to change the color of the SVG now, like so: | |
svg:hover path { | |
fill: red; | |
} | |
The jQuery code I wrote also ports across the original images ID and classes. So this CSS works too: | |
#facebook-logo:hover path { | |
fill: red; | |
} | |
Or: | |
.social-link:hover path { | |
fill: red; | |
} | |
You can see an example of it working here: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wasn't even looking for this and I found three projects to use it on. You, good sir, are my favorite web hero ever this week. – Imperative Apr 19 '13 at 8:18
2
It may sometimes not work in Safari (for e.g.), to ensure returned data is readable, remplace the }); of $.get with }, 'xml'); – Joan Jul 24 '13 at 10:28
9
You could probably even replace the selector with img[src$=".svg"] and eliminate the need for the svg class. – Casey Chu Aug 4 '13 at 23:40
1
@leongaban I don't think there is a way to target the fill of a background image. It would be super helpful if you could though! – Drew Baker Oct 29 '13 at 16:47
1
A bit late, @leongaban, but a better way to do it probably would be to remove the fill attribute altogether, and rely on a CSS file to add a fill to the parent svg. $('#ico_company path').removeAttr('fill'). Then you could do #ico_company { fill: #ccc } in your CSS file – bioball May 16 '14 at 18:56