Question

Is it possible to specify an SVG as a background image and ALSO style the SVG in the same CSS file?

I’m very comfortable placing, scaling and clipping SVG images as either single files or sprites, but I haven’t been able to work out if it possible to style the SVG within the same CSS file as sets it as a background image.

In pseudo CSS i’d like to do the following to vary the colour of simple shape based on the class of the parent element:

element1 {
 background-image(icon.svg);
}

element1.black .svg-pathclass {
 fill: #000000;
}

element1.white .svg-pathclass {
 fill: #ffffff;
}

obviously this assumes a path in the SVG having class .svg-pathclass

is this possible?

Answer 1

No, this is not possible. The SVG has to be prepared in one document (which may be a data URI or an externally referenced file) and then used as a background in another file.