From 16afffa4a11f80c55fc191fd46f00814cb85453e Mon Sep 17 00:00:00 2001
From: Yihui Xie <xie@yihui.name>
Date: Sun, 5 Jan 2025 15:55:45 -0600
Subject: [PATCH] inline SVG images instead of base64 encoding them, to make it
 possible to manipulate/style them via JS/CSS, and the file size will also be
 smaller (base64 encoding increases the file size by 1/3)

---
 DESCRIPTION        |  2 +-
 NEWS.md            |  2 ++
 R/utils.R          | 43 +++++++++++++++++++++++++--------
 docs/04-mark.Rmd   | 59 ++++++++++++++++++++++++++++------------------
 docs/05-assets.Rmd | 38 ++++++++++++++++-------------
 5 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/DESCRIPTION b/DESCRIPTION
index 0fa3bef..2826796 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -1,7 +1,7 @@
 Package: litedown
 Type: Package
 Title: A Lightweight Version of R Markdown
-Version: 0.4.13
+Version: 0.4.14
 Authors@R: c(
     person("Yihui", "Xie", role = c("aut", "cre"), email = "xie@yihui.name", comment = c(ORCID = "0000-0003-0645-5666", URL = "https://yihui.org")),
     person("Tim", "Taylor", role = "ctb", comment = c(ORCID = "0000-0002-8587-7113")),
diff --git a/NEWS.md b/NEWS.md
index f98bf8d..11a19f0 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -10,6 +10,8 @@
 
 - Added options `dollar`, `signif`, and `power` to format numbers from inline code. See https://yihui.org/litedown/#sec:inline-code for details.
 
+- When embedding SVG images in HTML output, embed their raw XML content instead of base64 encoding them.
+
 - Empty table headers are removed in HTML output (they may be generated from data frames or matrices without column names).
 
 - Added support for the chunk option `collapse = TRUE` (thanks, @J-Moravec, #40).
diff --git a/R/utils.R b/R/utils.R
index 9e80131..563810b 100644
--- a/R/utils.R
+++ b/R/utils.R
@@ -949,23 +949,33 @@ embed_resources = function(x, options) {
   if (!any(embed)) return(x)
   clean = isTRUE(options[['embed_cleanup']])
 
-  r = '(<img[^>]* src="|<!--#[^>]*? style="background-image: url\\("?)([^"]+?)("|"?\\);)'
-  x = match_replace(x, r, function(z) {
+  # find images in <img> and (for slides only) comments
+  rs = c(
+    '(<img src=")([^"]+)("[^>]*?/>)',
+    '(<!--#[^>]*? style="background-image: url\\("?)([^"]+?)("?\\);)'
+  )
+  for (r in rs) x = match_replace(x, r, function(z) {
     z1 = sub(r, '\\1', z)
     z2 = sub(r, '\\2', z)
     z3 = sub(r, '\\3', z)
     # skip images already base64 encoded
     for (i in grep('^data:.+;base64,.+', z2, invert = TRUE)) {
-      if (is_https(f <- z2[i])) {
-        if (embed[1]) z2[i] = download_cache$get(f, 'base64')
-      } else if (file_exists(f <- URLdecode(f))) {
-        z2[i] = base64_uri(f)
-        if (clean && normalize_path(f) %in% .env$plot_files) file.remove(f)
-      } else {
-        warning("File '", f, "' not found (hence cannot be embedded).")
+      is_svg = grepl('[.]svg$', f <- z2[i]) && grepl('^<img', z1[i])
+      a = if (is_svg) str_trim(gsub('^"|/>$', '', z3[i])) else ''
+      if (is_https(f)) {
+        if (embed[1]) z2[i] = if (!is_svg) download_cache$get(f, 'base64') else {
+          download_cache$get(f, 'text', function(xml) process_svg(xml, a))
+        }
+      } else if (embed[2]) {
+        if (file_exists(f <- URLdecode(f))) {
+          z2[i] = if (is_svg) process_svg(read_utf8(f), a) else base64_uri(f)
+          if (clean && normalize_path(f) %in% .env$plot_files) file.remove(f)
+        } else {
+          warning("File '", f, "' not found (hence cannot be embedded).")
+        }
       }
     }
-    paste0(z1, z2, z3)
+    ifelse(grepl('<svg', z2), z2, paste0(z1, z2, z3))
   })
 
   # CSS and JS
@@ -1001,6 +1011,19 @@ embed_resources = function(x, options) {
   x
 }
 
+# remove the xml/doctype declaration in svg, and add attributes
+process_svg = function(x, attr) {
+  while (length(x) > 0 && !grepl('^\\s*<svg .+', x[1])) x = x[-1]
+  if (length(x) > 0 && !attr %in% c('', 'alt=""')) {
+    x[1] = if (grepl(r <- '\\s*>\\s*$', x[1])) {
+      paste0(gsub(r, ' ', x[1]), attr, '>')
+    } else {
+      paste(x[1], attr)
+    }
+  }
+  one_string(x)
+}
+
 normalize_options = function(x, format = 'html') {
   g = get_option('options', format)
   x = option2list(x)
diff --git a/docs/04-mark.Rmd b/docs/04-mark.Rmd
index 24a2dfb..4c28254 100644
--- a/docs/04-mark.Rmd
+++ b/docs/04-mark.Rmd
@@ -41,7 +41,7 @@ below.
 
 ### `auto_identifiers`
 
-Add automatic IDs to headings, e.g.,
+Whether to add automatic IDs to headings (`true` by default), e.g., convert
 
 ``` markdown
 # Hello world!
@@ -49,7 +49,7 @@ Add automatic IDs to headings, e.g.,
 ## Introduction
 ```
 
-will be converted to
+to
 
 ``` html
 <h1 id="chp:hello-world">Hello world!</h1>
@@ -76,20 +76,22 @@ any ID is duplicated, a numeric suffix will be added to the ID, e.g.,
 
 Whether to use the LaTeX package [**cleveref**](https://ctan.org/pkg/cleveref)
 for "clever" cross-references (@sec:cross-references). This option is for LaTeX
-output only. If enabled, **cleveref** will be loaded and references will use the
-command `\cref{}` instead of `\ref{}`, which will automatically add the type of
-reference before the reference number, e.g., `\cref{sec:intro}` may generate
-`Section 1`, so you do not have to write `Section \ref{sec:intro}`.
+output only and `false` by default. If enabled, **cleveref** will be loaded and
+references will use the command `\cref{}` instead of `\ref{}`, which will
+automatically add the type of reference before the reference number, e.g.,
+`\cref{sec:intro}` may generate `Section 1`, so you do not have to write
+`Section \ref{sec:intro}`.
 
 ### `embed_cleanup`
 
 Whether to clean up plot files after they have been embedded in HTML output (see
-@sec:embed-resources).
+@sec:embed-resources). This option is `true` by default.
 
 ### `embed_resources`
 
 Embed resources (images, CSS, and JS) in the HTML output using their
-base64-encoded data (images) or raw content (CSS/JS). Possible values are:
+base64-encoded data (all images except for SVG) or raw content (SVG/CSS/JS).
+Possible values are:
 
 -   `null` or `false`: Do not embed any resources.
 
@@ -108,6 +110,14 @@ For `https` resources, after you have embedded them successfully once, they will
 be cached locally (via `xfun::download_cache`) and will not require an Internet
 connection again.
 
+::: callout-note
+All images are base64 encoded, except for SVG images, of which the raw XML
+content is embedded, which makes it possible to manipulate SVG elements via JS
+or style them via CSS. Without embedding the raw content, SVG images are
+included via the `<img>` tag, and their elements cannot be manipulated or
+styled.
+:::
+
 ### `js_highlight`
 
 Specify the JavaScript library to syntax highlight code blocks. Possible values
@@ -206,23 +216,24 @@ other's features.
 
 ### `keep_yaml`
 
-Whether to keep the YAML metadata in the output. When `TRUE`, the original YAML
-in the Markdown input (if exists) will be written to the output. Note that when
-this option is enabled, templates (@sec:templates) will be disabled and `mark()`
-will only generate a document fragment. This option was introduced mainly for
-Hugo websites to use **litedown** instead of Hugo's Markdown engines to render
-pages.
+Whether to keep the YAML metadata in the output (`false` by default). When
+`true`, the original YAML in the Markdown input (if exists) will be written to
+the output. Note that when this option is enabled, templates (@sec:templates)
+will be disabled and `mark()` will only generate a document fragment. This
+option was introduced mainly for Hugo websites to use **litedown** instead of
+Hugo's Markdown engines to render pages.
 
 ### `latex_math`
 
 Whether to identify LaTeX math expressions in pairs of single (`$ $`) or double
 dollar signs (`$$ $$`), and transform them so that they could be correctly
-rendered by MathJax (HTML output) or LaTeX.
+rendered by MathJax (HTML output) or LaTeX. This option is `true` by default.
 
 ### `number_sections`
 
-Whether to number section headings. To skip numbering a specific heading, add a
-class attribute `.unnumbered` (or use the shorthand `-`) to it. For example:
+Whether to number section headings (`false` by default). To skip numbering a
+specific heading, add a class attribute `.unnumbered` (or use the shorthand `-`)
+to it. For example:
 
 ``` md
 ## Preface {.unnumbered}
@@ -233,23 +244,23 @@ class attribute `.unnumbered` (or use the shorthand `-`) to it. For example:
 ### `smartypants`
 
 Whether to translate certain ASCII strings into smart typographic characters
-(see `?litedown::smartypants`).
+(see `?litedown::smartypants`). This option is `false` by default.
 
 ### `superscript`
 
 Whether to translate strings between two carets into superscripts, e.g.,
-`text^foo^` to `text<sup>foo</sup>`.
+`text^foo^` to `text<sup>foo</sup>`. This option is `true` by default.
 
 ### `subscript`
 
 Whether to translate strings between two tildes into subscripts, e.g.,
-`text~foo~` to `text<sub>foo</sub>`.
+`text~foo~` to `text<sub>foo</sub>`. This option is `true` by default.
 
 ### `toc`
 
-Whether to generate a table of contents (TOC) from section headings. If a
-heading has an `id` attribute, the corresponding TOC item will be a link to this
-heading. You can also set a sub-option:
+Whether to generate a table of contents (TOC) from section headings (`false` by
+default). If a heading has an `id` attribute, the corresponding TOC item will be
+a link to this heading. You can also set a sub-option:
 
 -   `depth`: The number of section levels to include in the TOC (`3` by
     default). Setting `toc` to `true` is equivalent to:
@@ -273,6 +284,8 @@ The desired type of the top-level headings in LaTeX output. Possible values are
 will be rendered to `\chapter{heading}` instead of the default
 `\section{heading}`.
 
+### Other options
+
 Options not described above can be found on the help pages of **commonmark**,
 e.g., the `hardbreaks` option is for the `hardbreaks` argument of
 `commonmark::markdown_*()` functions, and the `table` option is for the `table`
diff --git a/docs/05-assets.Rmd b/docs/05-assets.Rmd
index fece6e2..f735fb7 100644
--- a/docs/05-assets.Rmd
+++ b/docs/05-assets.Rmd
@@ -119,31 +119,37 @@ js: ["@copy-button"]
 ```
 
 By default, this will add copy buttons to all code blocks (`<code>` in `<pre>`)
-and all elements with the class name `copy-this`. For example, below is a quote
-inside a fenced Div `::: copy-this` and you will see a copy button if you hover
-over it with the cursor:
-
-::: {.side .side-right}
-Love like you've never been hurt\
-Dance like nobody's watching\
-Sing like nobody's listening\
-Work like you don't need the money\
-Live like it's heaven on earth
-
----Alfred D'Souza
-:::
+and all elements with the class name `copy-this`. For example, below are two
+quotes, and the right quote is inside a fenced Div `::: copy-this`, so you will
+see a copy button in the right quote if you hover over it with the cursor:
+
+:::: flex-col
+> Love like you've never been hurt\
+> Dance like nobody's watching\
+> Sing like nobody's listening\
+> Work like you don't need the money\
+> Live like it's heaven on earth
+>
+> ---Alfred D'Souza
 
 ::: copy-this
-> Copy like you understand the code...
+> Copy like you've never been hurt\
+> Copy like nobody's watching\
+> Copy like nobody's listening\
+> Copy like you don't need the money\
+> Copy like it's heaven on earth
 >
-> ---Yihui Xie
+> ---Yihui (Ode to the [Copy
+> Ninja](https://en.wikipedia.org/wiki/Kakashi_Hatake))
 :::
+::::
 
 All code blocks in this book also have copy buttons in them.
 
 In fact, you can add the copy button to any element on an HTML page. You may
 read [this post](https://yihui.org/en/2023/09/copy-button/) if you are
-interested in generalizing the copy button to other elements.
+interested in generalizing the copy button to other elements (without using the
+`copy-this` class).
 
 ## Tabsets {#sec:tabsets}