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/companyicon.svg" alt="">
mikhaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David Johnson, CD, MVPOwnerCommented:
No it is not possible the colour is fixed within the image itself.
David S.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.
mikhaAuthor 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>
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

David S.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.
mikhaAuthor 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>
David S.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.)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.