Specify an SVG as a background image and ALSO style the SVG in CSS?
css, svg
Solution
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.
Problem
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?