Month: August 2023

SVG has so many tricks up its sleeve. It’s really a full-featured drawing API literally designed for the web, but few of us really truly understand it nor reach for it enough. Heck, I even wrote a book about it, and I don’t. At the time, just getting people to use SVG for icons felt like an uphill battle, but thankfully, I think that one has been won.

Let’s look at some cool SVG examples that have crossed my desk lately.

Animate an SVG Shape’s Inner Stroke

Christopher Kirk-Nielsen with a variety of demos that are a good reminder that stroke is animatable (like the width of it), which can do some cool effects. This demo looks like the classic one where the stroke moves to the inside only, filling the shapes.

It was only in the last few years that browsers like Chrome GPU accelerated SVG animations, making stuff like this really smooth.

SVG viewBox padding

To be clear, the viewBox in SVG does not actually have padding. But it’s an important thing to think about. Chuan makes the point that if you make a 10✕10 area via the viewBox, then make a<rect> that fills that 10✕10 area, the stroke around it, the stroke will be half cut off. That’s because stroke straddles the edge of shapes in SVG. So you either gotta monkey with the coordinates of the shapes, or you gotta adjust the viewBox to handle it. Chuan’s thinking is: let a processor handle it.

viewBox="0 0 10 10 padding .5"

/* translates to */

viewBox="-.5 -.5 11 11"

Clever thinking, really. The CSS Doodle tool can do it.

So… you can set an SVG circle’s radius in CSS?

The very basic answer to Paul Hebert’s questions is: yeah, totally. Like if you have this:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

You can adjust the radius in CSS like:

circle {
  r: 20;
}

Not CSS you see every day, but yeah, that’s totally fine. But Paul’s point is that normally you set the radius in the SVG code, but you might need it in CSS code. Like, a way to keep them in sync is good. In Paul’s demo, it looks like he doesn’t even set the radius in SVG at all, just does it in CSS via a --radius Custom Property, then uses that in the other calculations needed to make these percentage meters work.

Understanding SVG Paths

The <path> element in SVG is the most complicated of the shape drawing elements. In fact, as I understand it, all the other elements are just syntactic sugar over a path anyway. I once wrote An Illustrated Guide when I was learning it and figuring it out. But Nanda Syahrasyad has outdone me easily in Understanding SVG Paths.

The trick is understanding the commands. They are pretty understandable in the end, as it were. They are like “pick the pen up and move it here, then draw a line over to here” or “starting where you are, move the pen in this direction this far” or “draw a curve from here to there using these other two points as essentially gravitational poles.”

If you get into it, you’ll find yourselves (gasp) drawing your own shapes. I love Nanda’s opener:

I think you’re kind of a next-level front-end developer if you’re building bending ass buttons like that.

SVGs have additional pointer-events properties

If you’re like me, you think of pointer-events in CSS as a thing you use to set none once in a while. Maybe you set some colored overlay <div> over something, but you don’t want it to actually eat up clicks, so you set pointer-events: none on it and those clicks will slide right through.

When it comes to SVG, though, Stefan Judis has noted some additional values for it that are specific to SVG like:

.foo {
  pointer-events: visiblePainted;        
}

The demo by Martijn Cuppens helps. See number 4. Like ONLY the “painted” part is clickable there. I feel like that opens up some weird “click map” possibilities, so please send them to me if you do something weird.