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?