SVG Hotspots?

[RyanReese]

Here’s an idea and I’m just not familiar enough with SVGs to know whether this is possible

Imagine there’s an SVG with, I guess, 50 paths in it. One for each state (or 48 if we are going continental US).
Is it possible to add identifying information about the SVG path? So e.g. I could identify the “Texas” path via some attribute and “Maine” (a different path)?

I have a situation where I possibly need an SVG image to be generated and change the background color of specific paths depending on how popular the hotspot is. So if “Texas” has more of something than “Maine”, for example, I need “Texas” to be colored in darker. Is this sort of targeting possible? I assume it is because it makes sense in my head but I’d like a second opinion.

Thank you let me know if I’m unclear about anything.

[SamA74]

You can add attributes, such as id and class to SVG elements just as you can with HTML, then target those with CSS to apply styling in the usual way.
The only thing is, you must in-line the SVG code for the CSS to work on it.

[RyanReese]

Thank you! I knew about the inline requirement but I can’t remember ever identifying individual paths/layers in SVG code.

[SamA74]

Just treat it like HTML and you know what to do.

<path class="state" id="texas" ...

.state {
   stroke: #000;
   stroke-width: 2px;
   fill: #fff;
}
#texas {
   fill: #d00;
}

I’m not sure if this is relevant to your use case, but the way I usually handle in-lining SVG is via PHP includes.
Having the image as a separate, independent SVG file is a nice way to separate it from the HTML. The advantage being, you can re-use the same graphic in multiple places without having to copy/paste the SVG code. Then any edit made to the SVG file is propagated to wherever it is used, be it an include or used as a src attribute.
So while you keep it separate on the server-side, on the client-side it is served up in-line and the CSS works with it.