Creating SVG files with hover effects in HTML/CSS

[pixelstuff]

I have a vector file that I wanted to use as an SVG on a web page where certain shapes in the image would highlight on mouse hover and then link somewhere when clicked.

Can this sort of thing be done with SVG and is there any special prep work that can be done in Affinity Designer (or Photo) to make it work better?

Chopping the image up into boxes wouldn't be ideal because some shapes would intrude into each other's boxes.

[George-Frazee]

I'm not an expert since I am also just diving into the world of animations but here's a video I watch recently that I think will be applicable and also here's a link to the w3 schools SVG reference on using anchor tags directly in an SVG.

AD in my experience hasn't been great for SVG work (that's not it's design intention, I think) but you can start the design mockups in AD. The video uses figma, but you can copy past objects from AD into figma to get better svg export support.