Hyperlinks in SVG image (glightbox)

[woter1832]

Hi,

I hope I'm in the right repo for this question.

I've created an SVG graphic that includes hyperlinks. I have the glightbox plugin enabled and it is set to zoom.

The image was created in Inkscape.

Navigating directly to the image, the links work: https://thingsgeeky.arcotek.co.uk/public/computing/assets/link-test.svg.

An iFrame works, but I need the zoom functionality.

However, neither native HTML, nor Markdown works.

HTML

 <p align="center">  <img class="img-drop-shadow" width="100%" src="../../assets/link-test.svg"/>
</p>

Markdown

![Test](../../assets/link-test.svg){ .skip-lightbox } # Disables zoom effect.

![Test](../../assets/link-test.svg)

The odd thing is that this was working and the only changes I've made are to the .mk file.

Here's a link to the page. The real SVG graph and a few test images.
https://thingsgeeky.arcotek.co.uk/public/computing/devices/euc/laptop-selection.html

mkdocs.yml

- glightbox:
      effect: zoom
      zoomable: true
      draggable: true
      skip_classes:
        - skip-lightbox

I would be very grateful if anyone could help.

Thanks in advance.

[kamilkrzyskow]

Hello @woter1832,
for SVGs to work like this you need to include them in raw HTML text form via the svg tag, not via the img tag.
view-source:https://thingsgeeky.arcotek.co.uk/public/computing/assets/link-test.svg

You could use the macros plugin to use the include file syntax and include the files in Markdown.

[woter1832]

Hi @kamilkrzyskow,

Thanks for replying.

I'm not sure what you mean by view-source:. I can't find any reference to this. I assume it's the <SVG> tag's equivalent of src.

The only way I can find to embed an SVG is with the syntax:

<object data="../../assets/link-test.svg" type="image/svg+xml"></object>

Although the hyperlinks work, glightbox ignores it.

Thanks.

[kamilkrzyskow]

I mean the view-source mode of any browser, SVG images are text files with vector data for rendering. If you copy paste the above in Firefox / Chrome it should display the text form of the SVG (which includes the svg tag), a text editor can work as well, open the SVG in notepad.

I focused on the "getting hyper links to work" issue, but now I understand your requirement is to be able to use glightbox to be able to zoom into the image 🤔 I never used that module, so I don't know how it works, but I doubt it support raw HTML SVGs hmm

Another similar issue which comes to mind is the lack of zoom support in MermaidJS, and PLAYG0N made a plugin which incorporates panzoom into the page and allows for zooming.

• Zooming of Mermaid content? #7199 (comment)

Perhaps you have to implement a similar custom solution like PLAYG0N instead of relying on glightbox
You could make a hook or use additional javascript which would include the panzoom functionality.

EDIT: Looking at how https://github.com/PLAYG0N/mkdocs-panzoom works, it supports both mermaid and d2 diagrams, so perhaps any SVG would work 🤔 You could try using the plugin first, before working on a custom solution.