Manipulating SVGs using CSS

Marty Penner

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.

I love building and things, particularly when they involve adversarial interoperability.

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.

Manipulating SVGs using CSS

Comments

More from this blog

Generating TLS certificates for external domains in SST

Getting Tauri working in WSL

Sharing music with friends using fly.io, Azuracast, and Mopidy

Using NVM to enforce node versions

Command Palette

Comments

More from this blog