how to apply css to svg icon.

mikha
mikha used Ask the Experts™
on
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/companyicon.svg" alt="">
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016

Commented:
No it is not possible the colour is fixed within the image itself.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
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.

Author

Commented:
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>
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
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.

Author

Commented:
@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>
Consultant & Challenge Subduer
Top Expert 2009
Commented:
I'd recommend setting the width and height on the <svg> element explicitly or setting those to 100% and controlling the dimensions via its parent. (Some browsers might not get the dimensions from the viewbox correctly.)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial