Manipulating SVGs using CSS
Hey, I'm Marty! I help build great developer experiences, from documentation to dev tools. I have a lot of experience with modern monorepos and React. I built a VSCode extension (called "CSS to Go") in mostly Rust for autocompleting CSS classnames. I've worked on a task manager app (who hasn't these days?) that I'm aiming to be local-first, cloud-optional, and polished because it's fun.
I love reading, drumming, some writing, and figuring hard problems out. I've worked with a lot of tech over the 10+ years I've been a developer, and I love the inflection point we are at in the industry. The future is bright!
I am currently a Frontend Developer at Race Roster, based out of Ontario, Canada.
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.