How to change color of SVG image using CSS

SVG is the new era, nowadays with all these super-pixel-dense devices our poor jpg and png images are getting stretched, scaled, distorted all over and they render badly causing some bad-looking effects. This is why they are all being replaced with more modern, flexible SVGs.
SVG are not that straight forward like linking an image

<img src="image.svg">

With the following script it will be magically transformed in a properly structured inline SVG object, that on the contrary can be manipulated, and it’s very flexible.

jQuery(document).ready(function () {
     /*
     * Replace all SVG images with inline SVG
     */
        jQuery('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

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

            /*Remove any invalid XML tags*/
            $svg = $svg.removeAttr('xmlns:a');

            /*Loop through IMG attributes and apply on SVG*/
            jQuery.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            /*Replace IMG with SVG*/
            $img.replaceWith($svg);
        }, 'xml');
    });
});

Now, while we have just put a simple image tag, we actually have an inline SVG object available in the DOM.

How to change color of inline SVG using CSS
Example css:
To get a nice bright blue, I used these values:

svg {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
    -webkit-filter:invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
}

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

The syntax is:

.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}

Where is one of:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – for applying SVG filters
  • custom() – “coming soon”

Multiple functions can be used, space separated.