How to change the color of an svg element?

Question

I want to use this technique and change the SVG color, but so far I haven't been able to do so. I put this in the CSS, but my image is always black, no matter what.

My code:

.change-my-color {   fill: green; }

<svg>     <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg>

Answer 1

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

1. Add the SVG image using an <img> tag.

<img src="dotted-arrow.svg" class="filter-green"/> 

2. To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); 

3. Add the CSS filter into this class.

    .filter-green{         filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);     } 

Answer 2

To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor. The code may look like the below code

<?xml version="1.0" encoding="utf-8"?>     <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"          width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">     <g>         <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223             C181.113,454.921,171.371,464.663,161.629,474.404z"/>     /*Some more code goes on*/     </g>     </svg> 

You can observe that there are some XML tags like path, circle, polygon etc. There you can add your own color with help of style attribute. Look at the below example

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223                 C181.113,454.921,171.371,464.663,161.629,474.404z"/> 

Add the style attribute to all the tags so that you can get your SVG of your required color

Edit: As per Daniel's comment, we can use fill attribute directly instead of fill element inside style attribute