Nicolas Goaziou <m...@nicolasgoaziou.fr> writes:
> Jarmo Hurri <jarmo.hu...@iki.fi> writes:
>
>> Request: An SVG file embedded in exported HTML should be embedded using
>> the <img> tag instead of <object>.
>
> Would you like to provide a patch to this effect? It probably boils down
> to modifying `org-html--svg-image'.
Yes indeed. Please find, at the end of this message, a patch and a test
file. The test file assumes you have Asymptote installed, along with
dvisvgm and probably also convert from ImageMagick; the last two are
needed by Asymptote to produce SVG and JPG output.
I have tested that
- if the browser has SVG support (as almost all do)
1. the default behaviour works (embedding an SVG file)
2. the fallback works if the SVG file is missing (you can test this by
first exporting the test file as HTML, and then removing the SVG file)
- if the browser is missing SVG support (this test was done
with the text-based browser 'links')
- if no fallback is set, the browser will display the text "Sorry,
your browser does not support SVG." as before (and as expected)
Now the case I have _not_ been able to test is the one where the browser
is missing SVG support, and the fallback is set. Unfortunately in this
case the 'links' browser displays nothing in the place of the SVG image,
and I don't know of another browser I could use to test the behaviour.
The first line of the test file can be used to verify that the embedded
SVG file now 'responds' to CSS settings.
I also added the new CSS class to the manual.
If this patch is ok, then what is missing are the default CSS settings
for the new class org-svg in constant org-html-style-default. I simply
did not know what to put there. The manual says that this constant has
basic settings for _all_ defined CSS entities. Either defaults need to
be set for the new class, or the text in the manual needs to be
changed. Or we have to accept that the manual is not logically
coherent. :-)
Jarmo
>From 23776bb643354aaaba09289300fc5c79ce747f4c Mon Sep 17 00:00:00 2001
From: Jarmo Hurri <jarmo.hu...@iki.fi>
Date: Sun, 24 Jul 2016 16:37:21 +0300
Subject: [PATCH] lisp/ox-html.el: Embed SVG images with tag <img> instead of
<object>
* lisp/ox-html.el (org-html--svg-image): Embed SVG file using <img>
tag, providing fallbacks for cases where SVG is not supported or SVG
file is missing. Also provide CSS class org-svg for customizing
presentation of embedded SVG images.
* doc/org.texi (CSS support): Documentation of CSS class org-svg for
SVG images embedded into exported HTML.
---
doc/org.texi | 1 +
lisp/ox-html.el | 18 +++++++++---------
2 files changed, 10 insertions(+), 9 deletions(-)
diff --git a/doc/org.texi b/doc/org.texi
index 1c3868c..c53d1c6 100644
--- a/doc/org.texi
+++ b/doc/org.texi
@@ -11750,6 +11750,7 @@ div.footnotes @r{footnote section headline}
p.footnote @r{footnote definition paragraph, containing a footnote}
.footref @r{a footnote reference number (always a <sup>)}
.footnum @r{footnote number in footnote definition (always <sup>)}
+.org-svg @r{linked SVG image}
@end example
@vindex org-html-style-default
diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index ce4694d..f5b5497 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -1628,21 +1628,21 @@ a communication channel."
info)))
(defun org-html--svg-image (source attributes info)
- "Return \"object\" appropriate for embedding svg file SOURCE
-with assoicated ATTRIBUTES. INFO is a plist used as a
+ "Return \"img\" appropriate for embedding svg file SOURCE
+with associated ATTRIBUTES. INFO is a plist used as a
communication channel.
The special attribute \"fallback\" can be used to specify a fallback
-image file to use if the object embedding is not supported."
+image file to use if svg display is not supported."
(let ((fallback (plist-get attributes :fallback))
(attrs (org-html--make-attribute-string
(plist-put attributes :fallback nil))))
- (format "<object type=\"image/svg+xml\" data=\"%s\" %s>\n%s</object>"
- source attrs
- (if fallback
- (org-html-close-tag
- "img" (format "src=\"%s\" %s" fallback attrs) info)
- "Sorry, your browser does not support SVG."))))
+ (format "<img src=\"%s\" class=\"org-svg\" %s %s>"
+ source attrs
+ (if fallback
+ (format "onerror=\"this.src='%s'; this.onerror=null;\""
+ fallback)
+ "alt=\"Sorry, your browser does not support SVG.\""))))
(defun org-html--textarea-block (element)
"Transcode ELEMENT into a textarea block.
--
2.4.11
#+HTML_HEAD_EXTRA: <style> .org-svg { width: 20vw; } </style>
* test case
#+BEGIN_SRC asymptote :file svg-image.svg
size (1cm, 0);
fill (unitsquare, red);
#+END_SRC
#+ATTR_HTML: :fallback fallback-image.jpg
#+RESULTS:
[[file:svg-image.svg]]
* generation of fallback image
#+BEGIN_SRC asymptote :file fallback-image.jpg
size (2cm, 0);
fill (unitcircle, lightblue + opacity (.5));
label ("fallback", (0, 0));
#+END_SRC
