Embedding Clickable SVGs in Docusaurus

[moonwalk47]

Imagine a mind map with multiple branches that redirect to specific website when you click on them

Currently, when I import an SVG either as a React component:

import DocusaurusSvg from './docusaurus.svg';
<DocusaurusSvg />;

or via Markdown:

![svg file](path/to/svg)

the SVG is rendered as a static image. Although I can select the text within the SVG, any embedded links do not respond or clicks, and the expected behavior (when click on the link on SVG it should redirect me to the specific website ) is not achieved.

For context, I have created diagrams in Excalidraw that include clickable elements and exported them as SVG. These SVGs work correctly on other static site generators, which leads me to believe this issue might be specific to how Docusaurus handles SVG imports.

I would appreciate any insights or recommendations on how to resolve this issue. Specifically, I am interested in approaches that allow the SVG to be rendered inline—ensuring that the anchor tags and interactive elements remain functional in SVG. Some potential workarounds I have considered include:

how to embed svg in docusaurus with clickable links

However i have no any experiance with react but i know markdown
If you have any suggestions or have encountered a similar situation, I would be grateful for your advice.

[slorber]

Please share a concrete SVG example so that we can help you. We need the code of the SVG and which things in it should be clickable.

---

The Docusaurus built-in SVG support has recently been extracted as a custom SVGR plugin: https://docusaurus.io/blog/releases/3.7#svgr-plugin

It works by converting SVG files automatically to React components. This doesn't allow you to add event listeners to individual SVG shapes.

If you want individual shapes to be clickable, you have to convert it to a React component yourself. You can use this conversion tool, for example, https://react-svgr.com/playground/

You can link svg shapes to URLs, or use custom event handlers on them

const SvgLinks = () => {
  return (
    <svg width="200" height="100" viewBox="0 0 200 100">
      {/* First shape linking to site 1 */}
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        <path d="M10 10 H 90 V 90 H 10 Z" fill="blue" />
      </a>
      
      {/* Second shape linking to site 2 */}
      <a href="https://another-example.com" target="_blank" rel="noopener noreferrer">
        <path d="M110 10 A40 40 0 1 1 109.99 10" fill="red" />
      </a>
    </svg>
  );
};

(as far as I remember <a> tags only work when using inlined SVGs, not when using <img src="my.svg"/>)

[moonwalk47]

i have this svg. when you click on it this svg will open in new-tab as raw. and when you click on raw svg it will redirect you to google.com Easy-Peasy

