svg device + embed-resources: true not working as expected

[alexCardazzi]

Bug description

When I use an svg device with self-contained: true, the text in every plot (except the first) gets...wonky? See below for the basic code I am using. This behavior also occurs when I use embed-resources: true, but not when I use standalone: true.

Steps to reproduce

---
title: "Untitled"
format: html
self-contained: true
---

```{r, include=FALSE}
knitr::opts_chunk$set(dev='svg')
```

## Header

Text to start

```{r}
plot(0, 0, xlab = "hello")
legend("topright", legend = c("text here", "text there"))
```

some text inbetween

```{r}
plot(0, 0, xlab = "goodbye")
legend("topright", legend = c("text here", "text there"))
```

Expected behavior

No response

Actual behavior

Your environment

> sessionInfo()
R version 4.3.1 (2023-06-16 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default


locale:
[1] LC_COLLATE=English_United States.utf8  LC_CTYPE=English_United States.utf8   
[3] LC_MONETARY=English_United States.utf8 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.utf8    

time zone: America/New_York
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
[1] compiler_4.3.1    tools_4.3.1       rstudioapi_0.15.0 knitr_1.43        xfun_0.39

Quarto check output

$ quarto check
Quarto 1.4.504
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.9: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.504
      Path: C:\Users\alexc\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2023.01
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\alexc\AppData\Roaming\TinyTeX\bin\win32\
      Version: 2022

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.6.5
      Path: C:/Users/alexc/AppData/Local/Programs/Python/Python36/python.exe
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with py -m pip install jupyter

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/PROGRA~1/R/R-43~1.1
      LibPaths:
        - C:/Users/alexc/AppData/Local/R/win-library/4.3
        - C:/Program Files/R/R-4.3.1/library
      knitr: 1.43
      rmarkdown: 2.24

[>] Checking Knitr engine render......OK

[cderv]

This is an interesting bug.

• When not using embed resources - svg shows ok. Which is proof that svg are ok.

First SVG produced is

Second is

As seen above the files are ok. I copied them from the *_files folder

Now using this .md file

---
title: "Untitled"
---

![](index_files/figure-html/unnamed-chunk-1-1.svg)

![](index_files/figure-html/unnamed-chunk-2-1.svg)

And trying to convert with Pandoc only by embeding the resources

quarto pandoc --to html --embed-resources --standalone -o test.html test.md

I can reproduce the issue

Notice the caption on the label on x axis. The second one seems to be mixed with the first one. It should be Goodbye.

So this is either a Pandoc issue while embedding. Or a HTML issue somehow, because two SVG are too similar.

This is really strange - look at this other example

---
title: "Untitled"
format: 
  html:
    fig-format: svg
keep-md: true
embed-resources: true
---

## Header

Text to start

```{r}
plot(1:10, xlab = "hello")
legend("topright", legend = c("text here", "text there"))
```

some text inbetween

```{r}
plot(100:110, xlab = "goodbye")
```

Without embed-resources: true I get correct axis on second plot

But now with embed-resources: true , look at the second plot axis

Not sure where this comes from - but definitely unexpected for plots...

Probably a Pandoc issue .

[mcanouil]

Does this also happen when using svglite as graphics device? (AFK)

[cderv]

And now getting a black background if I set svglite with

```{r, include=FALSE}
knitr::opts_chunk$set(dev='svglite')
```

[cscheid]

And now getting a black background if I set svglite with

We have a separate bug about that; it comes from Pandoc skipping the classes of the svg element when embedding it.

[mcanouil]

The black background is related to another issue, but I believe the issue here with SVG (no matter the tool used) is the new way Pandoc has to embed them.

EDIT:

• Pandoc 3.1.6 breaks svglite with self contained html #7369

Worth look into the SVG file before and after Pandoc processing.

[cderv]

I opened

• in HTML format, embedded SVG gets modified  jgm/pandoc#9206

about this specific SVG modification issue.

For #7369 and we need to come up with a correct reproducible example to open an issue with Pandoc, or come up with a solution.

[cderv]

There was an issue when embeding SVG in pandoc that were using the same id in some elements. This created some issues.
It has been fixed in Pandoc : jgm/pandoc@fc3d202

But it will be available in Quarto only when next Pandoc release will be bundled.

[alexCardazzi]

Thanks for this! Is there a (general) timeline for this being available in Quarto? For example, are we talking days, weeks, or months? Curious because I’d like to switch back to SVG for a course I’m teaching in January. Any insight would be appreciated. Thank you.

[mcanouil]

It's nearly out of Quarto's hands as it is Pandoc.
If Pandoc makes a release before 1.4 release, it could be in it, otherwise it won't.

[cscheid]

If Pandoc makes a release before 1.4 release, it could be in it, otherwise it won't.

It's very unlikely that we'll do another Pandoc bump before 1.4 is out.

[cderv]

We've update to latest Pandoc 3.1.11