how to apply css to svg icon.
I have an svg icon in my asp.net web site. how can I apply css to this svg file by just using a css file.
say I want to change the color of the this svg icon. is it possible to write just a css rule to do this?
<img src="content/images/compan
say I want to change the color of the this svg icon. is it possible to write just a css rule to do this?
<img src="content/images/compan
David Johnson, CD
No it is not possible the colour is fixed within the image itself.
If you loaded the SVG via an <object> instead of <img> (and didn't run into a CORS issue), you could use JS to change the color of elements of the SVG. It might just be easier to make a copy of the file and edit it (via Inkscape or a text editor -- remember SVG is an application of XML) though.
ASKER
hello David and David S. thank you for your comment. I looked at few examples and also realized in my aspx page, I can do this (see sample below) .
is it ok to use svg file or element like this in HTML in aspx page?
is svg an HTML5 element?
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
is it ok to use svg file or element like this in HTML in aspx page?
is svg an HTML5 element?
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Yes, you can embed SVG directly in HTML5. Your example code is missing a few required attributes, however.
I normally wouldn't recommend doing so, but it would make it easier for you to change the color.
I normally wouldn't recommend doing so, but it would make it easier for you to change the color.
ASKER
@David s - thanks again. my svg has few more elements , as below.
I experimented with few things, and was able to change the color using the css rule inside the svg file.
one thing, that didn't work was . in chrome and firefox , the icon renders with the proper size, but in IE the icon appears shrinked.
any thoughts on this issue?
<svg xmlns="">
<path ..../>
<rect .... />
</svg>
I experimented with few things, and was able to change the color using the css rule inside the svg file.
one thing, that didn't work was . in chrome and firefox , the icon renders with the proper size, but in IE the icon appears shrinked.
any thoughts on this issue?
<svg xmlns="">
<path ..../>
<rect .... />
</svg>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.