Loupax Loupax - 2 years ago 92
CSS Question

My SVG image ignores its stylesheet when used as background image

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download