graphviz: use <img> elements instead of <svg> ones

There are some issues when adding SVGs inside <svg> HTML elements, e.g.
that positioning can be harder than with <img> ones, as pointed out at
#2052 (comment).

Let's use <img> elements instead, passing the SVG via data URLs.

There are more benefits to that: For example, most modern browsers allow
copying an image into the clipboard that is specified as an `<img>`
element, but not `<svg>` ones. Likewise, the "Open Image in New Tab"
functionality typically only works with the former but not with the
latter.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/js/application.js

@@ -787,8 +787,16 @@ var Graphviz = {
     let vizInstance
     [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
       if (!vizInstance) vizInstance = await Viz.instance()
-      const svg = vizInstance.renderSVGElement(x.innerText)
-      x.parentNode.insertBefore(svg, x);
+      const options = {
+        format: "svg",
+      }
+      const svg = vizInstance.renderString(x.innerText, options)
+      const img = document.createElement('img')
+      img.setAttribute(
+        'src',
+        `data:image/svg+xml;utf8,${encodeURIComponent(svg.substring(svg.indexOf('<svg')))}`
+      )
+      x.parentNode.insertBefore(img, x);
       x.style.display = 'none'
     });
   }