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

[gerard.vermeulen@posteo.net]

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