Tikz SVG-figure and embed-resources: true doesn't work well

[snhansen]

Description

I'm creating a figure using TikZ that I want to include as SVG. I can do this by the chunk option #| fig.ext: svg but when combined with embed-resources: true I get some weird behavior. Below is an example first without embedding resources:

---
format: html
---

# Section

```{r}
#| engine: tikz
#| echo: false
#| fig.align: center
#| fig.ext: svg
\begin{tikzpicture}
 \draw (0,0) circle (1cm);
 \node (x) {abcæeadøe};
\end{tikzpicture}
```

The result is below. Everything looks fine except there's a weird space between b and c in the text

If we introduce embed-resources: true in the example we get this result:

So it seems that some unwanted scaling is going on. I'm using Quarto v. 1.5.43 on Windows 11 to produce this.

[cderv]

I believe this is related to SVG embedding.

Without embed-resources: true, we get a svg included like this in intermediate .md

::: {.cell layout-align="center"}
::: {.cell-output-display}
![](index_files/figure-html/unnamed-chunk-1-1.svg){fig-align='center' width=672}
:::
:::

and in HTML

<img src="index_files/figure-html/unnamed-chunk-1-1.svg" class="img-fluid quarto-figure quarto-figure-center figure-img" width="672">

When setting embed-resources: true, the HTML directly embed the svg inline

<svg id="svg_152e657a68881123106c" role="img" width="672" height="57.0899pt" viewBox="-72.00005 -72.00005 57.0899 57.0899">
<defs>
<font id="svg_152e657a68881123106c_cmr10" horiz-adv-x="0">
<font-face font-family="cmr10" units-per-em="1000" ascent="750" descent="250"></font-face>
<glyph unicode="æ" horiz-adv-x="722" vert-adv-y="722" glyph-name="ae" d="M396 252C406 398 489 426 525 426C620 426 625 291 627 252H396ZM395 231H668C690 231 693 231 693 252C693 363 635 448 526 448C482 448 426 432 375 371C346 419 286 448 222 448C142 448 71 402 71 335C71 305 91 288 117 288C145 288 163 308 163 334C163 346 158 379 112 380C137 412 184 426 220 426C271 426 326 385 326 298V250C164 250 45 188 45 92C45 13 137-11 204-11C285-11 347 29 371 78C430-3 508-11 538-11C651-11 693 100 693 119C693 129 685 131 680 131C671 131 670 127 665 111C650 61 604 14 542 14C532 14 395 14 395 231ZM326 229C326 205 326 185 335 154C338 143 338 135 338 132C338 68 281 11 209 11C162 11 122 45 122 92C122 146 164 223 326 229Z"></glyph>
<glyph unicode="ø" horiz-adv-x="500" vert-adv-y="500" glyph-name="oslash" d="M439 522L420 534L354 418C331 433 293 448 250 448C131 448 35 342 35 213C35 133 75 66 129 28L67-80L60-90L79-102L147 16C170 3 207-11 249-11C368-11 464 89 464 213C464 311 410 378 372 406L439 522ZM146 59C109 101 104 158 104 214C104 256 106 312 133 357C163 409 213 426 249 426C289 426 320 408 338 392L146 59ZM354 374C393 328 395 255 395 214C395 181 395 121 366 75S289 11 250 11C225 11 191 18 163 42L354 374Z"></glyph>
<glyph unicode="a" horiz-adv-x="500" vert-adv-y="500" glyph-name="a" d="M333 76C337 36 364-6 411-6C432-6 493 8 493 89V145H468V89C468 31 443 25 432 25C399 25 395 70 395 75V275C395 317 395 356 359 393C320 432 270 448 222 448C140 448 71 401 71 335C71 305 91 288 117 288C145 288 163 308 163 334C163 346 158 379 112 380C139 415 188 426 220 426C269 426 326 387 326 298V261C275 258 205 255 142 225C67 191 42 139 42 95C42 14 139-11 202-11C268-11 314 29 333 76ZM326 240V140C326 45 254 11 209 11C160 11 119 46 119 96C119 151 161 234 326 240Z"></glyph>
<glyph unicode="b" horiz-adv-x="555" vert-adv-y="555" glyph-name="b" d="M172 377V694L28 683V652C98 652 106 645 106 596V0H131C132 1 140 15 167 62C182 39 224-11 298-11C417-11 521 87 521 216C521 343 423 442 309 442C231 442 188 395 172 377ZM175 114V320C175 339 175 340 186 356C225 412 280 420 304 420C349 420 385 394 409 356C435 315 438 258 438 217C438 180 436 120 407 75C386 44 348 11 294 11C249 11 213 35 189 72C175 93 175 96 175 114Z"></glyph>
<glyph unicode="c" horiz-adv-x="444" vert-adv-y="444" glyph-name="c" d="M117 218C117 381 199 423 252 423C261 423 324 422 359 386C318 383 312 353 312 340C312 314 330 294 358 294C384 294 404 311 404 341C404 409 328 448 251 448C126 448 34 340 34 216C34 88 133-11 249-11C383-11 415 109 415 119S405 129 402 129C393 129 391 125 389 119C360 26 295 14 258 14C205 14 117 57 117 218Z"></glyph>
<glyph unicode="d" horiz-adv-x="555" vert-adv-y="555" glyph-name="d" d="M380 55V-11L527 0V31C457 31 449 38 449 87V694L305 683V652C375 652 383 645 383 596V380C354 416 311 442 257 442C139 442 34 344 34 215C34 88 132-11 246-11C310-11 355 23 380 55ZM380 323V118C380 100 380 98 369 81C339 33 294 11 251 11C206 11 170 37 146 75C120 116 117 173 117 214C117 251 119 311 148 356C169 387 207 420 261 420C296 420 338 405 369 360C380 343 380 341 380 323Z"></glyph>
<glyph unicode="e" horiz-adv-x="444" vert-adv-y="444" glyph-name="e" d="M112 252C118 401 202 426 236 426C339 426 349 291 349 252H112ZM111 231H390C412 231 415 231 415 252C415 351 361 448 236 448C120 448 28 345 28 220C28 86 133-11 248-11C370-11 415 100 415 119C415 129 407 131 402 131C393 131 391 125 389 117C354 14 264 14 254 14C204 14 164 44 141 81C111 129 111 195 111 231Z"></glyph>
</font>
</defs>
<style type="text/css">
text.f0 {font-family:cmr10;font-size:9.96264px}

