CODEWITHSUNDEEP
csssvg
Loupax
Loupax

Reputation: 4914

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?

Upvotes: 1

Views: 312

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

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.

Upvotes: 1

Related Questions