JavaScript free hover on SVG

[awstanley]

If we actually want this, it's going to be annoying.

My recollection is that CSS can be done but it requires that the SVG to be inlined due to selection restrictions. External inclusions block interactions for various reasons. JavaScript can probably interoperate, but my recollection is there's a sandboxing restriction for security unless it's inlined.

CSS can be one within the logo's space, but you'd either need to put the text within the logo (doable?), or you'd need to do something pretty nasty.

Passing the selector down will fail in various cases due to parent select on SVGs being wonky (due to their own selection bounds requiring picking.

The best solution is either manually injecting the SVG using JavaScript and then using CSS (unpacking the SVG in place, replacing an img tag as a soft-fallback), giving a clean failsafe, or doing something ridiculous.

---

Not sure what the best option here is, so filing this here so we can actually look into it if we care that much.

For raw performance we could preload with a networker and manifest the whole thing and use the preload hack into position with a graceful fallback. It gives the best of both worlds and access to the fallbacks. Just a thought ;)