</style>
<g id="svg_152e657a68881123106c_page1">
<path d="M-15.1094-43.453125C-15.1094-59.1094-27.7969-71.8008-43.453125-71.8008C-59.1094-71.8008-71.8008-59.1094-71.8008-43.453125C-71.8008-27.7969-59.1094-15.1094-43.453125-15.1094C-27.7969-15.1094-15.1094-27.7969-15.1094-43.453125Z" stroke="#000" fill="none" stroke-width=".3985" />
<text class="f0" x="-43.45431" y="-43.45431" transform="matrix(1 0 0 1 -23.3849 2.975)">ab<tspan x="-32.661406">cæeadøe</tspan></text>
</g>
</svg>

In the second case, you can see the SVG height is set to some pt unit. It comes directly from the .svg file produced

<?xml version='1.0' encoding='UTF-8'?>
<!-- This file was generated by dvisvgm 3.2.2 -->
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='57.0899pt' height='57.0899pt' viewBox='-72.00005 -72.00005 57.0899 57.0899'>
<defs>
<font id='cmr10' horiz-adv-x='0'>
<font-face font-family='cmr10' units-per-em='1000' ascent='750' descent='250'/>
<glyph unicode='æ' horiz-adv-x='722' vert-adv-y='722' glyph-name='ae' d='M396 252C406 398 489 426 525 426C620 426 625 291 627 252H396ZM395 231H668C690 231 693 231 693 252C693 363 635 448 526 448C482 448 426 432 375 371C346 419 286 448 222 448C142 448 71 402 71 335C71 305 91 288 117 288C145 288 163 308 163 334C163 346 158 379 112 380C137 412 184 426 220 426C271 426 326 385 326 298V250C164 250 45 188 45 92C45 13 137-11 204-11C285-11 347 29 371 78C430-3 508-11 538-11C651-11 693 100 693 119C693 129 685 131 680 131C671 131 670 127 665 111C650 61 604 14 542 14C532 14 395 14 395 231ZM326 229C326 205 326 185 335 154C338 143 338 135 338 132C338 68 281 11 209 11C162 11 122 45 122 92C122 146 164 223 326 229Z'/>
<glyph unicode='ø' horiz-adv-x='500' vert-adv-y='500' glyph-name='oslash' d='M439 522L420 534L354 418C331 433 293 448 250 448C131 448 35 342 35 213C35 133 75 66 129 28L67-80L60-90L79-102L147 16C170 3 207-11 249-11C368-11 464 89 464 213C464 311 410 378 372 406L439 522ZM146 59C109 101 104 158 104 214C104 256 106 312 133 357C163 409 213 426 249 426C289 426 320 408 338 392L146 59ZM354 374C393 328 395 255 395 214C395 181 395 121 366 75S289 11 250 11C225 11 191 18 163 42L354 374Z'/>
<glyph unicode='a' horiz-adv-x='500' vert-adv-y='500' glyph-name='a' d='M333 76C337 36 364-6 411-6C432-6 493 8 493 89V145H468V89C468 31 443 25 432 25C399 25 395 70 395 75V275C395 317 395 356 359 393C320 432 270 448 222 448C140 448 71 401 71 335C71 305 91 288 117 288C145 288 163 308 163 334C163 346 158 379 112 380C139 415 188 426 220 426C269 426 326 387 326 298V261C275 258 205 255 142 225C67 191 42 139 42 95C42 14 139-11 202-11C268-11 314 29 333 76ZM326 240V140C326 45 254 11 209 11C160 11 119 46 119 96C119 151 161 234 326 240Z'/>
<glyph unicode='b' horiz-adv-x='555' vert-adv-y='555' glyph-name='b' d='M172 377V694L28 683V652C98 652 106 645 106 596V0H131C132 1 140 15 167 62C182 39 224-11 298-11C417-11 521 87 521 216C521 343 423 442 309 442C231 442 188 395 172 377ZM175 114V320C175 339 175 340 186 356C225 412 280 420 304 420C349 420 385 394 409 356C435 315 438 258 438 217C438 180 436 120 407 75C386 44 348 11 294 11C249 11 213 35 189 72C175 93 175 96 175 114Z'/>
<glyph unicode='c' horiz-adv-x='444' vert-adv-y='444' glyph-name='c' d='M117 218C117 381 199 423 252 423C261 423 324 422 359 386C318 383 312 353 312 340C312 314 330 294 358 294C384 294 404 311 404 341C404 409 328 448 251 448C126 448 34 340 34 216C34 88 133-11 249-11C383-11 415 109 415 119S405 129 402 129C393 129 391 125 389 119C360 26 295 14 258 14C205 14 117 57 117 218Z'/>
<glyph unicode='d' horiz-adv-x='555' vert-adv-y='555' glyph-name='d' d='M380 55V-11L527 0V31C457 31 449 38 449 87V694L305 683V652C375 652 383 645 383 596V380C354 416 311 442 257 442C139 442 34 344 34 215C34 88 132-11 246-11C310-11 355 23 380 55ZM380 323V118C380 100 380 98 369 81C339 33 294 11 251 11C206 11 170 37 146 75C120 116 117 173 117 214C117 251 119 311 148 356C169 387 207 420 261 420C296 420 338 405 369 360C380 343 380 341 380 323Z'/>
<glyph unicode='e' horiz-adv-x='444' vert-adv-y='444' glyph-name='e' d='M112 252C118 401 202 426 236 426C339 426 349 291 349 252H112ZM111 231H390C412 231 415 231 415 252C415 351 361 448 236 448C120 448 28 345 28 220C28 86 133-11 248-11C370-11 415 100 415 119C415 129 407 131 402 131C393 131 391 125 389 117C354 14 264 14 254 14C204 14 164 44 141 81C111 129 111 195 111 231Z'/>
</font>
</defs>
<style type='text/css'>
<![CDATA[text.f0 {font-family:cmr10;font-size:9.96264px}
]]>
</style>
<g id='page1'>
<path d='M-15.1094-43.453125C-15.1094-59.1094-27.7969-71.8008-43.453125-71.8008C-59.1094-71.8008-71.8008-59.1094-71.8008-43.453125C-71.8008-27.7969-59.1094-15.1094-43.453125-15.1094C-27.7969-15.1094-15.1094-27.7969-15.1094-43.453125Z' stroke='#000' fill='none' stroke-width='.3985'/>
<text class='f0' x='-43.45431' y='-43.45431' transform='matrix(1 0 0 1 -23.3849 2.975)'>ab<tspan x='-32.661406'>cæeadøe</tspan></text>
</g>
</svg>

