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
git/git-scm.com#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

layouts/_default/baseof.html

@@ -20,8 +20,16 @@
       [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
         if (!vizInstance) vizInstance = await Viz.instance()
         if (x.style.display === 'none') return
-        const svg = (await Viz.instance()).renderSVGElement(x.innerText, { engine })
-        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'
       })
     })