Processing svg clickable links during publication

[damageboy]

Hi,
I'd like to be able to include/publish svg files (I'm personally using drawio and saving ediable svg files) that have links to other docusaurus content (other pages for example) or other svg files that are part of the published documentation site.

Is processing links inside the svg a reasonable thing to expect?

[slorber]

SVGs rendered with React/JSX work, just use our Link component instead of <a> tags:

        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <Link to="/docs">
            <circle cx="50" cy="40" r="35" />
          </Link>
          <Link to="/blog">
            <text x="50" y="90">
              Blog
            </text>
          </Link>
        </svg>

If you want to use .svg files we don't provide good support for that and the integration would be more complex.

[damageboy]

So in my case, I indeed use svg files (e.g. I use drawio which saves editable .svg files).

IIUC this would require empedding such SVGs into the document and processing their links to make the links clickable?

[slorber]

IIUC this would require empedding such SVGs into the document and processing their links to make the links clickable?

Yes

But if you want you can also add click listeners to all svgs on your page and do an "if (clickTarget is the one I care about)" do act based on which svg sub element was clicked. That's outside the scope of Docusaurus: you would do this in Docusaurus the same way you'd do this in any other web app, using svg.addEventListener("click",...)