2025-03-01 TL:DR - Not possible in a consistent and asethtically pleasing way.
Possible alternatve... image maps.
wait a few years.
https://arxiv.org/html/2412.11102v1
# Drawing SVGs with LLMs
[[svg]]
Example below also... whoah it embed and is clickable.
See it on publish...note you can't see the blue square.
Next step... learn about embedding them
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Link for Yellow Circle -->
<a href="https://yello.com" target="_blank">
<circle cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="3"/>
</a>
<!-- Link for Blue Rectangle -->
<a href="https://blue.com" target="_blank">
<rect x="75" y="50" width="50" height="50" fill="blue" stroke="black" stroke-width="3"/>
</a>
</svg>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Venn Diagram</title>
<style>
svg {
width: 100%; /* Responsive width */
height: auto; /* Maintain aspect ratio */
}
.circle {
fill: none;
stroke: #000;
stroke-width: 2px;
opacity: 0.4;
}
text {
font-family: 'Comic Sans MS', cursive, sans-serif;
font-size: 16px;
text-anchor: middle;
pointer-events: none;
}
a {
text-decoration: none;
fill: black;
}
.arrow {
fill: none;
stroke: black;
stroke-width: 2px;
}
</style>
</head>
<body>
<svg viewBox="0 0 400 400"> <!-- Set viewBox to cover the entire design area -->
<!-- Circle for Birds -->
<a href="http://birds.com" target="_blank">
<circle class="circle" cx="120" cy="150" r="90" fill="lightblue"></circle>
<text x="50" y="90">Birds</text>
</a>
<!-- Circle for Amish -->
<a href="http://amish.com" target="_blank">
<circle class="circle" cx="220" cy="150" r="90" fill="lightgreen"></circle>
<text x="290" y="90">Amish</text>
</a>
<!-- Arrow pointing to Venn Diagram -->
<path class="arrow" d="M350 300 L300 250 L350 200" marker-end="url(#arrowhead)"></path>
<text x="350" y="310" font-family="Comic Sans MS">Venn Diagram</text>
<!-- Definition of the arrowhead -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7"
refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="black"></polygon>
</marker>
</defs>
</svg>
</body>
</html>