this is svg code

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.16666412353516 47" width="240.3333282470703" height="94" filter="invert(93%) hue-rotate(180deg)"><!-- svg-source:excalidraw --><metadata><!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nH1TyW7bMFx1MDAxML3nK1x1MDAwNOVaOKJo2VZu3ZxcdTAwMDRccnKoXHUwMDBi9FD0wEpjiTVNXG4k5aWG/z1DKiFtpy1cdTAwMDVcYpg3K988XHUwMDFlrpIktftcdTAwMGXS2ySFXcVcdTAwMDSvNdum71x1MDAxY75cdTAwMDFtuJLoyr1tVK8rXHUwMDFm2Vrbmdubm5gxqtR6yFx1MDAwMlx1MDAwMWuQ1mDcXHUwMDBmtJPk4P/o4bXLvd+KzXSiXGJ/nM/t092Xx/ru99DQXHUwMDA3vVx1MDAwZWNhZyO6Q2hKSLD3aFNaXHUwMDA2e8tr21wiRrJsRCZ4xiSnXHUwMDA1LcgkhLTAm9a6y0xcdTAwMDPGZCNcXLcsIMZqtYKPSijtprgm4L44yC9WrVx1MDAxYa16WYdcdTAwMTirmTRcdTAwMWTTeOlcdTAwMTi35EIs7N5XR+KQpPSix/eXkfNcdTAwMGL8X1nYtGklXHUwMDE4R2wkQnWs4nY/XFw9oG7C7qH2O/hcdTAwMTln0mxcclx1MDAwZm5cdLJcdTAwMTdcIsBcXNbg+E1ZdtZN1i/dzqJccoCrQMqMlkVWzGjwRLmM80vwSUmvXHUwMDFjSmc0L8pyXHUwMDFju5tPqFx1MDAxOOuLLpkwXHUwMDEwqXYjfD5RU7xJ39VsSCFTWuY0p7Msz1wiK4LL1alOXHUwMDFipXDRQaNDjKpWf+nqdYepQ0riK0VcdTAwMDaVtFx1MDAwYv7H3STPztA5W3Ph1jA5q/Re8MYxklxuWJ6oXHUwMDAzWbFcdTAwMWOfTnBb1UVvhfVcdTAwMTiXoN/uSmnecMnEt/9NyXqrvoJcdTAwMTnmtLqHU17g/vVcdTAwMWSQXHUwMDExLbzjiH/Pbcq6bmGRWfRcdTAwMGWvNt1w2H54q/nrpT8pXHUwMDA2XHUwMDFkfSbqXHUwMDFk3JJcdTAwMGXHq+MzviAjZiJ9<!-- payload-end --></metadata><defs><style class="style-fonts">
      @font-face { font-family: Nunito; src: url(data:font/woff2;base64,d09GMgABAAAAAAUUAA8AAAAACggAAAS7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbgXwcZAZgP1NUQVREAFwRCAqGfIVfCxoAATYCJAMwBCAFhCQHIBtQCFFUURrIfhzG7pESE6KJKO1Gy/v3pVkxshZXEUT7wX52n2AqSUSja4JKJqpmGk1LI1nCq9iXG6pLZ8+ai/cUAXuBsCel2lTSO+3LCvWq9GzDLtPv+59jqffv2qIxC/SIT6QqFlk2nNhGm1UDRvE0GveG+Xwm2vaISfVqeQuiw8LGrQt0BaQUKqHRSQh0Nlk88opVxZVAcsBlxoHkZJtVDyQo8N0YdOKQWQ8YCCy1/OOkSzpLa1BwVi262jxU3s2tYihQuaKCrgSQrjDRKritRp3oru42TCSDeOqNZrKuLTrA3NilLVKMCsT4jgRix7YiFIt9BldjeeLkmQ68a9xBR3vLwdA7vs758UdDXsxawPrdSmI3z1Ca8wPs/nz51OCekQzVt//vU8+L4JEAuQ7xPu9j5HWQ7ijRd6uxSOeP9FoR/BBkR1CiL4pXJmNUERBl0cQ1d+g6+nYdvBvWALrTbt0aqUuPPjgDb7NIHKDvV76WO+VEOb5aXPDhRil6dO4KBh46xRAgDvYMLdAQUnp74o6vF8+Cg3k8Dk/lrhZtL7Vt+9gYMjQ+zt4x+n4UEFdZHISrHhp7w9o+MgIAMcreMR505NKhY0clwyN+/RIPHz9x4or0jqkTgrDPjrBi7R87XoXkYL3RbXUNJDFSj6zjgmMshbbdXLX9OkI2+642C8a2tj3GaBQw1By75siV6b6EpBKpOnT0Kmv7ZfdqFiDss8acrfe37zwCjxwCF66qD15MEyd7Uhr7KJ2DpbN+2Oq5mOtqBF5iZD63upSzqeV62AEMrTE5xVhSnGzqT8uJwNA1nrXxAlRUnZjGjfbOvxQcnhWsKo2h1Vc1lKGZ/JXPxP/oIxO0ejlQPY/thFufbsxZyL48rBWq83Lzc3Hm+N6M9My25Bg8P867drdWGZnRkjF+qxbaZVI7PG4ymxyCkHR/ZXG0tqQ+6/AfqopiMKwB2GqpC+6RO6Uyp3wP7JM1enyRu3/y8HrhLn9l0YqirdQBzdB+Q3a4nfTw5bd1YnGk1+zb5yFLU7PcTKFkz4+PT0l3w8Bix6KS2sp/Xsd9jz7vz3y39+wpqZiiJAQEcPTqpd2w/HZ+c0JKUlGApiqTBntkMgdEMjzi0ouxrC9hAHbM70tJMJUkoo0pGdXKWAGMyKYDY/KC0wOU2qTakobMoHR/1eEFYI3GQP2gZwMHDQ8afHXQoOva8ShodTmHAsvKHuc9gerWsF/4m64tPRb8YFTVZ3g94NIreDf70rxCLwvq4FoAaCUIXmzbFoDosATE/OCu8d3slAlOTLCvFgxgreiy+NfamEbIBV9vpuCgQlGgq52ojqNQGcWTurioEnUnPPL7xA8zPeOn7p7yKyvYZ9eY3xiskdeaLrRL0NXoBgSmPzSYzndpFBa2MdBpo1eiS6c+NjoFrNrg+nSo0aVPj15WGBu9PlYGOZyszNoUo7khBOLVuphZPmqgh4oSKla4yINqEowWJmc6iaF87R42uDbmuIXRnjq6ehYDIxcz+rxI4SJEQ1Xq1QUl3KqUmUG/Lh2+tgzQYNXLwDCB8qfY2srIIlGYMD1xtt4xu12oDofOsJWBQQ9cl+7rMsLKIoxeQQ0CkM01FQwFAA==); }</style></defs><rect x="0" y="0" width="120.16666412353516" height="47" fill="#ffffff"></rect><a href="https://google.com"><g transform="translate(10 10) rotate(0 50.08333206176758 13.5)"><text x="0" y="20.08" font-family="Nunito, Segoe UI Emoji" font-size="20px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">google link</text></g></a></svg>

the steps im taking to embed svg in docusaurus is :

1. create a docusaurus project yarn create docusaurus my-website classic
2. cd my-website
3. yarn install
4. yarn start

and

1. convert above svg code to jsx output using this website https://react-svgr.com/playground/
2. copy jsx code from website and paste it in this directory my-website/src/components/InteractiveSvg.js
3. import that InteractiveSvg.js in intro.md example:

my-website/docs/intro.md

import InteractiveSvg from '@site/src/components/InteractiveSvg';

<InteractiveSvg />

but problem with this is:
i CAN select the text using mouse but when i click on it; it does NOT redirect me to google.com

i want when i click on it. it should redirect me to google.com or specified link
however this example svg have only one link in it but i want my one svg can have multiple links and all should work the same

same as you have multiple nodes in a tree and when you click on specific node it will redirect you to specific link
example : clicking on A,B,C will redirect you to

A = google.com
B = github.com
C = youtube.com

they all links are in one SVG file

---

however my knowledge of the react and it's component is next to zero and i would love to make effort under your guidance
if i will have any step by step guide to include clickable svg in that i would really appreciate your effort and im so glad im having a reply from you. that truly mean a lot to me

thanks : )
two pink heart emojis

[slorber]

however my knowledge of the react and it's component is next to zero a

Unfortunately it's the Docusaurus responsibility to teach React. If you want to achieve something like that, you must learn, and I'm not a teacher.

Your SVG conversion probably went wrong and removed the href attribute:

With basic React and SVG knowledge, you can make it work.