Skip to content

Instantly share code, notes, and snippets.

@ChrisMBarr
Created August 28, 2014 16:07
Show Gist options
  • Save ChrisMBarr/2c7722fc70cce32a40e2 to your computer and use it in GitHub Desktop.
Save ChrisMBarr/2c7722fc70cce32a40e2 to your computer and use it in GitHub Desktop.
A simple way to swap out .svg files linked by images with the actual <svg> source so you can control colors, etc. with CSS.
$(function(){
$("img[src$='.svg']").each(function(i,el) {
$.get(el.src, function(data) {
var svg = $(data).find('svg');
if (svg) {
$(el).replaceWith(svg);
}
});
});
});
@ChrisMBarr
Copy link
Author

If we have this in our HTML:

<h1 id='my-container'>
  <img src='logo.svg' />
</h1>

Now, run the JS above and we can control the svg's fill color, among other things.

#my-container path{
  fill: #F00;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment