Skip to content

Instantly share code, notes, and snippets.

@oelna
Last active Apr 24, 2020
Embed
What would you like to do?
A simple example of responsive image maps with HTML and SVG
<!DOCTYPE html>
<html>
<head>
<title>SVG image maps</title>
</head>
<body>
<!-- https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps -->
<!-- https://n-peugnet.github.io/image-map-creator/ -->
<!-- width can be any value, set here or in CSS, to make this responsive -->
<svg viewBox="0 0 1536 1024" width="50%">
<image width="1536" height="1024" xlink:href="http://wiki.selfhtml.org/images/8/82/Mount_Rushmore.jpg"></image>
<a xlink:href="https://de.wikipedia.org/wiki/George_Washington" class="washington">
<!-- rect, circle, ellipse, polygon, path -->
<rect x="300" y="125" width="250" height="300" />
</a>
<a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson" class="jefferson">
<rect x="550" y="225" width="200" height="300" />
</a>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment