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

[gerard . vermeulen]

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

0001-ox-html.el-add-option-to-embed-SVG-for-CSS-support-i.patch
Description: Binary data

mwe.org
Description: Binary data

SVG and CSS MWE with patch or with ox-my-html backend

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.

Figure 1: Is MWE with SVG embedding and with HTML_HEAD managing the CSS. Becomes an M-non-WE without SVG embedding or without HTML_HEAD managing the CSS.

Author: Gerard Vermeulen

Created: 2023-06-05 Mon 11:10

Validate

style8.css
Description: Text Data

doc8.svg
Description: image/svg