Links with Inline SVG, Staying on Target with Events

It's pretty common to use SVG within an anchor link or otherwise "click/tappable thing" on a web page. It's also increasingly common that the SVG is inline <svg>, because it's often nice having the SVG in the DOM since you can style it with CSS and script it with JS and such. But what does that mean for click events?

A link with an SVG icon in it might be like this:

<a href="#0" data-data="something">
<svg ... >
<rect …

Links with Inline SVG, Staying on Target with Events is a post from CSS-Tricks