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

[gerard.vermeulen@posteo.net]

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?