Inline-SVG Extension For Quarto

This filter is configured to run on any HTML or Markdown conversions. This filter finds SVG files generated by the Quarto render process and inlines them into the output file. This is a minimal process where the resulting <img> tag's src=... is replaced by a data URI with the base64 encoded SVG. This should work in all modern browsers for images up to 4GB.

The process is intentionally minimal so that you can retain all of the other features that Quarto offers regarding figure captions, labels, etc.

Note: This is similar to the embed-resources Rendering option. The difference is that this will only embed SVG files and not other resources.

To illustrate, here is the first plot from example.qmd which has a few other examples using different Quarto features. This first markdown block is the YAML header and plot code for a basic plot that we want to render as SVG, run through the filter, and print to the output.

---
title: "Inline-SVG Example"
fig-format: svg
filters:
  - inline-svg
---

```{r}
plot(mtcars)
```

Without this filter, if you rendered this to gfm (GitHub-flavored markdown), the output would be

![](example_files/figure-commonmark/unnamed-chunk-1-1.svg)

But with this filter applied, you get the SVG in-line as a data URI instead of as a referenced file:

![](data:image/svg+xml;base64,...truncated base 64 encoded image...)

Installing

quarto install extension coursekata/quarto-inline-svg

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

Set the figure format to SVG and then include the extension in your filter configuration:

fig-format: svg
filters:
  - inline-svg

Now all computed plots will render as SVG and will be inlined as data URIs in the output files.

Example

Here is the source code for a minimal example: example.qmd. Try running quarto render example.qmd --to gfm.