Menu
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?
813
SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF. All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you can do anything a raster graphic can do, like repeat.
Not only does it mean that SVG properties can be styled using CSS as presentation attributes or in style sheets, but this also can be applied to CSS pseudo-classes such as :hover or :active . SVG 2 also introduces more presentation attributes that can be used as styling properties.
The SVG way would be to set the stroke to none , or alternatively set the stroke-opacity to 0 . You also don't set any value for fill on the <rect> element and the default is black. For a transparent rect you want to add fill="none" .
A SVG always have a transparent background as long as you do not insert a rect or something that is filling the whole graphic or using CSS to set a background color for the root element.
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.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
