[PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

[-- Attachment #1: Type: text/plain, Size: 1793 bytes --]

Hi,

I have been trying to export SVG images having links to CSS from Org to 
HTML
and I have found that the this CSS is not active in Firefox (only 
browser I tried).

I have found that the CCS is only active under two conditions:
1. The HTML page should manage the CSS that the SVG image links to.
2. The SVG image should be embedded in the HTML page.

I wrote an ox-html derived export backend to embed SVG images:
https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-my-html/ox-my-html.el
and merged the SVG embedding functionality into ox-html.el leading to 
the
attached patch.

I have included an MWE below and I attached mwe.org and mwe.html with
doc8.svg and style8.svg (showing a flower and chosen for the visual 
impact).

You will get an M-non-WE after exporting mwe.org using ox-html on the
main branch.

# begin MWE
#+title: SVG and CSS MWE with patch or with ox-my-html backend
#+HTML_DOCTYPE: html5
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style8.css" />
#+OPTIONS: ^:{} toc:nil html-embed-svg:nil
# The next line overrules html-embed-svg:t
#+HTML_EMBED_SVG_EXCLUDES: ./doc8.svg
# The next line overrules html-embed-svg:nil
#+HTML_EMBED_SVG_INCLUDES: ./doc8.svg

[[https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS][SVG 
and CSS (MDN)]] is the origin of the files =doc8.svg= and
=style8.css=.  Open =doc8.svg= and =mwe.html= in Firefox to compare
hovering over the flower.  The flower is fully black in case of an
M-non-WE or in case of HTML export without patch or without ox-my-html
backend.

#+CAPTION: Is MWE with SVG embedding *and* with HTML_HEAD managing
#+CAPTION: the CSS. Becomes an M-non-WE without SVG embedding or
#+CAPTION: without HTML_HEAD managing the CSS.
[[./doc8.svg]]
# end MWE

Best regards -- Gerard

[-- Attachment #2: 0001-ox-html.el-add-option-to-embed-SVG-for-CSS-support-i.patch --]
[-- Type: application/octet-stream, Size: 6333 bytes --]

From a8d9e61016d455ebcbf878e3c9d6a4531dd21dc6 Mon Sep 17 00:00:00 2001
From: Gerard Vermeulen <gerard.vermeulen@posteo.net>
Date: Mon, 5 Jun 2023 11:13:36 +0200
Subject: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

* lisp/ox-html (org-html-embed-svg, org-html-embed-svg-includes,
  org-html-embed-html-excludes): add option to enable or disable
  SVG embedding in HTML within emacs of file scope. Add options
  to specify lists of SVG images to be included in or excluded
  from embedding.
  (org-html--embed-svg-p): apply the logic to each SVG image.
  (org-html-svg-contents): try to return cleaned up SVG contents.
  (org-html-link): add embedding SVG images before inlining images.
---
 lisp/ox-html.el | 78 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index b519402b1..938b977ac 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -24,7 +24,7 @@
 
 ;;; Commentary:
 
-;; This library implements a HTML backend for Org generic exporter.
+;; This library implements an HTML backend for Org generic exporter.
 ;; See Org manual for more information.
 
 ;;; Code:
@@ -134,6 +134,10 @@
     (:html-head "HTML_HEAD" nil org-html-head newline)
     (:html-head-extra "HTML_HEAD_EXTRA" nil org-html-head-extra newline)
     (:subtitle "SUBTITLE" nil nil parse)
+    (:html-embed-svg-excludes "HTML_EMBED_SVG_EXCLUDES" nil
+                              org-html-embed-svg-excludes split)
+    (:html-embed-svg-includes "HTML_EMBED_SVG_INCLUDES" nil
+                              org-html-embed-svg-includes split)
     (:html-head-include-default-style
      nil "html-style" org-html-head-include-default-style)
     (:html-head-include-scripts nil "html-scripts" org-html-head-include-scripts)
@@ -187,6 +191,7 @@
     (:html-klipse-js nil nil org-html-klipse-js)
     (:html-klipse-selection-script nil nil org-html-klipse-selection-script)
     (:infojs-opt "INFOJS_OPT" nil nil)
+    (:with-html-svg-embedding nil "html-embed-svg" org-html-embed-svg)
     ;; Redefine regular options.
     (:creator "CREATOR" nil org-html-creator-string)
     (:with-latex nil "tex" org-html-with-latex)
@@ -849,6 +854,43 @@ When nil, the links still point to the plain \".org\" file."
   :group 'org-export-html
   :type 'boolean)
 
+;;;; Links :: Embed SVG
+
+(defcustom org-html-embed-svg nil
+  "Non-nil means embed SVG images into exported HTML pages,
+otherwise link to SVG images from exported HTML pages.
+
+This option can also be set in Org files with
+#+OPTIONS: html-embed-svg:t
+or
+#+OPTIONS: html-embed-svg:nil
+to enable or disable SVG embedding in exported HTML."
+  :group 'org-export-html
+  :version "30.0"
+  :type 'boolean)
+
+(defcustom org-html-embed-svg-excludes nil
+  "List of SVG files to exclude from SVG embedding.
+
+This option overrules an `org-html-embed-svg' non-nil value.
+
+It can also be set with the HTML_EMBED_SVG_EXCLUDES keyword."
+  :group 'org-export-html
+  :version "30.0"
+  :type '(repeat string)
+  :safe (lambda (x) (and (listp x) (cl-every #'stringp x))))
+
+(defcustom org-html-embed-svg-includes nil
+  "List of SVG files to include in SVG embedding.
+
+This option overrules an `org-html-embed-svg' nil value.
+
+It can also be set with the HTML_EMBED_SVG_INCLUDES keyword."
+  :group 'org-export-html
+  :version "30.0"
+  :type '(repeat string)
+  :safe (lambda (x) (and (listp x) (cl-every #'stringp x))))
+
 ;;;; Links :: Inline images
 
 (defcustom org-html-inline-images t
@@ -2279,7 +2321,7 @@ INFO is a plist used as a communication channel."
 ;;;; Anchor
 
 (defun org-html--anchor (id desc attributes info)
-  "Format a HTML anchor."
+  "Format an HTML anchor."
   (let* ((name (and (plist-get info :html-allow-name-attribute-in-anchors) id))
 	 (attributes (concat (and id (format " id=\"%s\"" id))
 			     (and name (format " name=\"%s\"" name))
@@ -3122,6 +3164,33 @@ CONTENTS is nil.  INFO is a plist holding contextual information."
 
 ;;;; Link
 
+(defun org-html--embed-svg-p (link path info)
+  "Check whether LINK and INFO specify to embed the SVG file named PATH.
+LINK must have no contents and link to an SVG file.  INFO may contain
+lists of SVG files to include in and/or to exclude from embedding."
+  (and (not (org-element-contents link))
+       (let ((case-fold-search t))
+         (string-match-p ".svg\\'" (org-element-property :path link)))
+       (or (and (plist-get info :with-html-svg-embedding)
+                (not (member path (plist-get info :html-embed-svg-excludes))))
+           (and (not (plist-get info :with-html-svg-embedding))
+                (member path (plist-get info :html-embed-svg-includes))))))
+
+(defun org-html-svg-contents (path)
+  "Return the SVG contents of the file named PATH."
+  (with-temp-buffer
+    (insert-file-contents path)
+    ;; Delete text preceding something starting as an SVG root element.
+    ;; The intent is to remove XML declarations (and XML comments).
+    ;; This breaks in case of a preceding XML comment with <svg inside
+    ;; or a preceding XML element with an SVG element inside.
+    ;; See https://emacs.stackexchange.com/a/57433 for the original code.
+    (let ((case-fold-search t))
+      (unless (search-forward "<svg" nil 'noerror)
+        (user-error "Can't find a root SVG start tag in file `%s'." path)))
+    (delete-region (point-min) (match-beginning 0))
+    (buffer-string)))
+
 (defun org-html-image-link-filter (data _backend info)
   (org-export-insert-image-links data info org-html-inline-image-rules))
 
@@ -3266,6 +3335,9 @@ INFO is a plist holding contextual information.  See
     (cond
      ;; Link type is handled by a special function.
      ((org-export-custom-protocol-maybe link desc 'html info))
+     ;; Embed SVG.
+     ((org-html--embed-svg-p link path info)
+      (org-html-svg-contents path))
      ;; Image file.
      ((and (plist-get info :html-inline-images)
 	   (org-export-inline-image-p
@@ -3972,7 +4044,7 @@ to convert it."
 ;;;###autoload
 (defun org-html-export-to-html
     (&optional async subtreep visible-only body-only ext-plist)
-  "Export current buffer to a HTML file.
+  "Export current buffer to an HTML file.
 
 If narrowing is active in the current buffer, only export its
 narrowed part.
-- 
2.41.0


[-- Attachment #3: mwe.org --]
[-- Type: application/octet-stream, Size: 974 bytes --]

#+title: SVG and CSS MWE with patch or with ox-my-html backend
#+HTML_DOCTYPE: html5
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style8.css" />
#+OPTIONS: ^:{} toc:nil html-embed-svg:nil
# The next line overrules html-embed-svg:t
#+HTML_EMBED_SVG_EXCLUDES: ./doc8.svg
# The next line overrules html-embed-svg:nil
#+HTML_EMBED_SVG_INCLUDES: ./doc8.svg

[[https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS][SVG and CSS (MDN)]] is the origin of the files =doc8.svg= and
=style8.css=.  Open =doc8.svg= and =mwe.html= in Firefox to compare
hovering over the flower.  The flower is fully black in case of an
M-non-WE or in case of HTML export without patch or without ox-my-html
backend.

#+CAPTION: Is MWE with SVG embedding *and* with HTML_HEAD managing
#+CAPTION: the CSS. Becomes an M-non-WE without SVG embedding or
#+CAPTION: without HTML_HEAD managing the CSS.
[[./doc8.svg]]
# Note: ./doc8.svg starts with ./ to resolve it when inlining.

[-- Attachment #4: mwe.html --]
[-- Type: text/html, Size: 18497 bytes --]

[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #5: style8.css --]
[-- Type: text/css; name=style8.css, Size: 2391 bytes --]

/*** SVG demonstration ***/

/* page */
svg {
  background-color: beige;
}

#heading {
  font-size: 24px;
  font-weight: bold;
}

#caption {
  font-size: 12px;
}

/* flower */
#flower:hover {
  cursor: crosshair;
}

/* gradient */
#fade-stop-1 {
  stop-color: blue;
}

#fade-stop-2 {
  stop-color: white;
}

/* petals */
.segment-fill {
  fill: var(--segment-fill-fill);
  stroke: var(--segment-fill-stroke);
  stroke-width: var(--segment-fill-stroke-width);
}

.segment-fill:hover {
  fill: var(--segment-fill-fill-hover);
  stroke: var(--segment-fill-stroke-hover);
}

.segment-edge {
  fill: var(--segment-edge-fill);
  stroke: var(--segment-edge-stroke);
  stroke-width: var(--segment-edge-stroke-width);
}

.segment-edge:hover {
  stroke: var(--segment-edge-stroke-hover);
}

/* outer petals */
#outer-petals {
  opacity: 0.75;
  --segment-fill-fill: azure;
  --segment-fill-stroke: lightsteelblue;
  --segment-fill-stroke-width: 1;
  --segment-edge-fill: none;
  --segment-edge-stroke: deepskyblue;
  --segment-edge-stroke-width: 3;
  --segment-fill-fill-hover: plum;
  --segment-fill-stroke-hover: none;
  --segment-edge-stroke-hover: slateblue;
}

/*
 Non-standard way of styling elements referenced via <use> elements,
 supported by some older browsers
*/
#outer-petals .segment-fill {
  fill: azure;
  stroke: lightsteelblue;
  stroke-width: 1;
}

#outer-petals .segment-edge {
  fill: none;
  stroke: deepskyblue;
  stroke-width: 3;
}

#outer-petals .segment:hover > .segment-fill {
  fill: plum;
  stroke: none;
}

#outer-petals .segment:hover > .segment-edge {
  stroke: slateblue;
}

/* inner petals */
#inner-petals {
  --segment-fill-fill: yellow;
  --segment-fill-stroke: yellow;
  --segment-fill-stroke-width: 1;
  --segment-edge-fill: none;
  --segment-edge-stroke: yellowgreen;
  --segment-edge-stroke-width: 9;
  --segment-fill-fill-hover: darkseagreen;
  --segment-fill-stroke-hover: none;
  --segment-edge-stroke-hover: green;
}

/*
 Non-standard way of styling elements referenced via <use> elements,
 supported by some older browsers
*/
#inner-petals .segment-fill {
  fill: yellow;
  stroke: yellow;
  stroke-width: 1;
}

#inner-petals .segment-edge {
  fill: none;
  stroke: yellowgreen;
  stroke-width: 9;
}

#inner-petals .segment:hover > .segment-fill {
  fill: darkseagreen;
  stroke: none;
}

#inner-petals .segment:hover > .segment-edge {
  stroke: green;
}

[-- Attachment #6: doc8.svg --]
[-- Type: image/svg+xml, Size: 9840 bytes --]

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

gerard.vermeulen@posteo.net writes:

> I have been trying to export SVG images having links to CSS from Org to 
> HTML
> and I have found that the this CSS is not active in Firefox (only 
> browser I tried).
>
> I have found that the CCS is only active under two conditions:
> 1. The HTML page should manage the CSS that the SVG image links to.
> 2. The SVG image should be embedded in the HTML page.

CCing Timothy, the maintainer.

Also, does the above mean that Firefox does not support custom CSS user
stylesheets? What am I missing?

> I wrote an ox-html derived export backend to embed SVG images:
> https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-my-html/ox-my-html.el
> and merged the SVG embedding functionality into ox-html.el leading to 
> the
> attached patch.

Thanks! I will provide high-level comments from general ox.el
perspective.

> +    (:html-embed-svg-excludes "HTML_EMBED_SVG_EXCLUDES" nil
> +                              org-html-embed-svg-excludes split)
> +    (:html-embed-svg-includes "HTML_EMBED_SVG_INCLUDES" nil
> +                              org-html-embed-svg-includes split)

This is awkward. To do per-image export adjustments, we usually use
export attributes (#+ATTR_HTML: ...). And why "split"?

> +    (:with-html-svg-embedding nil "html-embed-svg" org-html-embed-svg)

We have :html-inline-images. Maybe better :html-embed-svg ?

> +(defcustom org-html-embed-svg nil
> ...
> +  :version "30.0"

We do not use :version tag. Please use :package-version.
See Elisp manual section "15.1 Common Item Keywords".

Also, maybe instead of t/nil boolean values here, we may allow the value
to be a list of regular expressions or a string representing regular
expression. This will allow what you are trying to do with
HTML_EMBED_SVG_INCLUDES. The list elements might also be (not "..."),
replicating HTML_EMBED_SVG_EXLCUDES.

Even more generally, we may turn this into HTML_EMBED_IMAGES and embed
all the images (possibly filtered by regexp). This will be slightly
beyond the scope of this patch though.

> +(defun org-html--embed-svg-p (link path info)
> +  "Check whether LINK and INFO specify to embed the SVG file named PATH.
> +LINK must have no contents and link to an SVG file.  INFO may contain
> +lists of SVG files to include in and/or to exclude from embedding."
> +  (and (not (org-element-contents link))

Please use `org-export-inline-image-p'.

> +(defun org-html-svg-contents (path)
> +  "Return the SVG contents of the file named PATH."
> +  (with-temp-buffer
> +    (insert-file-contents path)
> +    ;; Delete text preceding something starting as an SVG root element.
> +    ;; The intent is to remove XML declarations (and XML comments).
> +    ;; This breaks in case of a preceding XML comment with <svg inside
> +    ;; or a preceding XML element with an SVG element inside.
> +    ;; See https://emacs.stackexchange.com/a/57433 for the original code.

But the original code is different, no?

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Christian Moe]

Hi,

I think there's a better approach. Tl;dr:

- A better way to have active CSS in SVG images is to link to the
  external SVG file with the <object> rather than <img> tag, as we used
  to.

- Without patching Org, you can embed an external SVG file as an SVG
  island in Org HTML export simply by using #+INCLUDE.

Details:

1) Embedded SVG is not the only way to have active CSS etc. in SVG
images. Linking to an external SVG file with an OBJECT element instead
of IMG should work fine (tested in Firefox). You can test this by
exporting Gerard's mwe.org example and editing the mwe.html to replace

: img src="./doc8.svg"

with

: object type="image/svg+xml" data="./doc8.svg"

Org used to use OBJECT for SVG years ago, but switched to IMG at some
point. I'm not quite sure when or why that happened (forgive me for not
doing an exhaustive search of the archive or delving into the git
record). But I think perhaps the reason was this thread,

  https://lists.gnu.org/archive/html/emacs-orgmode/2016-07/msg00380.html

where the issue was easy scaling, and that Jarmo Hurri's patch switching
to IMG came to be applied at some point, even though Jarmo and I agreed
that adding a common CLASS="svgfig" attribute to OBJECT would solve his
issue, see this thread:

  https://lists.gnu.org/archive/html/emacs-orgmode/2016-07/msg00410.html

I continue to think that OBJECT with an .svgfig class as default (or a
setting to give the user a choice between IMG and OBJECT) is the best
solution.

2) You can actually embed an SVG island in Org HTML export simply by
using #+INCLUDE. To try this, add the following line to Gerard's mwe.org:

: #+INCLUDE: "./doc8.svg" export html

The exported HTML should now show the black flower from Gerard's minimal
non-working example plus a working flower.

(Some SVG files may start with an XML declaration; if the XML
declaration is on a separate first line, you can just skip it by adding
=:lines "2-"= to the #+INCLUDE instruction.)

Yours,
Christian

Ihor Radchenko writes:

> gerard.vermeulen@posteo.net writes:
>
>> I have been trying to export SVG images having links to CSS from Org to
>> HTML
>> and I have found that the this CSS is not active in Firefox (only
>> browser I tried).
>>
>> I have found that the CCS is only active under two conditions:
>> 1. The HTML page should manage the CSS that the SVG image links to.
>> 2. The SVG image should be embedded in the HTML page.
>
> CCing Timothy, the maintainer.
>
> Also, does the above mean that Firefox does not support custom CSS user
> stylesheets? What am I missing?
>
>> I wrote an ox-html derived export backend to embed SVG images:
>> https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-my-html/ox-my-html.el
>> and merged the SVG embedding functionality into ox-html.el leading to
>> the
>> attached patch.
>
> Thanks! I will provide high-level comments from general ox.el
> perspective.
>
>> +    (:html-embed-svg-excludes "HTML_EMBED_SVG_EXCLUDES" nil
>> +                              org-html-embed-svg-excludes split)
>> +    (:html-embed-svg-includes "HTML_EMBED_SVG_INCLUDES" nil
>> +                              org-html-embed-svg-includes split)
>
> This is awkward. To do per-image export adjustments, we usually use
> export attributes (#+ATTR_HTML: ...). And why "split"?
>
>> +    (:with-html-svg-embedding nil "html-embed-svg" org-html-embed-svg)
>
> We have :html-inline-images. Maybe better :html-embed-svg ?
>
>> +(defcustom org-html-embed-svg nil
>> ...
>> +  :version "30.0"
>
> We do not use :version tag. Please use :package-version.
> See Elisp manual section "15.1 Common Item Keywords".
>
> Also, maybe instead of t/nil boolean values here, we may allow the value
> to be a list of regular expressions or a string representing regular
> expression. This will allow what you are trying to do with
> HTML_EMBED_SVG_INCLUDES. The list elements might also be (not "..."),
> replicating HTML_EMBED_SVG_EXLCUDES.
>
> Even more generally, we may turn this into HTML_EMBED_IMAGES and embed
> all the images (possibly filtered by regexp). This will be slightly
> beyond the scope of this patch though.
>
>> +(defun org-html--embed-svg-p (link path info)
>> +  "Check whether LINK and INFO specify to embed the SVG file named PATH.
>> +LINK must have no contents and link to an SVG file.  INFO may contain
>> +lists of SVG files to include in and/or to exclude from embedding."
>> +  (and (not (org-element-contents link))
>
> Please use `org-export-inline-image-p'.
>
>> +(defun org-html-svg-contents (path)
>> +  "Return the SVG contents of the file named PATH."
>> +  (with-temp-buffer
>> +    (insert-file-contents path)
>> +    ;; Delete text preceding something starting as an SVG root element.
>> +    ;; The intent is to remove XML declarations (and XML comments).
>> +    ;; This breaks in case of a preceding XML comment with <svg inside
>> +    ;; or a preceding XML element with an SVG element inside.
>> +    ;; See https://emacs.stackexchange.com/a/57433 for the original code.
>
> But the original code is different, no?

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 06.06.2023 09:49, Ihor Radchenko wrote:
> gerard.vermeulen@posteo.net writes:
> 
>> I have been trying to export SVG images having links to CSS from Org 
>> to
>> HTML
>> and I have found that the this CSS is not active in Firefox (only
>> browser I tried).
>> 
>> I have found that the CCS is only active under two conditions:
>> 1. The HTML page should manage the CSS that the SVG image links to.
>> 2. The SVG image should be embedded in the HTML page.
> 
> CCing Timothy, the maintainer.
> 
> Also, does the above mean that Firefox does not support custom CSS user
> stylesheets? What am I missing?
> 
No, it means that custom CSS inside a linked SVG image is shielded from
the page that has the link to the SVG image.

To me it looks a natural defense against linking to different SVG images
linking to conflicting custom CSS.

If the HTML page linking to those images should manage the conflicting
custom CSS, the creator of the page is responsible for resolving the 
conflicts.
> 
>> I wrote an ox-html derived export backend to embed SVG images:
>> https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-my-html/ox-my-html.el
>> and merged the SVG embedding functionality into ox-html.el leading to
>> the
>> attached patch.
> 
> Thanks! I will provide high-level comments from general ox.el
> perspective.
> 
>> +    (:html-embed-svg-excludes "HTML_EMBED_SVG_EXCLUDES" nil
>> +                              org-html-embed-svg-excludes split)
>> +    (:html-embed-svg-includes "HTML_EMBED_SVG_INCLUDES" nil
>> +                              org-html-embed-svg-includes split)
> 
> This is awkward. To do per-image export adjustments, we usually use
> export attributes (#+ATTR_HTML: ...). And why "split"?

I do not think that #+ATTR_HTML allows to embed (= copy) the contents
of an SVG file directly into the HTML page.  As far as I understand, it 
adds
only attributes to HTML elements.

The "split" is because of similarity with :select_tags and :exclude_tags 
in ox.
It allows several files to be included in or excluded from embedding.

I agree that an attribute like #+EMBED_SVG is less awkward.

> 
>> +    (:with-html-svg-embedding nil "html-embed-svg" 
>> org-html-embed-svg)
> 
> We have :html-inline-images. Maybe better :html-embed-svg ?

I agree (the patch started as an derived backend with ox-beamer as an
example where those kind of variables are prefixed with :with; this is
a left-over).
> 
>> +(defcustom org-html-embed-svg nil
>> ...
>> +  :version "30.0"
> 
> We do not use :version tag. Please use :package-version.
> See Elisp manual section "15.1 Common Item Keywords".

My fault.
> 
> Also, maybe instead of t/nil boolean values here, we may allow the 
> value
> to be a list of regular expressions or a string representing regular
> expression. This will allow what you are trying to do with
> HTML_EMBED_SVG_INCLUDES. The list elements might also be (not "..."),
> replicating HTML_EMBED_SVG_EXLCUDES.
> 
> Even more generally, we may turn this into HTML_EMBED_IMAGES and embed
> all the images (possibly filtered by regexp). This will be slightly
> beyond the scope of this patch though.
> 
>> +(defun org-html--embed-svg-p (link path info)
>> +  "Check whether LINK and INFO specify to embed the SVG file named 
>> PATH.
>> +LINK must have no contents and link to an SVG file.  INFO may contain
>> +lists of SVG files to include in and/or to exclude from embedding."
>> +  (and (not (org-element-contents link))
> 
> Please use `org-export-inline-image-p'.

I think that the terminology "inline-image" in ox-html is confusing.
In ox-html the result of the "inline-image"  code is an HTML tag like

<img with attributes inside>

It does not mean that image data is copied inline as with embedding.
> 
>> +(defun org-html-svg-contents (path)
>> +  "Return the SVG contents of the file named PATH."
>> +  (with-temp-buffer
>> +    (insert-file-contents path)
>> +    ;; Delete text preceding something starting as an SVG root 
>> element.
>> +    ;; The intent is to remove XML declarations (and XML comments).
>> +    ;; This breaks in case of a preceding XML comment with <svg 
>> inside
>> +    ;; or a preceding XML element with an SVG element inside.
>> +    ;; See https://emacs.stackexchange.com/a/57433 for the original 
>> code.
> 
> But the original code is different, no?

Yes, I pretend that my code is an improvement:
1. The with-syntax-table is superfluous.
2. The error message gives a reason and the filename causing it.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 06.06.2023 11:57, Christian Moe wrote:
> Hi,
> 
> I think there's a better approach. Tl;dr:
> 
> - A better way to have active CSS in SVG images is to link to the
>   external SVG file with the <object> rather than <img> tag, as we used
>   to.
> 
> - Without patching Org, you can embed an external SVG file as an SVG
>   island in Org HTML export simply by using #+INCLUDE.
> 
> Details:
> 
> 1) Embedded SVG is not the only way to have active CSS etc. in SVG
> images. Linking to an external SVG file with an OBJECT element instead
> of IMG should work fine (tested in Firefox). You can test this by
> exporting Gerard's mwe.org example and editing the mwe.html to replace
> 
> : img src="./doc8.svg"
> 
> with
> 
> : object type="image/svg+xml" data="./doc8.svg"

Indeed, the flower works after the replacement but the caption 
disappears.
I do not understand why, because the caption is still present in the 
HTML.

> 
> Org used to use OBJECT for SVG years ago, but switched to IMG at some
> point. I'm not quite sure when or why that happened (forgive me for not
> doing an exhaustive search of the archive or delving into the git
> record). But I think perhaps the reason was this thread,
> 
>   
> https://lists.gnu.org/archive/html/emacs-orgmode/2016-07/msg00380.html
> 
> where the issue was easy scaling, and that Jarmo Hurri's patch 
> switching
> to IMG came to be applied at some point, even though Jarmo and I agreed
> that adding a common CLASS="svgfig" attribute to OBJECT would solve his
> issue, see this thread:
> 
>   
> https://lists.gnu.org/archive/html/emacs-orgmode/2016-07/msg00410.html
> 
> I continue to think that OBJECT with an .svgfig class as default (or a
> setting to give the user a choice between IMG and OBJECT) is the best
> solution.
> 
> 2) You can actually embed an SVG island in Org HTML export simply by
> using #+INCLUDE. To try this, add the following line to Gerard's 
> mwe.org:
> 
> : #+INCLUDE: "./doc8.svg" export html
> 
> The exported HTML should now show the black flower from Gerard's 
> minimal
> non-working example plus a working flower.

Indeed, the flower works, but the caption disappears because Org does 
not
recognize the "#+INCLUDE ..." as a link, the caption does not show up in 
the
HTML. Is there an easy solution for this issue.

> 
> (Some SVG files may start with an XML declaration; if the XML
> declaration is on a separate first line, you can just skip it by adding
> =:lines "2-"= to the #+INCLUDE instruction.)
> 
> Yours,
> Christian

Thanks -- Gerard
> 
> Ihor Radchenko writes:
> 
>> gerard.vermeulen@posteo.net writes:
>> 
>>> I have been trying to export SVG images having links to CSS from Org 
>>> to
>>> HTML
>>> and I have found that the this CSS is not active in Firefox (only
>>> browser I tried).
>>> 
>>> I have found that the CCS is only active under two conditions:
>>> 1. The HTML page should manage the CSS that the SVG image links to.
>>> 2. The SVG image should be embedded in the HTML page.
>> 
>> CCing Timothy, the maintainer.
>> 
>> Also, does the above mean that Firefox does not support custom CSS 
>> user
>> stylesheets? What am I missing?
>> 
>>> I wrote an ox-html derived export backend to embed SVG images:
>>> https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-my-html/ox-my-html.el
>>> and merged the SVG embedding functionality into ox-html.el leading to
>>> the
>>> attached patch.
>> 
>> Thanks! I will provide high-level comments from general ox.el
>> perspective.
>> 
>>> +    (:html-embed-svg-excludes "HTML_EMBED_SVG_EXCLUDES" nil
>>> +                              org-html-embed-svg-excludes split)
>>> +    (:html-embed-svg-includes "HTML_EMBED_SVG_INCLUDES" nil
>>> +                              org-html-embed-svg-includes split)
>> 
>> This is awkward. To do per-image export adjustments, we usually use
>> export attributes (#+ATTR_HTML: ...). And why "split"?
>> 
>>> +    (:with-html-svg-embedding nil "html-embed-svg" 
>>> org-html-embed-svg)
>> 
>> We have :html-inline-images. Maybe better :html-embed-svg ?
>> 
>>> +(defcustom org-html-embed-svg nil
>>> ...
>>> +  :version "30.0"
>> 
>> We do not use :version tag. Please use :package-version.
>> See Elisp manual section "15.1 Common Item Keywords".
>> 
>> Also, maybe instead of t/nil boolean values here, we may allow the 
>> value
>> to be a list of regular expressions or a string representing regular
>> expression. This will allow what you are trying to do with
>> HTML_EMBED_SVG_INCLUDES. The list elements might also be (not "..."),
>> replicating HTML_EMBED_SVG_EXLCUDES.
>> 
>> Even more generally, we may turn this into HTML_EMBED_IMAGES and embed
>> all the images (possibly filtered by regexp). This will be slightly
>> beyond the scope of this patch though.
>> 
>>> +(defun org-html--embed-svg-p (link path info)
>>> +  "Check whether LINK and INFO specify to embed the SVG file named 
>>> PATH.
>>> +LINK must have no contents and link to an SVG file.  INFO may 
>>> contain
>>> +lists of SVG files to include in and/or to exclude from embedding."
>>> +  (and (not (org-element-contents link))
>> 
>> Please use `org-export-inline-image-p'.
>> 
>>> +(defun org-html-svg-contents (path)
>>> +  "Return the SVG contents of the file named PATH."
>>> +  (with-temp-buffer
>>> +    (insert-file-contents path)
>>> +    ;; Delete text preceding something starting as an SVG root 
>>> element.
>>> +    ;; The intent is to remove XML declarations (and XML comments).
>>> +    ;; This breaks in case of a preceding XML comment with <svg 
>>> inside
>>> +    ;; or a preceding XML element with an SVG element inside.
>>> +    ;; See https://emacs.stackexchange.com/a/57433 for the original 
>>> code.
>> 
>> But the original code is different, no?

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 05/06/2023 20:23, gerard.vermeulen wrote:
> # The next line overrules html-embed-svg:t
> #+HTML_EMBED_SVG_EXCLUDES: ./doc8.svg
> # The next line overrules html-embed-svg:nil
> #+HTML_EMBED_SVG_INCLUDES: ./doc8.svg

I agree with Ihor's idea concerning #+attr_html (multiple inline images 
in a paragraph may be an issue). However notice that some ox options 
allows include/exclude lists:

  :exclude-tags ("skip")
  :with-drawers (not "skip")

A can not add much to the discussions concerning various approaches to 
include SVG images. I just faced that some SVG files breaks text 
selection in Firefox: https://bugzilla.mozilla.org/1730723

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 06.06.2023 16:14, Max Nikulin wrote:
> On 05/06/2023 20:23, gerard.vermeulen wrote:
>> # The next line overrules html-embed-svg:t
>> #+HTML_EMBED_SVG_EXCLUDES: ./doc8.svg
>> # The next line overrules html-embed-svg:nil
>> #+HTML_EMBED_SVG_INCLUDES: ./doc8.svg
> 
> I agree with Ihor's idea concerning #+attr_html (multiple inline
> images in a paragraph may be an issue).

I think that inlining in the sense of ox-html is different from 
embedding
as done in the patch.  I may be wrong.  This is the first point to 
settle.

If I am right, I think that #+attr_html is not going to work.

> However notice that some ox
> options allows include/exclude lists:
> 
>  :exclude-tags ("skip")
>  :with-drawers (not "skip")

I had been think about names like
:with-svgs-to-embed (...)
:sans-svgs-to-embed (...)
while preparing the patch. I decided to err towards verbosity.
You suggest that
:svgs-to-embed ("yes" "ok")
and
:svgs-to-embed (not "no" "skip")
are possible.
Is it also possible to do
#+EXCLUDE_TAGS: not "no" "skip"
or something similar in an Org file?
> 
> A can not add much to the discussions concerning various approaches to
> include SVG images. I just faced that some SVG files breaks text
> selection in Firefox: https://bugzilla.mozilla.org/1730723

I am using Firefox-113.0.2 and the bug is still there: sometimes
I can select all text from the beginning of the first "selecting"
downwards (depends on my touchpad sweep) but never from the
first "Start".

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Christian Moe]

gerard.vermeulen@posteo.net writes:

> On 06.06.2023 11:57, Christian Moe wrote:
[...]
>> 1) Embedded SVG is not the only way to have active CSS etc. in SVG
>> images. Linking to an external SVG file with an OBJECT element instead
>> of IMG should work fine (tested in Firefox). You can test this by
>> exporting Gerard's mwe.org example and editing the mwe.html to replace
>> : img src="./doc8.svg"
>> with
>> : object type="image/svg+xml" data="./doc8.svg"
>
> Indeed, the flower works after the replacement but the caption
> disappears.
> I do not understand why, because the caption is still present in the
> HTML.

Oops, sorry, my example was incomplete. Closing the <object> tag with
</object> should help.

[...]
>> 2) You can actually embed an SVG island in Org HTML export simply by
>> using #+INCLUDE. To try this, add the following line to Gerard's
>> mwe.org:
>> : #+INCLUDE: "./doc8.svg" export html
>> The exported HTML should now show the black flower from Gerard's
>> minimal
>> non-working example plus a working flower.
>
> Indeed, the flower works, but the caption disappears because Org does
> not
> recognize the "#+INCLUDE ..." as a link, the caption does not show up
> in the
> HTML. Is there an easy solution for this issue.

Fair point! No, I don't think there is an easy, non-messy solution that
will make for generating proper figure captions using the Org #+CAPTION
keyword with this approach. The same goes for embedding the SVG in the
Org file itself in a =#+begin_export html= block.

That's obviously a major drawback. So for embedding an external SVG file
as an SVG island in HTML output with proper figure captioning, your
approach is superior to my #+INCLUDE hack.

That said, I still think the better solution to the issue you raised is
for Orgmode to go back to exporting SVG links as <object> not <img>, not
to extract SVG file contents and embed them as SVG islands.

(Though I may be a breaking change for some users. In particular,
because OBJECT does not have an ALT attribute, but uses several other
ways to provide alternative text for accessibility, users would need to
change their =#+attr_html :alt= to using :aria-label or :title
attributes, unless the Org implementation for SVG links were to handle
this smartly.)

Yours,
Christian

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Christian Moe <mail@christianmoe.com> writes:

> I think there's a better approach. Tl;dr:
>
> - A better way to have active CSS in SVG images is to link to the
>   external SVG file with the <object> rather than <img> tag, as we used
>   to.

Reading the linked threads, it seems that <object> has its own
downsides. Why is it strictly better then?

> - Without patching Org, you can embed an external SVG file as an SVG
>   island in Org HTML export simply by using #+INCLUDE.

To be clear, I am in favor of adding "embedding" switch for ox-html in
general. It is a feature several people requested elsewhere - for all images.
#+INCLUDE is cumbersome, does not work with captions, and will generally
break Org customization relying on Org knowing what kind of object is
being exported.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Christian Moe <mail@christianmoe.com> writes:

> That said, I still think the better solution to the issue you raised is
> for Orgmode to go back to exporting SVG links as <object> not <img>, not
> to extract SVG file contents and embed them as SVG islands.
>
> (Though I may be a breaking change for some users. In particular,
> because OBJECT does not have an ALT attribute, but uses several other
> ways to provide alternative text for accessibility, users would need to
> change their =#+attr_html :alt= to using :aria-label or :title
> attributes, unless the Org implementation for SVG links were to handle
> this smartly.)

It might be ok optional feature, controlled by some #+ATTR_HTML
attribute. Patches welcome.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

gerard.vermeulen@posteo.net writes:

>> This is awkward. To do per-image export adjustments, we usually use
>> export attributes (#+ATTR_HTML: ...). And why "split"?
>
> I do not think that #+ATTR_HTML allows to embed (= copy) the contents
> of an SVG file directly into the HTML page.  As far as I understand, it 
> adds
> only attributes to HTML elements.

For now, yes. But more generally, Org uses #+ATTR_BACKEND to configure
export. For example, see "13.10.6 Images in LaTeX export".

You may arrange ox-html to handle special #+ATTR_BACKEND: :org-embed t
attribute that will be ignored in `org-html--make-attribute-string' and
checked in your `org-html--embed-svg-p'.

> The "split" is because of similarity with :select_tags and :exclude_tags 
> in ox.
> It allows several files to be included in or excluded from embedding.

Makes sense.

>> Please use `org-export-inline-image-p'.
>
> I think that the terminology "inline-image" in ox-html is confusing.
> In ox-html the result of the "inline-image"  code is an HTML tag like
>
> <img with attributes inside>
>
> It does not mean that image data is copied inline as with embedding.

If image is not inlined, it must not be displayed as an image, just as a
link. Your code will break this convention.

Please refer to "13.9.9 Images in HTML export" section of Org manual.

>> But the original code is different, no?
>
> Yes, I pretend that my code is an improvement:
> 1. The with-syntax-table is superfluous.
> 2. The error message gives a reason and the filename causing it.

Then, I find your code sufficiently different to not link to
stackoverflow. This link is not helpful to understand the code.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

gerard.vermeulen@posteo.net writes:

> I had been think about names like
> :with-svgs-to-embed (...)
> :sans-svgs-to-embed (...)
> while preparing the patch. I decided to err towards verbosity.

I think that the idea with putting explicit file names is not good.
It will force extra work for users.
Instead, it should be possible to switch embedding on/off right at near
image link. And more global setting should deal with regexp patterns or
enabling/disabling embedding globally.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Christian Moe]

Ihor Radchenko writes:

> Christian Moe <mail@christianmoe.com> writes:
>
>> I think there's a better approach. Tl;dr:
>>
>> - A better way to have active CSS in SVG images is to link to the
>>   external SVG file with the <object> rather than <img> tag, as we used
>>   to.
>
> Reading the linked threads, it seems that <object> has its own
> downsides. Why is it strictly better then?

I'm not sure it's strictly better.

The problem in the linked threads was with scaling, and I don't think it
applies anymore. As I just tested in Firefox, at least, I can control
the size of Gerard's SVG illustration perfectly well by setting CSS
height and width attributes on an <object>.

Apart from that, my reasoning amounted only to this:

- <object> works as well as embedding for CSS

- For Org to extract and embed the SVG means more things that can break
  (though I admit that it can be made a lot less fragile than the
  #+INCLUDE hack) and when they do break, it's an Org problem. With
  <object> Org just needs to properly format the tags; if it does, the
  rest is the browser's responsibility.

- If the external SVG file is modified, with embedding all files
  referencing it need to be exported again for the change to take
  effect. With <object> linking to the external file, all that is
  needed is refreshing the browser.

- Readable, uncluttered HTML is nice; huge, unreadable stretches of SVG
  aren't.

Some arguments for embedding I didn't consider:

- fewer http calls

- It makes accessing the SVG internals with Javascript a bit easier than
  with <object> (the difference is just one line of JS) -- and a lot
  easier if you trigger Firefox's same-origin restrictions by keeping
  the files on a file system rather than a server.

>> - Without patching Org, you can embed an external SVG file as an SVG
>>   island in Org HTML export simply by using #+INCLUDE.
>
> To be clear, I am in favor of adding "embedding" switch for ox-html in
> general. It is a feature several people requested elsewhere - for all images.
> #+INCLUDE is cumbersome, does not work with captions, and will generally
> break Org customization relying on Org knowing what kind of object is
> being exported.

Fair points.

Yours,
Christian

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Christian Moe <mail@christianmoe.com> writes:

>> Reading the linked threads, it seems that <object> has its own
>> downsides. Why is it strictly better then?
>
> I'm not sure it's strictly better.
>
> The problem in the linked threads was with scaling, and I don't think it
> applies anymore. As I just tested in Firefox, at least, I can control
> the size of Gerard's SVG illustration perfectly well by setting CSS
> height and width attributes on an <object>.

That ship sailed long time ago.
Now, switching back to <object> will be a breaking change that should be
justified. Mind that we use "img" tag for all images, not just svg.

For now, you are just pointing that <object> will inherit CSS of the
page.

But there will be downsides you mentioned, like absence of alt
attribute (which is a big deal - we do not want to compromise
accessibility for blind users - see
https://orgmode.org/list/CAJcAo8uTOpEazLNCr0t1kFqPGTLz=G=aDnKLhuo1-Ura8-m7-Q@mail.gmail.com or
https://list.orgmode.org/orgmode/87czew3w5l.fsf@localhost/ )
Also, https://www.w3schools.com/TAgs/tag_object.asp explicitly
recommends against <object> for images in favor or <img>.

Finally, I can see that there are ways to use CSS on img+svg:
https://blog.union.io/code/2017/08/10/img-svg-fill/

> - For Org to extract and embed the SVG means more things that can break
>   (though I admit that it can be made a lot less fragile than the
>   #+INCLUDE hack) and when they do break, it's an Org problem. With
>   <object> Org just needs to properly format the tags; if it does, the
>   rest is the browser's responsibility.

May you elaborate?

> - If the external SVG file is modified, with embedding all files
>   referencing it need to be exported again for the change to take
>   effect. With <object> linking to the external file, all that is
>   needed is refreshing the browser.

That's why the proposed patch does not turn the embedding on by default.
But some people do want embedding to make html self-contained, if not
for CSS.

Note that I am inclined to accept the patch for reasons different
from the motivation of the patch author. Especially, if the patch gets
extended to allow embedding raster images as well.

> - Readable, uncluttered HTML is nice; huge, unreadable stretches of SVG
>   aren't.

Sure, if users want uncluttered HTML. Some users do. Some wants the
opposite.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 06/06/2023 23:08, gerard.vermeulen@posteo.net wrote:
> Is it also possible to do
> #+EXCLUDE_TAGS: not "no" "skip"
> or something similar in an Org file?

It is a feature of `org-export-with-drawers'. Variants of its value:
- t,
- nil,
- ("drawer1" "drawer2"),
- (not "drawer1" "drawer2")

As to tags, separate lists are used: `org-export-select-tags' and 
`org-export-exclude-tags'.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 07.06.2023 19:57, Ihor Radchenko wrote:
[...]
I understand why you prefer the <img> tag over the <object> tag.

> Finally, I can see that there are ways to use CSS on img+svg:
> https://blog.union.io/code/2017/08/10/img-svg-fill/

I failed to make the flower example work with the information on this 
site.
It could be my fault, but maybe also because the post targets the React
framework since its subtitle reads "A Side Quest in Optimizing 
Performance
for React".

FWIW, here a brief description of how I solved my problem of making the
MDN flower work taking into account the comments for improvement as
far as I could. Thanks!

https://forge.chapril.org/gav451/emacs.d/src/branch/main/site-lisp/ox-svg4css/ox-svg4css.el
is a new derived backend for personal use.  The commentary section of
the backend and MWE follow below:

#+begin_src emacs-lisp
;; This library implements an HTML derived backend for Org export.
;; It tries to address limitations of SVG images and CSS in HTML pages.
;; For each SVG image during HTML export:
;; 1. It checks `svg-as-object' and "image in-lining" whether to
;;    embed the SVG image in an <object> tag.
;; 2. If not, it checks `svg-inclusion' and "image in-lining"
;;    whether to copy the SVG contents to the HTML output.
;; 3. If not, it falls back to checking "image in-lining" whether to
;;    embed the SVG image in an <img> tag (as any other image type).
;; 4. It is possible to set `svg-as-object' and/or `svg-inclusion':
;;    - For each SVG link by means of "#+ATTR_HTML: :svg-as-object t"
;;      or "#+ATTR_HTML: :svg-inclusion t".
;;    - Within file scope by means of "#+OPTIONS: svg-as-object:t" or
;;      "#+OPTIONS: svg-inclusion:t".
;;    - Within toplevel scope by means of the options
;;      `org-html-svg-as-object' or `org-html-svg-inclusion'.
;;
;; Caveats: the HTML output does not comply with W3C recommendations
;; after `svg-as-object' and/or `svg-inclusion' exports and it does not
;; comply with the Org Manual section "13.9.9 Images in HTML export"
;; after `svg-inclusion' exports.
;;
;; See: 
https://list.orgmode.org/c1eef10be815748d2103cb81bce08708@posteo.net/
;; where Cristian Moe has proposed to embed SVG images in <object> tags.
;; Ihor Radchenko and Max Nikulin have insisted on the use of special
;; "#+ATTR_HTML:" attributes to control the export options.
;;
;; I prefer enabling `:svg-as-object' over enabling `:svg-inclusion'.
;;
;; Relevant W3C documentation:
;;
;; Loading an SVG image by an HTML <embed>, <iframe> or <object> tag:
;; https://stackoverflow.com/a/12604286
;; https://svgwg.org/specs/integration/#referencing-modes
;; https://svgwg.org/specs/integration/#embedded-document-mode
;; https://svgwg.org/specs/integration/#dynamic-interactive-mode
;;
;; Four types of SVG document usage with their security implications:
;; https://www.w3.org/wiki/SVG_Security
#+end_src

#+begin_src org :tangle mwe.org
#+title: SVG and CSS MWE with svg4css backend using svg-as-object
#+HTML_DOCTYPE: html5
The files =doc8.svg= and =style8.css= come from 
[[https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS][SVG 
and CSS (MDN)]].
Open =doc8.svg= and =mwe.html= in Firefox to compare hovering over the
flower.  The flower remains fully black in case of an M-non-WE.

#+ATTR_HTML: :svg-as-object t :title Does the flower work?
#+CAPTION: Is MWE with SVG export in an <object> tag instead of an <img> 
tag.
[[./doc8.svg]]
# Note: the object tag requires to start the link with ./ to resolve it.
#+end_src

Best regards -- Gerard

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 15/06/2023 20:09, gerard.vermeulen@posteo.net wrote:
> ;;    - For each SVG link by means of "#+ATTR_HTML: :svg-as-object t"
> ;;      or "#+ATTR_HTML: :svg-inclusion t".

Is there any advantages of using separate boolean attributes instead of 
multiple values?

- :svg object
- :svg img
- :svg dom (or any other value for inserting contents of SVG files into 
HTML)

"inline" is really ambiguous here since it may mean CSS display property 
block vs. inline that is similar to Org's block-level elements and 
inline objects.

Has anybody compared memory footprint of a document with multiple SVG 
images rendered by a browser with <img> vs <object> strategies? It seems 
at least Firefox may create frames for each <object> so the page may be 
rather heavy.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Max Nikulin <manikulin@gmail.com> writes:

> Has anybody compared memory footprint of a document with multiple SVG 
> images rendered by a browser with <img> vs <object> strategies? It seems 
> at least Firefox may create frames for each <object> so the page may be 
> rather heavy.

I do not think it matters. At least, it should not stop us from
providing <object> as an optional feature.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

gerard.vermeulen@posteo.net writes:

> On 07.06.2023 19:57, Ihor Radchenko wrote:
> [...]
> I understand why you prefer the <img> tag over the <object> tag.
>
>> Finally, I can see that there are ways to use CSS on img+svg:
>> https://blog.union.io/code/2017/08/10/img-svg-fill/
>
> I failed to make the flower example work with the information on this 
> site.

I am not expert in html. Maybe someone else (Timothy?) can chime in.

That said, I do not see why we cannot offer <object> strategy as an
option regardless whether is can solve the problem with CSS.

> ;; For each SVG image during HTML export:
> ;; 1. It checks `svg-as-object' and "image in-lining" whether to
> ;;    embed the SVG image in an <object> tag.
> ;; 2. If not, it checks `svg-inclusion' and "image in-lining"
> ;;    whether to copy the SVG contents to the HTML output.
> ;; 3. If not, it falls back to checking "image in-lining" whether to
> ;;    embed the SVG image in an <img> tag (as any other image type).
> ;; 4. It is possible to set `svg-as-object' and/or `svg-inclusion':
> ;;    - For each SVG link by means of "#+ATTR_HTML: :svg-as-object t"
> ;;      or "#+ATTR_HTML: :svg-inclusion t".
> ;;    - Within file scope by means of "#+OPTIONS: svg-as-object:t" or
> ;;      "#+OPTIONS: svg-inclusion:t".
> ;;    - Within toplevel scope by means of the options
> ;;      `org-html-svg-as-object' or `org-html-svg-inclusion'.

I think you missed `org-html-inline-image-rules' where users can
include/exclude svg images from inlining.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 15.06.2023 22:51, Ihor Radchenko wrote:
> gerard.vermeulen@posteo.net writes:
> 
>> On 07.06.2023 19:57, Ihor Radchenko wrote:
> I am not expert in html. Maybe someone else (Timothy?) can chime in.
> 
> That said, I do not see why we cannot offer <object> strategy as an
> option regardless whether is can solve the problem with CSS.
> 
>> ;; For each SVG image during HTML export:
>> ;; 1. It checks `svg-as-object' and "image in-lining" whether to
>> ;;    embed the SVG image in an <object> tag.
>> ;; 2. If not, it checks `svg-inclusion' and "image in-lining"
>> ;;    whether to copy the SVG contents to the HTML output.
>> ;; 3. If not, it falls back to checking "image in-lining" whether to
>> ;;    embed the SVG image in an <img> tag (as any other image type).
>> ;; 4. It is possible to set `svg-as-object' and/or `svg-inclusion':
>> ;;    - For each SVG link by means of "#+ATTR_HTML: :svg-as-object t"
>> ;;      or "#+ATTR_HTML: :svg-inclusion t".
>> ;;    - Within file scope by means of "#+OPTIONS: svg-as-object:t" or
>> ;;      "#+OPTIONS: svg-inclusion:t".
>> ;;    - Within toplevel scope by means of the options
>> ;;      `org-html-svg-as-object' or `org-html-svg-inclusion'.
> 
> I think you missed `org-html-inline-image-rules' where users can
> include/exclude svg images from inlining.

The term "image in-lining" is a very terse description of what my code 
does.

In case of rules 1, 2, and 3 above: the code takes into account the two
relevant options `org-html-inline-image' and 
`org-html-inline-image-rules'
to decide  whether the image would be in-lined in an <img> tag.

For rule 1 above: in case `svg-as-object' is also true, the code 
in-lines
the image in an <object> tag instead of an <img> tag and returns
the <object> tag. In case `svg-as-object' is nil, apply rule 2.

For rule 2 above: in case `svg-inclusion' is also true,  return the SVG
contents as a result. In case `svg-inclusion' is nil, apply rule 3.

Rule 3 is applied by the normal "Image file" handling code from
org-html-link in ox-html which handles `org-html-image-inline-rules',
but my code for rules 1 and 2 do too.

My clone of org-html-link is a copy with the exception that I
added 4 lines of code (and 2 lines of comments) to implement
the rules 1 and 2 (but we should not implement rule 2).

Before going ahead with a patch to in-line images in <object> tags,
there remains the question of how to make those tags behave as
much as possible as <img> tags.  My knowledge of HTML is very thin
and Javascript even worse.

Best regards -- Gerard

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

gerard.vermeulen@posteo.net writes:

> The term "image in-lining" is a very terse description of what my code 
> does.
> ...
>
> Before going ahead with a patch to in-line images in <object> tags,
> there remains the question of how to make those tags behave as
> much as possible as <img> tags.  My knowledge of HTML is very thin
> and Javascript even worse.

I am afraid that I am reaching the limit of my HTML-fu.
Let's wait for Timothy (ox-html maintainer) to review this.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[gerard.vermeulen]

On 17.06.2023 14:38, Ihor Radchenko wrote:
> gerard.vermeulen@posteo.net writes:
> 
>> The term "image in-lining" is a very terse description of what my code
>> does.
>> ...
>> 
>> Before going ahead with a patch to in-line images in <object> tags,
>> there remains the question of how to make those tags behave as
>> much as possible as <img> tags.  My knowledge of HTML is very thin
>> and Javascript even worse.
> 
> I am afraid that I am reaching the limit of my HTML-fu.
> Let's wait for Timothy (ox-html maintainer) to review this.

That is perfectly fine with me.  I put this aside until after his 
review.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 16/06/2023 03:51, Ihor Radchenko wrote:
> gerard.vermeulen@posteo.net writes:
> 
>> ;; 1. It checks `svg-as-object' and "image in-lining" whether to
>> ;;    embed the SVG image in an <object> tag.
...
> I think you missed `org-html-inline-image-rules' where users can
> include/exclude svg images from inlining.

Ihor, I am not sure that I get your point. If I understand it correctly, 
`org-html-inline-image-rules' specifies whether links to svg files 
should be kept as links or should be transformed to images. Gerard 
proposes to add options how to treat SVG *images*: <img>, <object> or 
include content of the SVG file literally. `org-html-inline-image-rules' 
does not allow to specify extended options how to treat each match.

I am not against <object> option, my concern is to avoid extremely heavy 
page by e.g. rendering a lot of math as svg files. I am not even sure 
that the issue is real, however I suspect it might happen. Adding a 
warning to docs would be enough.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Max Nikulin <manikulin@gmail.com> writes:

>> I think you missed `org-html-inline-image-rules' where users can
>> include/exclude svg images from inlining.
>
> Ihor, I am not sure that I get your point. If I understand it correctly, 
> `org-html-inline-image-rules' specifies whether links to svg files 
> should be kept as links or should be transformed to images. Gerard 
> proposes to add options how to treat SVG *images*: <img>, <object> or 
> include content of the SVG file literally. `org-html-inline-image-rules' 
> does not allow to specify extended options how to treat each match.

That's why Timothy should review this patch.
I am missing all these subtle details about HTML due to lack of knowledge.

> I am not against <object> option, my concern is to avoid extremely heavy 
> page by e.g. rendering a lot of math as svg files. I am not even sure 
> that the issue is real, however I suspect it might happen. Adding a 
> warning to docs would be enough.

We can add a warning iff we conclude that the issue is real.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 21/06/2023 23:02, Ihor Radchenko wrote:
> Max Nikulin writes:
> 
>>> I think you missed `org-html-inline-image-rules' where users can
>>> include/exclude svg images from inlining.
>>
>> Ihor, I am not sure that I get your point. If I understand it correctly,
>> `org-html-inline-image-rules' specifies whether links to svg files
>> should be kept as links or should be transformed to images. Gerard
>> proposes to add options how to treat SVG *images*: <img>, <object> or
>> include content of the SVG file literally. `org-html-inline-image-rules'
>> does not allow to specify extended options how to treat each match.
> 
> That's why Timothy should review this patch.
> I am missing all these subtle details about HTML due to lack of knowledge.

Besides the HTML related question how to mate all SVG options with all 
Org features (figures, etc.) there is a purely Org design choice: 
whether there should be multiple Org boolean variables and attributes 
describing strategy for particular image or it is single variable and 
attribute with symbol (or string) value.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Max Nikulin <manikulin@gmail.com> writes:

> Besides the HTML related question how to mate all SVG options with all 
> Org features (figures, etc.) there is a purely Org design choice: 
> whether there should be multiple Org boolean variables and attributes 
> describing strategy for particular image or it is single variable and 
> attribute with symbol (or string) value.

If we talk about image attributes defined in the affiliated keywords, we
should better resort to #+ATTR_HTML. Introducing extra affiliated
keyword would be a breaking change.

Org only recognizes affiliated keywords listed in
org-element-affiliated-keywords + ATTR_* keywords.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Max Nikulin]

On 21/06/2023 23:38, Ihor Radchenko wrote:
> Max Nikulin writes:
> 
>> Besides the HTML related question how to mate all SVG options with all
>> Org features (figures, etc.) there is a purely Org design choice:
>> whether there should be multiple Org boolean variables and attributes
>> describing strategy for particular image or it is single variable and
>> attribute with symbol (or string) value.
> 
> If we talk about image attributes defined in the affiliated keywords, we
> should better resort to #+ATTR_HTML. Introducing extra affiliated
> keyword would be a breaking change.

I am sorry that I was not clear enough. It may be 3 boolean attributes 
that may be specified in #+ATTR_HTML: or single one that may take 3 
values for <img>/<object>/<svg>.

The only issue with #+ATTR_HTML: is that it is applied to all images 
inside a paragraph. So it can not control individual inline images.

Re: [PATCH] ox-html.el: add option to embed SVG for CSS support in SVG

[Ihor Radchenko]

Max Nikulin <manikulin@gmail.com> writes:

>> If we talk about image attributes defined in the affiliated keywords, we
>> should better resort to #+ATTR_HTML. Introducing extra affiliated
>> keyword would be a breaking change.
>
> I am sorry that I was not clear enough. It may be 3 boolean attributes 
> that may be specified in #+ATTR_HTML: or single one that may take 3 
> values for <img>/<object>/<svg>.

Agree. I am in favour of a single attribute.
However, AFAIU, <img> is not always applicable because it does not allow
embedding and <svg> demands embedding. So, this may need to be discussed
more carefully with more input from people familiar with HTML conventions.

> The only issue with #+ATTR_HTML: is that it is applied to all images 
> inside a paragraph. So it can not control individual inline images.

That's a general issue. We have it, we know about it, we have previously
discussed how to solve it. But it should not distract us from adding
this particular feature.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>