15

I have SVG image file with several nodes each is associated with URL. If I open this file directly in browser I can click on each node and it will open different URLs. However when I use this picture in my Sphinx documentation it doesn't work - picture rendered as a whole so I need to open it by View Image and only then I can click on nodes.

I'm using standard image directive:

.. image:: myfile.svg

Probably I need to use something else?

3
  • There is a similar issue in the graphviz extension. I guess this issue may be in Docutils, which is the foundation on which Sphinx is built.
    – xuhdev
    Jan 14, 2016 at 4:09
  • I don't think this is a bug---using different ways to embed svg has different issues. See here. You can ask on Docutils mailing list for some hep and possibly request this feature, or you may write a sphinx extension to include svg images in the way you want.
    – xuhdev
    Jan 14, 2016 at 16:18
  • Did you find a solution to this? Sep 21, 2017 at 11:55

6 Answers 6

15
+200

Sphinx generates <img> tags for images, which makes sense in most cases. However, to have the links inside the svg be clickable, you should use an <object> tag, i.e.:

.. raw:: html

    <object data="myfile.svg" type="image/svg+xml"></object>

(Regarding the GitHub issue you linked to, I don't think there's a lot that Sphinx can do here—it's really quite complicated—short of introducing a new option to the .. image directive that lets the user specify whether to render as an img or object tag.)

1
  • @ruslo I think the sphinx maintainers took your bug report to mean that you're proposing to render all .. image svgs as an object tag. And that may break some other image options like :width and :height. But if you just write your own raw HTML that doesn't concern you.
    – mb21
    Feb 22, 2016 at 20:15
7

One simple solution would be to add a link to the svg file in this .. image:: myfile.svg command:

.. image:: myfile.svg
   :target: _images/myfile.svg

Take care of checking the relative directory where the images are copied when the html files are generated. By default, it should be _images/.

This way, you can click the SVG file, to see it in a plain page, and then click on it as usual (not a perfect solution but still..).

1
  • @ruslo I think adding a target like this helps because the reflex for neophyte user is to click on an image, not Right ClickView Image.
    – Næreen
    Feb 6, 2016 at 17:10
5

I am probably misunderstanding the OP's requirements, but why not just include the SVG into the sphinx documentation as html? This appears to work for me:

.. raw:: html
    :file: images/image.svg
1
  • This answer works for me. I had trouble to make the accepted answer work. I am using Sphinx Version: 4.0.1
    – panc
    Jun 9, 2021 at 0:43
3

To include clickable svg links within sphinx I did the following:

.. raw:: html
    :file: ../graphs/pymedphys_analysis.gamma.svg

See:

https://raw.githubusercontent.com/pymedphys/pymedphys/1915b9496e93782bdac7dcebff7e26e470e5ff57/docs/graphs/graphs.rst

This then freed me to write the following within an imported style sheet:

svg {
    width: 100%;
}

https://github.com/pymedphys/pymedphys/blob/f4d404fa1cf3f551c4aa80ef27438f418c61a436/docs/_static/style.css

This made the svg fit the container as desired.

See:

https://pymedphys.com/developer/dependencies.html#pymedphys

2

I like this way

.. raw:: html

    <a href="https://www.google.com/">
        <img src="https://img.shields.io/static/v1?&style=plastic&logo=appveyor&label=Google&message=link2google&color=FF0000" alt="No message"/></a>

demo

1

I'm still looking for a better solution myself, but I ran into the same problem and used this workaround.

You can use the download directive to give the user a link to the file.

:download:`svg <images/image.svg>`

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.