Img Src Svg Changing the Styles With CSS

How to change color of SVG image using CSS (jQuery SVG image replacement)?

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

We have a more complicated version that includes caching here:
https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

Change img src SVG color

You can apply CSS to your SVG if the SVG is inline in the DOM. The easiest way to achieve this is with an SVG injector. It uses Javascript to load an external SVG file and replace an HTML element (usually an <img> element) with the SVG markup.

If you use SVGInject ( https://github.com/iconfu/svg-inject/ ) your HTML will look like this:

<button>
  <img src="someImage.svg" onload="SVGInject(this)">
</button>

The onload attribute does the magic by replacing the <img> element after the image is loaded. It should look the same, but you will be able to apply CSS to the SVG.

How to change the color of an svg element?

You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.

If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

See :

#time-3-icon {   fill: green;}
.my-svg-alternate {  display: none;}.no-svg .my-svg-alternate {  display: block;  width: 100px;  height: 100px;  background-image: url(image.png);}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/></svg>
<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Change img src SVG on hover in CSS

I don't think you can do that using CSS only, but you could do it with a bit of JavaScript, if you can change the HTML.

Something like:

onmouseover="this.src='newSrcHover.jpg';"

Or you can change the background-image: url('linkToNewImage')property on :hover... while that does change an image on hover and may be sufficient for some, it's not src. The JS one is.

I want to change the color of svg while it is in outer file and imported with img tag

You're correct that you can't change an SVG's fill attribute via CSS if you use it in the src of an img tag – you need to have the contents of the SVG in your document.

You could try using CSS filter to change the appearance of the image though, in particular the brightness or invert options:

<img src="myimage.svg" class="invert">

<style>
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.invert { filter: invert(100%); }
</style>