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

Question

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 vi

Answer 1

I wrote a directive to solve this issue with AngularJS. It is available here - ngReusableSvg.

It replaces the SVG element after it's been rendered, and places it inside a div element, making its CSS easily changeable. This helps using the same SVG file in different places using different sizes/colors.

The usage is simple:

After that, you can easily have:

.svg-class svg {
    fill: red; // whichever color you want
}