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


Tags: jquery,css,svg

Problem :

This is a self Q&A of a handy piece of code I came up with.

Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state.

So here is what I came up with, which I think is by far the easiest way to use SVG files on a website. It takes its concept from the early text-to-image replacement methods, but as far as I am aware has never been done for SVGs.

This is the question:

How do I embed an SVG and change its color in CSS without using a JS-SVG framework?



Solution :

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


    CSS Howto..

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    Show icon font on image center on mouse hover

    how change all fonts of a telerik control by one shot

    How to apply css to buttons inside gridview

    How to edit CSS styles in JavaScript?

    How do I remove nav underline on hover from Bootstrap theme?

    How to keep CSS from render-blocking my website?

    How to combine this css?

    How to keep height of parent div with absolute positioned img inside?

    How to make pull right display properly?

    How to correctly add nested divs

    How to use vertical align in bootstrap

    How to use pure css selector to select hidden element

    How to use this jQuery to effect css opacity

    hide show div using nav html5 query javascript

    How can I stop my CMS’s CSS affecting my content?

    PHP & CSS: How to get hover effect for each row of a table?

    How to move the right div to the right with css

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to hide an input-box with CSS

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    twitter bootstrap - how to skip a line?

    How to import css dynamically with js?

    simplest slideshow using html, css toggling visibility of each div tag

    How to center the buttons and make them same size

    How to right and left align every alternate list item in html and css along with the bullets

    How to make image scale as per browser window?

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    How do I show my existing rails app differently on Facebook canvas