# Manipulating SVGs using CSS

At [Race Roster](https://raceroster.com/), 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:

```css
#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:

```css
#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.