CODEWITHSUNDEEP
csssvg
Labanino
Labanino

Reputation: 3960

Applying a fill(color) to an SVG image

I've been trying to apply a different color using fill to a svg with no success. No idea what I am doing wrong! This is my jsfiddle. Thanks.

Upvotes: 0

Views: 140

Answers (2)

cport1
cport1

Reputation: 1185

You can't change the color of an svg file. You need to have the actual svg tag with paths and not an img tag.

http://jsfiddle.net/hhoa8v9e/1/

<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1" id="triangle">
  <path d="M 100 100 L 300 100 L 200 300 z"
         stroke="blue" stroke-width="3" />
</svg>


#triangle {
    fill:blue;
}

Upvotes: 0

user1620220
user1620220

Reputation: 1315

You cannot change an SVG image in an img tag. You should inline the SVG image in your HTML like so:

 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path d="M0 0h24v24h-24z" fill="none"/>
     <path class="check" d="M12 1l-9 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12v-6l-9-4zm-2 16l-4-4 1.41-1.41 2.59 2.58 6.59-6.59 1.41 1.42-8 8z"/>
 </svg>

Upvotes: 1

Related Questions