python-sphinxrestructuredtextread-the-docs

Insert clickable SVG image into Sphinx documentation


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?


Solution

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