Marty's Random Thoughts

Manipulating SVGs using CSS

Marty Penner's photo
Marty Penner
·

1 min read

At Race Roster, I've been experimenting with using SVGs to show real-time theme updates as a user changes the theme colours in their branding settings. A more traditional approach would require using a set of <div> and <span> elements with border or background color CSS attributes to achieve this. I opted instead to try using SVGs instead, since path and color manipulation seemed to be one of their strong points. Here's a very basic example SVG:

After inspecting the SVG structure using the browser's devtools, I can target the <path> element I care about in CSS and modify the fill and stroke attributes like so:

#arbitrary-id-of-path-element {
  fill: hsla(335, 52%, 89%, 1);
  stroke: hsla(335, 52%, 56%, 1);
}

This gives me an SVG that looks like this:

#modified {
  fill: hsla(335, 52%, 89%, 1);
  stroke: hsla(335, 52%, 56%, 1);
}

Pretty simple! It also allows me to export an SVG from a visual design file and manipulate in the browser. Very cool.

SVGCSS