basic.md

title
Testing svg in mathjax

Run with:

pandoc -s --mathjax test-die.md -o test-die.html

<span class="math display">\[
  \newcommand{\fifthdie}{\mmlToken{mglyph}[src='data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" height="42px" width="42px"&gt;&lt;rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="40px" height="40px"&gt;&lt;/rect&gt;      &lt;circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"&gt;&lt;/circle&gt;      &lt;circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"&gt;&lt;/circle&gt;      &lt;circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"&gt;&lt;/circle&gt;      &lt;circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"&gt;&lt;/circle&gt;      &lt;circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"&gt;&lt;/circle&gt;    &lt;/svg&gt;' width="42px" height="42px" valign="0px" alt="5 die"]{}}
  \newcommand{\randie}{\mmlToken{mglyph}[src='data:image/svg+xml, &lt;svg width="42" height="42" viewBox="-1 -1 44 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;   &lt;circle fill="gold" stroke="black" cx="11.4" cy="11.4" r="5" /&gt;   &lt;circle fill="gold" stroke="black" cx="11.4" cy="30.6" r="5" /&gt;   &lt;circle fill="gold" stroke="black" cx="30.6" cy="11.4" r="5" /&gt;   &lt;circle fill="gold" stroke="black" cx="30.6" cy="30.6" r="5" /&gt;   &lt;rect stroke-width="2" x="0" y="0" width="42" height="42" rx="5" ry="5" fill="none" stroke="black" /&gt; &lt;/svg&gt;' width="42px" height="42px" valign="0px" alt="die 4"]{}}\]
</span>

$$ \alpha = \frac{\randie}{\fifthdie} \beta + \frac 1 2 $$

die.qmd

---
title: "random die fraction"
---

```{r}
fifth <- '<svg xmlns="http://www.w3.org/2000/svg" height="42px" width="42px"><rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="40px" height="40px"></rect>      <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle>      <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle>      <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle>      <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle>      <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle>    </svg>'
```

Sure, I can display you

`r fifth`

But what is the chance that you'll be in the numerator

```{r}
library(minisvg)

roll_dice <- function(n = sample(1:5, 1)){
  
  
  pos <- list(data.frame(x = NULL, y = NULL),
              data.frame(x = c(0.5), y = c(0.5)),
              data.frame(x = c(0.2,0.8), y = c(0.2, 0.8)),
              data.frame(x = c(0.2,0.5,0.8), y = c(0.2,0.5, 0.8)),
              data.frame(x = c(0.2,0.2,0.8,0.8), y = c(0.2, 0.8,0.2,  0.8)),
              data.frame(x = c(0.2,0.2,0.5,0.8,0.8), y = c(0.2, 0.8, 0.5, 0.2,  0.8)))
  
  doc <- SVGDocument$new(width = 42, height = 42, viewBox = '-1 -1 44 44')
  die <- pos[[n+1]]
  if(nrow(die)>0){
    x <- scales::rescale(die$x, c(5, 37), from = c(0,1))
    y <- scales::rescale(die$y, c(5, 37), from = c(0,1))
    for(i in seq_len(n)){
      doc$circle(cx=x[i], cy=y[i], r=5, fill = 'gold', stroke='black')
    }
  }
  
  doc$append(
    stag$rect(
      x = 0, y = 0, rx=5, ry=5, width = 42, height = 42, fill = 'none',
      stroke = 'black', svg_prop$`stroke-width`$set(2)
    )
  )
  list(n=n, svg = paste0(doc$as_character_inner(depth = 0), collapse = " "))
}

```

$$
\newcommand{\fifthdie}{\mmlToken{mglyph}[src='data:image/svg+xml, `r fifth`' width="42px" height="42px" valign="0px" alt="5 die"]{}}
\newcommand{\randie}{\mmlToken{mglyph}[src='data:image/svg+xml, `r die <- roll_dice();die$svg`' width="42px" height="42px" valign="0px" alt="die `r die$n`"]{}}
$$

$$
\alpha = \frac{\randie}{\fifthdie} \beta + \frac 1 2
$$


Chances that my Python for loop uses correct indexing:
```{r, results='asis'}
wrap_die <- function(n){
  die <- roll_dice(n)
  id <- letters[n+1]
  cat(glue::glue(r"(\newcommand{\die<id>}{\mmlToken{mglyph}[src='data:image/svg+xml, <die$svg>' width="42px" height="42px" valign="0px" alt="die <die$n>"]{}})", .open='<',.close='>'))
}
purrr::walk(0:5, wrap_die)
```

$$
\alpha = `r n=0:5;id=letters[n+1];glue::glue_collapse(glue::glue(r"(\frac{\die[id]}{\diea})", .open='[',.close=']'), sep = "+")`
$$

Hi, I tried to directly embed the svg image in the command like this:

\newcommand{\fifthdie}{\mmlToken{mglyph}[src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="42px" width="42px"><rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="40px" height="40px"></rect><circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle><circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle><circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle><circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle><circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle></svg>' width="42px" height="42px" valign="0px" alt="5 die"]{}}

May I ask what's wrong with my command?