Insert SVG file as `<object>` instead of `<img>` in HTML (better for accessibility)

[cderv]

This is possible in knitr following discussion at https://github.com/yihui/knitr/issues/2152 by opting in using option options(knitr.svg.object = TRUE). Unfortunately, this does not work in Quarto because we don't use knitr plot hooks.

This is important for accessibility as explained by @jooyoungseo at https://github.com/yihui/knitr/issues/2152#issuecomment-1218920811.

When embed-resources: true, <svg> will be included but when embed-resources: false, <img> will be used.

Since svg is embedded via tag, there is no way to access the svg DOM tree within the generated html output. In order to let assistive technology agents, such as screen readers, interact with the svg, we may want to take different approaches.

This treatment for SVG file was discussed in Pandoc at

• https://github.com/jgm/pandoc/issues/7906

but solution recommended there was too use a Lua filter to create the <object> when this is a svg file.

I suggest we do the same in our Lua filter in Quarto.

cc @jooyoungseo

[jimjam-slam]

While I would love to see SVGs embedded in a way that surfaces their DOM (and therefore makes them more accessible), I would also note alternative solutions to <object> or <embed>. SVGs operate like <iframe>s but without the ability to impose any security sandbox.

There was some talk about either:

1. deprecating <object> and <embed> and bringing their auto-sizing capability to <iframe> for SVGs, or
2. adding the sandbox attribute to <object> or <embed>.

I don't know that it's gone anywhere since last November, though.

Maybe you could write a Lua filter that uses an <object> and <embed> for a local SVG or an <img> for a remote one as a rough trust heuristic?

[nichtich]

A use cases for <object> instead of <iframe> is to allow links in images pointing to other parts of the publication.