Search code examples
githubsvgmarkdowngithub-pagesgithub-flavored-markdown

Github markdown image with multiple links

I have a requirement to show a high level architecture image in markdown on Github. I would like different segments of the image to link to specific markdown files.

I thought I could do this with .SVG, as SVG supports multiple links embedded in the graphic. However, when I embed my SVG in Github with this syntax:

![High Level Technical Architecture](../images/highLevelArchitecture.svg)

The links I have throughout the .SVG no longer seem to be exposed, and instead the SVG becomes a single hyperlink to the specific SVG file on GitHub.

Is there a smart way to achieve an image mapped with multiple links on Github markdown, or do I have to mosaic many smaller images... ugh.

Thanks.

Solution

  • Links only work if the SVG is inline or embedded as an iframe. Iframes will work on GitHub pages, but not on the standard repo page.

    <iframe src="../images/highLevelArchitecture.svg"></iframe>