css - My SVG image ignores its stylesheet when used as background image

Question

I'm have an SVG icon that I style using CSS. The CSS is loaded from within the SVG file itself using a <link> tag.

When I use that SVG as a background image though no styles are applied while visiting said SVG directly, it works fine.

Here is an example

Any idea what's wrong?

Answer 1

That's how SVG works when used as an image. The data must be complete in a single file in order to protect user's privacy.

The mental model you need is that it's going to work and act in a similar way to a raster image, they are single files too.

You can still use a <link> tag but you'd have to encode the data as a data URI within the svg file itself.