quarto-dev / quarto-dev/quarto-cli

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

Open
#6,581 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility enhancement
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating Quarto's Lua filter for SVG handling and trace the path used when embed-resources is false; compare the proposed behavior with the linked Pandoc and knitr discussions. Done means non-embedded SVG output uses an object element for accessibility, while embedded resources continue to produce inline SVG as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript, lua
Domain
accessibility, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.