So what is happening is that the Size of the svg gets ported to the inline svg content.

This is due to how pandoc is embeding SVG while keeping the attributes from the inside.

So not sure how this should bd dealt with

• The created SVG could use different sizes. The resulting width is the one from inside the svg content
• Pandoc may not set width or heigh when at least on of them is specified on the image tag
• Some configuration could help.

Overall, this is not a direct Quarto issue - more related to how Pandoc does it, and how it can be tweaked, or fix there. You could report in Pandoc repo.

[mcanouil]

PNG also supports transparent background.
Did you try setting ragg (https://github.com/r-lib/ragg) as the graphic device?

Side note: you can use the "dash" version of the knitr options for consistency with Quarto options in your document, i.e., dev-args instead of dev.args, fig-align instead of fig.align, etc..

[snhansen]

@mcanouil: Thanks for the tip about the dashes. Good to know. I tried the following

```{r}
knitr::opts_chunk$set(dev = "ragg_png")
```

```{r}
#| engine: tikz
#| dev-args:
#|   bg: "transparent"
#| fig-align: center
#| fig-ext: png
\begin{tikzpicture}
 \draw (0,0) circle (1cm);
 \node (x) {abcæeadøe};
\end{tikzpicture}
```

but it does not produce transparent backgrounds. Am I supposed to use some other chunk option here?

[mcanouil]

I never used tikz engine in knitr so I am not sure how it uses the graphic device or even if it uses the one set by the user and not the default R graphic device (which should support transparent background but cannot guarantee that).

---

Why are you using knitr::opts_chunk$set(dev = "ragg_png")?

In your frontmatter you can set:

knitr:
  opts_chunk:
    dev: ragg_png

#| dev: ragg_png should also work in the code cell.

Note that the correct/current argument is background (even if for compatibility it uses bg if set), see https://ragg.r-lib.org/reference/agg_png.html.

[mcanouil]

tikz engine uses external tools so setting the graphic device has absolutely no effect ...

Quarto document

HTML

--- format: html theme: darkly embed-resources: true execute: echo: false --- # Section ```{r} #| dev: ragg_png #| dev-args: {bg: "red"} library(ggplot2) ggplot() + geom_blank() + labs(title = "Hello, world!") + theme_void() + theme(plot.background = element_rect(fill = NULL), panel.background = element_rect(fill = NULL)) ``` ```{r} #| engine: tikz #| dev: ragg_png #| dev-args: {bg: "red"} \begin{tikzpicture} \draw (0,0) circle (1cm); \node (x) {abcæeadøe}; \end{tikzpicture} ```

[snhansen]

@cderv @mcanouil: Just an update on this: the issue has already been resolved in the current Pandoc version available on Github (jgm/pandoc#9893). So when a new version is released and picked up by Quarto, this shouldn't be an issue anymore. Thanks for the pointers.

[mcanouil]

To mitigate expectations, the future Pandoc release might not be part of 1.5 release.