Easier way to support SVG with anchors (hyperlinks)

[dkapitan]

SVG support hyperlinks, which is nice to make clickable diagrams. Do to so, I got it to work by inserting raw html like so:

```{=html}
<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg1"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1">
    <rect
       x="329.51881"
       y="448.08399"
       width="172.45844"
       height="53.893263"
       id="rect2" />
  </defs>
  <g
     id="layer1">
    <a
       id="a2"
       xlink:href="https://quarto.org">
      <rect
         style="fill:#005e5e;stroke:#e7e5e2;stroke-width:0.4;stroke-miterlimit:5.3;paint-order:stroke fill markers"
         id="rect1"
         width="71.296295"
         height="27.703703"
         x="73.740746"
         y="111.62962"
         rx="3"
         ry="3" />
    </a>
    <text
       xml:space="preserve"
       transform="scale(0.26458333)"
       id="text1"
       style="font-weight:300;font-size:18.6667px;font-family:inter;-inkscape-font-specification:'inter Light';text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2);fill:#fff44f;stroke:#fff44f;stroke-width:1.51181;stroke-miterlimit:5.3;paint-order:stroke fill markers"><tspan
         x="329.51953"
         y="465.35945"
         id="tspan1">Click me</tspan></text>
  </g>
</svg>

It would be more convenient to be use the image syntax, like so:

![](diagram-with-hyperlink.svg)

However, because images get rendered as <p><img src="test-url.svg" class="img-fluid"></p>, the hyperlink no longer works.

When using d2, I run into the same issue of the hyperlinks not working because it is being rendered as an <img> by quarto.

Any suggestions how we could solve this? I could try to implement an extension if and when we have an idea how to make this work.

[cscheid]

I think this is for quarto-cli (the quarto tool) rather than the VS code extension, right?

[dkapitan]

@cscheid indeed this is for the cli

[cscheid]

We could consider a step in our filter chain that does this conversion, but it shouldn't ever happen automatically. <svg>...</svg> and <img src="file.svg"> are semantically quite different (even for things like CSS), and ![] has meant "image" since the beginning of Markdown.

You could also write the filter yourself. It would have to detect the images you want to change (I would recommend using a specific class, like "inline-svg"), and then replace the image element with a raw HTML block. The following is untested, but should give you an idea:

function Image(image)
  if not image.classes:includes("inline-svg") then return nil end
  -- this assume images has relative path
  local filename = pandoc.path.join(pandoc.path.directory(quarto.doc.input_file), image.src)
  local contents = io.open(filename, "r"):read("*all")
  return pandoc.RawInline("html", contents)
end

This will still put the image inside a paragraph. If you need to remove the paragraph, then you'll have to write a filter with function Para(para) that looks at the para.content array, finds images, replaces them, etc.