Add svg to web page? [duplicate]

Question

How can I add an svg to my webpage and change it's color via css?

I've tried:

<img src="my.svg" class="svg"/>

.svg{
    fill: white;
}

But no luck.

CSS only solutions please, and I do not need any fallbacks, only supporting new browsers.

Answer 1

It won't work this way. You can change the fill color if you're directly including the svg, i.e.:

HTML:

<p>Some other webpage content</p>
<svg class="my-svg">
    <g>
        <path fill="..."></path>
        <path fill="..."></path>
    </g>
</svg>
<p>Some other webpage content</p>

CSS:

.my-svg *{
    fill:white;
}

So, you web-inspect my.svg, and copy-paste its contents to the destination page. Then you can style it.