From: Jarmo Hurri <jarmo.hurri@iki.fi>
To: emacs-orgmode@gnu.org
Subject: Re: Request: change SVG embedding in exported HTML
Date: Sun, 24 Jul 2016 17:42:34 +0300 [thread overview]
Message-ID: <87a8h7nllx.fsf@iki.fi> (raw)
In-Reply-To: 87oa5n1m18.fsf@saiph.selenimh
[-- Attachment #1: Type: text/plain, Size: 1986 bytes --]
Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:
> Jarmo Hurri <jarmo.hurri@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
[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: patch --]
[-- Type: text/x-patch, Size: 2612 bytes --]
From 23776bb643354aaaba09289300fc5c79ce747f4c Mon Sep 17 00:00:00 2001
From: Jarmo Hurri <jarmo.hurri@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
[-- Attachment #3: test file --]
[-- Type: text/plain, Size: 455 bytes --]
#+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
prev parent reply other threads:[~2016-07-24 14:42 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2016-07-23 12:53 Request: change SVG embedding in exported HTML Jarmo Hurri
2016-07-23 20:50 ` Scott Randby
2016-07-24 16:50 ` Christian Moe
2016-07-24 16:55 ` Christian Moe
2016-07-24 17:40 ` Scott Randby
2016-07-24 21:30 ` Christian Moe
2016-07-24 17:51 ` Jarmo Hurri
2016-07-24 18:53 ` Jarmo Hurri
2016-07-24 8:24 ` Nicolas Goaziou
2016-07-24 14:42 ` Jarmo Hurri [this message]
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
List information: https://www.orgmode.org/
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=87a8h7nllx.fsf@iki.fi \
--to=jarmo.hurri@iki.fi \
--cc=emacs-orgmode@gnu.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
Code repositories for project(s) associated with this public inbox
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).