SVG Tricks: Kickass Hotspots!

#svg #webdev #html #beginners

Precursor: This article assumes you know the basics of SVG. If you haven't already discovered SVG then there's no time like today. The power behind the features of SVG are quite amazing and oh so useful. Today we're going to be talking about just one of those features.

The Problem

As you're probably already well aware, everything on a website is a box. We can style elements to look like they're not boxes, but ultimately the element and the room it takes up is a box.

For the most part this isn't an issue. A lot of what we create fits quite nicely in a box, but what do we do when we have to create something that doesn't really fit that model?

For example, let's say we have the image below and need each character to be clickable.

At this point you may be thinking, "Well, I could just use an image map", which is true, but also limiting and tedious to work with.

Another solution could be to just absolutely position some elements overtop of the image like so:

However, you'll notice because the characters overlap each other it becomes quite difficult to reliably select the character you want.

The Solution

So, as I'm sure you've already guessed, our solution is going to be to use SVG! Using Illustrator (but you can use Inkscape, or any other preferred tool to create SVG's, of course) I imported the image and used the pen tool to create paths around each character.

Here's what that looked like:

Not very pretty, I know, but we'll clean things up a bit in the code.

Simply by changing our paths fill attribute to transparent we now have invisible hit areas that perfectly (well, as perfectly as you make them 😉) trace our characters...

Pretty cool, eh? Add a splash of javascript and some CSS and the world is your oyster. Oh, and did I mention it's all completely fluid?

Just For Fun

I wanted to see if I could achieve the same over a video and turns out with a bit of absolute positioning, it's certainly attainable, as you can see below:

So there you have it, go forth, try your own out and post what you come up with in the comments. 🙂

And as always, happy coding! 🤓