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.
-
You'd need to put the fill in the image file. Images are not externally modifiable (consider them as having the capability of raster images and you won't go far wrong).– Robert LongsonCommented Dec 3, 2014 at 18:56
Add a comment
|
2 Answers
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>
-
So, I get the
<svg><path/></svg>in Illustrator withSVG codethen? or there is other way?– LabaninoCommented Dec 3, 2014 at 21:37 -
Not sure what you're asking. You can use Illustrator, Inkscape, or just about any text editor to open an SVG image to view the markup. Commented Dec 3, 2014 at 21:48
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;
}
