Styling svg element with css3

Question

I am working on ui for a web application. I finished the html5 / css3 part, there are only a couple of svg elements left. The problem is that I have different themes for the application, so I'm not sure how to style these svg elements so that they change with the theme. I suppose that one way would be to create different .svg files for each topic, but is there a way to provide an svg element (it can be included in an html file, it should not be an external file), gradient, shadow, etc. using only css?

Answer 1

You can use CSS to change the colors of an SVG element using the stroke and fill properties. For example, you can do something like:

rect { fill: blue; stroke: black; } 

If you do not want to change, say, all the rectangles, you can define classes in SVG and change their fill and stroke properties.

Unfortunately, you cannot change borders, gradients, and shadows in an SVG image using CSS. At least not so, you would change it in html elements using CSS3. However, you can do a lot programmatically. For example, if you have shadow filters defined in your SVG image, you can dynamically apply it to any element by changing its filter property in CSS:

 filter:url(#filterName); 

The link posted by philipp lists all the SVG attributes that can be changed using CSS. You can always change your SVG programmatically, but this is probably not a problem in your case.