JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
    <div class="container">
    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 800 600'>
        <image xlink:href='https://upload.wikimedia.org/wikipedia/commons/1/1a/Shiba_inu_at_the_entrance_of_a_house%2C_-Japan_2010_a.jpg' width='800' height='600'>
            <desc>Shiba Inu lying on the floor next to a pair of shoes</desc>
        </image>	<a xlink:href='https://en.wikipedia.org/wiki/Dog'>
				<desc>domestic dog</desc>
				<path d='M162,231 L229,250 L293,225 L315,574 L243,585 L159,491 Z'><title>doge</title></path>
			</a>
	<a xlink:href='https://en.wikipedia.org/wiki/Shoe'>
				<desc>shoes</desc>
				<path d='M308,426 L429,453 L408,490 L312,489 Z'><title>a pair of shoes</title></path>
				<path d='M611,317 L700,315 L749,389 L601,399 Z'><title>more shoes</title></path>
			</a>

    </svg>
    </div>
    <figcaption>Man’s and woman’s best friends.
        <br><small><a href='https://upload.wikimedia.org/wikipedia/commons/1/1a/Shiba_inu_at_the_entrance_of_a_house%2C_-Japan_2010_a.jpg'>Photograph</a> by ヨックン (<a href='http://creativecommons.org/licenses/by/2.1/jp/deed.en'>CC BY 2.1 JP</a>)</small>

    </figcaption>
</figure>

</html>

CSS

body {
    padding:0 1em
}
figure {
    text-align:center
}
.container {
    max-width:800px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 75%;
}
svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border:medium solid black;
}
path {
    stroke:none;
    opacity:0
}