CODEWITHSUNDEEP
htmlcsssvg
Marko Lekić
Marko Lekić

Reputation: 123

Styling an svg element with css3

I'm working on ui for a web application. I finished html5/css3 part, the only thing left is a couple of svg elements. The problem is that I have different themes for the application, so I'm not sure how to style those svg elements so they change with the theme. I guess one way would be to make different .svg files for each theme, but is there a way to give an svg element (it can be included in html file, it doesn't have to be an external file) borders, gradient, shadow and so on using only css?

Upvotes: 4

Views: 5881

Answers (1)

João Pimentel
João Pimentel

Reputation: 301

You can use CSS to change the colors of the SVG element, through the stroke and fill properties. For instance, you can make something like:

rect
{
   fill: blue;
   stroke: black;
}

If you don't want to change, say, all rectangles, you can define classes in you SVG and change their fill and stroke properties as well.

Unfortunately, you can't change borders, gradients and shadows in a SVG image using CSS. At least, not in the same way you would change it in html elements with CSS3. You can do a lot programatically though. For instance, if you have shadow-like 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 SVG attributes that can be changed through CSS You can always change your SVG programatically, but it's probably not worth the trouble in your case.

Upvotes: 5

Related Questions