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?