MyST-Parser
MyST-Parser copied to clipboard
executablebooks
Clickable SVG directive/bypass
I'm trying to find a nice way of embedding links into SVG objects in place of a text TOC/hyperlinks between pages. The problem is that the links are stripped out during parsing when included as an image, yet the links remain when viewing the image file in the _build folder. I could just use a target argument, but that makes the entire image a link, rather than the individual elements in the image.
Describe the solution you'd like Ideally, I'd just use an svg-specific directive or modifier on the image directive that bypasses whatever process that strips the links. Something like:
'''{image} svg/path.svg
:clickable: true
'''
Describe alternatives you've considered My current workaround is to include the image normally on the page with 0 height, so the image is copied on build, then use html to tag the file as an object.
'''{image} /images/test.svg
:height: 0px
'''
<object data="../_images/test.svg" type="image/svg+xml"></object>
I mean, it works, but it feels dirty and I lose any size controls that I usually have with the image directive. The Jupyter-Book documentation also mentions that use of raw HTML is "highly discouraged", so is there an official solution that doesn't use this method?
Additional context Relevant stackoverflow
hey @Leenix, yeh interesting, can you provide an example SVG with these links in, and/or a link to the project which you are using this in
Testing SVG attached. The top block links to a page in my book. I'd upload a better one, but other attempts at editing links open the pages in a separate tab (but successfully).
thanks, I'll try to have a look into, but it might not be straight away, since I'm pretty busy at the moment 🙄. As an alternative, if the main goal is to have clickable panels, you might want to have a look at https://sphinx-panels.readthedocs.io. I created this with exactly that in mind, so that I could make this splash page: https://aiida.readthedocs.io/projects/aiida-core/en/latest/
