Insert clickable SVG image into Sphinx documentation

Question

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?

There is a similar issue in [the graphviz extension](https://github.com/sphinx-doc/sphinx/pull/2176). I guess this issue may be in Docutils, which is the foundation on which Sphinx is built. — xuhdev, Jan 14 '16 at 04:09
I don't think this is a bug---using different ways to embed svg has different issues. See [here](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML). 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 '16 at 16:18

score 15 · Accepted Answer · edited May 23 '17 at 12:07

15

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

edited May 23 '17 at 12:07

Community

1
1

answered Feb 22 '16 at 20:05

mb21

34,845
8
116
142

@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](http://docutils.sourceforge.net/docs/ref/rst/directives.html#image) like `:width` and `:height`. But if you just write your own raw HTML that doesn't concern you. – mb21 Feb 22 '16 at 20:15

Næreen · Answer 2 · 2016-02-22T12:35:47.360

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

edited Feb 22 '16 at 12:35

answered Feb 05 '16 at 18:47

Næreen

1,126
1
12
23

@ruslo I think adding a target like this helps because the reflex for neophyte user is to click on an image, not ``Right Click`` → ``View Image``. – Næreen Feb 06 '16 at 17:10

score 5 · Answer 3 · answered May 03 '18 at 09:51

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

answered May 03 '18 at 09:51

winni2k

1,460
16
19

This answer works for me. I had trouble to make the accepted answer work. I am using Sphinx `Version: 4.0.1` – panc Jun 09 '21 at 00:43

score 3 · Answer 4 · answered May 14 '19 at 11:32

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

Carson · Answer 5 · 2020-03-20T07:39:14.097

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>

edited Mar 20 '20 at 07:39

answered Mar 20 '20 at 06:36

Carson

6,105
2
37
45

score 1 · Answer 6 · answered Sep 21 '17 at 12:29

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>`

answered Sep 21 '17 at 12:29

bluprince13

4,607
12
44
91

Insert clickable SVG image into Sphinx documentation

6 Answers6

Linked