Sphinx docs with SVG images won't render on IE11

Question

I am currently building Sphinx documentation and have UML diagram which is built by graphviz and is generated as SVG image. This SVG file is placed in the html template that is auto-generated by Sphinx.

The SVG is displayed on Chrome and Firefox with no problem, however IE11 does not show it. Is there anything I have to adjust in the html to get the image displayed?

By the way, same html with PNG images instead works everywhere (Chrome, Firefox and IE11).

This is the piece of html which should render the svg file.

<div class="section" id="uml-class-diagram">
  <h1>UML Class Diagram<a class="headerlink" href="#uml-class-diagram" title="Permalink to this headline">¶</a></h1>
  <object data="_images/graphviz- 9fe511f008ffbdc169ab624ae589b7c8a000c75f.svg" type="image/svg+xml"><p class="warning">digraph &quot;classes_kats4&quot; {SOME GRAPH TO BE DISPLAYED}</p></object>
</div>

This is the header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>UML Class Diagram &#8212; xx documentation</title>

  <link rel="stylesheet" href="_static/sphinxdoc.css" type="text/css" />
  <link rel="stylesheet" href="_static/pygments.css" type="text/css" />

  <script type="text/javascript">
    var DOCUMENTATION_OPTIONS = {
      URL_ROOT:    './',
      VERSION:     'xx',
      COLLAPSE_INDEX: false,
      FILE_SUFFIX: '.html',
      HAS_SOURCE:  true,
      SOURCELINK_SUFFIX: '.txt'
    };
  </script>
  <script type="text/javascript" src="_static/jquery.js"></script>
  <script type="text/javascript" src="_static/underscore.js"></script>
  <script type="text/javascript" src="_static/doctools.js"></script>
</head>

If the SVG is not displaying, it is more than likely the SVG. Please create a [MCVE] so we can see for ourselves. — Paul LeBeau, Jul 06 '17 at 13:34

score 1 · Accepted Answer · answered Jul 06 '17 at 14:46

I figured it out, the problem was not with the SVG itself, because I was able to open the image using IE11.

The solution was here SVG as source in <img> tag not displaying in Internet Explorer 11.

I had to disable Compatibility View by adding tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Sphinx docs with SVG images won't render on IE11

1 Answers1