Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clickable SVG directive/bypass #176

Open
karl-mohring opened this issue Jun 26, 2020 · 5 comments
Open

Clickable SVG directive/bypass #176

karl-mohring opened this issue Jun 26, 2020 · 5 comments
Labels
enhancement New feature or request

Comments

@karl-mohring
Copy link

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

@karl-mohring karl-mohring added the enhancement New feature or request label Jun 26, 2020
@chrisjsewell
Copy link
Member

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

@karl-mohring
Copy link
Author

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).

test_svg.zip

@chrisjsewell
Copy link
Member

chrisjsewell commented Jun 26, 2020

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/

@karl-mohring
Copy link
Author

No worries. Will give it a look.
Thanks.

@volkerjaenisch
Copy link

volkerjaenisch commented Feb 15, 2024

Same here.
Is there any progress on this matter?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants