Insert clickable SVG image into Sphinx documentation

sphinx include image
sphinx image
rst image
sphinx image file not readable
restructuredtext

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?

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

SVG image support for HTML · Issue #2240 · sphinx-doc/sphinx , and then it works. It would be nice to have SVG with clickable elements. Now​, Sphinx uses <img> tag for embed SVG images. It disables  The sphinx.ext.graphviz extension allows you to directly embed GraphViz ‘dot language’ graphs into your document files. They are then rendered to PNG or SVG images, which get added to your generated HTML documentation. Using SVG allows you to hot-link your nodes to any HTTP resource.

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

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  Then add the image in content by adding the substitution name: The screen opens: |Substitution Name| This is useful if you are using the image multiple times in a project and want to manage it in one location.

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

restructuredtext Insert clickable SVG image into Sphinx , image:: myfile.svg :target: _images/myfile.svg. @ruslo I think adding a target like this helps because the reflex for neophyte user is to click on an image, not Right  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 pictu

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

Advanced usage, For this we recommend adding the following to your Sphinx Makefile : All the temporary files needed to generate the gallery(rst files, images, chache The final files that go into the HTML version of your documentation have a particular See matplotlib_scraper() for an example of a scraper function (click on 'source'  You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.)

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

Embedding Graphs Into Your Sphinx Documents, Embed GraphViz 'dot language' graphs into your documentation, and hot-link the They are then rendered to PNG or SVG images, which get added to your contains them and thus node labels become clickable hyperlinks. You can manually embed fonts into your SVG to resolve this, but most times, will result in large SVG size, and therefore negating the advantages SVG has, over other image formats. The exception being, to use vecta.io or vecta.io/nano to produce an SVG that is very low in size, self contained without losing any fonts, and reduced complexity in

Sphinx, Sphinx is a Python package that can be used to create documentation in various formats that include Click here for details on Sphinx rendered as PNG or SVG images (y/n) [n]: > mathjax: include math, rendered in the browser by MathJax  Join me in the Full Facebook Marketing Course here: http://www.diegodavila.com/facebookmarketing Turn ANY image into a clickable Facebook Post

[PDF] Sphinx Documentation, 15.1 Do I need to use Sphinx's templates to produce HTML? make html. For more details, please read README file25 of docker images. 2.7 Installation 3.7 Autodoc. When documenting Python code, it is common to put a lot of documentation in the source files, in Click Request language and fill form. Images in Another Folder. If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

Tutorial, When documenting Python code, it is common to put a lot of documentation in the source files, in documentation 54 http://docutils.sourceforge.net/docs/ref/rst/​directives.html#image Click Request language and fill form. 4. Import SVG files to Google Docs as a drawing. Add svg to a LibreOffice Impress document wont convert it into images if you download the document as a word

Comments
  • 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.
  • 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.
  • Did you find a solution to this?
  • @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.
  • @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.