Marty Penner

Software development-related nonsense/struggles/victories, because there are too few keystrokes left in my hands to waste them.

Manipulating SVGs using CSS

March 24, 2019

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:

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

Share This Post