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.eland 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 withdoc8.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.
Created: 2023-06-05 Mon 11:10
/*** SVG demonstration ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } /* outer petals */ #outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* Non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; }