Scalable Vector Graphics (SVG)

SVGs are a useful HTML tool for making interactive images with dynamic link overlays.

They work similarly to an HTML image map, but they’re more versatile — they’re scalable which means you can set a certain aspect ratio and it will adapt to the space its in on the site and adjust accordingly. It’s great when you’re developing apps to be used on devices with different resolutions — like a site that is to be viewed on tablets, phones, and computers.

W3Schools has a great resource on this. Here’s some sample code using an imported image and overlaying interactive links:

<image width="1453px" height="1015px" xlink:href="https://static1.squarespace.com/static/5dc0a1b15e075022cc5df286/t/5deff6e1e1e73d1ead198f99/1576007394379/Artboard+1+copy+6%403x.png"> //est. image size

</image>

<circle class="icon" cx="523" cy="408" r="120" fill="#fff" opacity="1" width="150" height="750"/> //assigns a circular link area with coordinates x=523 and y=408 with radius 120, a white fill color, and an opacity value to est. how transparent that is

</a>

</svg>

</figure>

*The viewBox establishes the total space the svg will take up and locks that aspect ratio across the site.

**This website is helpful for determining the radius and coordinate values.

You can further use CSS to add hover effects. Because the circle is named class “icon,” the syntax would look like this:

.icon:hover { //specifies the action that triggers the effects

fill: #080808; //the fill is a gray color but can be changed to another hex color code

opacity: .5 //opacity adjusts how transparent it is.

}