Add svg to web page?

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.

There are many ways of including a SVG, take a look here: https://css-tricks.com/using-svg. It's important to say that some ways may look easier (like using a `` tag as you did or using it as a `background-image`) but it just causes the problem you are facing: impossibility to cascade external CSS inside the SVG, i.e. the page's styling isn't reflected inside the loaded SVG. — Erick Petrucelli, Jul 11 '15 at 14:08

score 1 · Answer 1 · answered Jul 11 '15 at 13:39

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.

Add svg to web page?

1 Answers1