emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Alexandre Duret-Lutz <adl@lrde.epita.fr>
To: emacs-orgmode@gnu.org
Cc: tec@tecosaur.com
Subject: Org 9.5 broke the rendering of my SVG images
Date: Wed, 12 Oct 2022 16:17:16 +0200	[thread overview]
Message-ID: <87o7uhp1n7.fsf@lrde.epita.fr> (raw)

Hi,

In Org 9.5, SVG images started being exported by the HTML exporter as
<img> rather than <object>.

The patch causing that was
  https://list.orgmode.org/87k0pemj6d.fsf@gmail.com/T/
with two arguments:
1) <object> do not have an alt attribute
2) <object> will not render some SVG file correctly if it has no viewBox
   (I'm assuming that the issue shown in that message is a missing viewBox).

The reason I've noticed this change is that it broke my web pages.  On
my pages, I use SVG to display many automata, and they all share a
common stylesheet.  That stylesheet is not inlined into the SVG, rather,
it is a separate file included in the SVG files with
  <?xml-stylesheet href="filename.css" type="text/css"?>
so that the browser only need to download it once.

Infortunately, <img> does not allow external stylesheets to be
processed, so my stylesheets are now ignored.  Note that one can also
build SVG images that include other SVG images, or SVG images that have
animations that start when you hover on some elements.  All those
usages would break with <img>.

I've seen that very issue was discussed back in 2016
https://list.orgmode.org/871t2iq353.fsf@iki.fi/T/
where Christian Moe pointed out exactly this:

> (2) You can also do other things with <object> that you cannot with
> <img>, like manipulating the SVG with Javascript and styling it with
> an external stylesheet (linked from the SVG, not the web page).

So in the interest of allowing users to build documents where SVG
files are not static, self-contained images, it seems to me that Org
probably needs some way to specify whether SVG images should be
exported as <img> or <object> (or maybe even inlined).


Also regarding the alt attribute, maybe the code exporting
<object ...>Your browser does not support SVG</object>
could be taught to use
<object ...>alt text</object> when such an alt= attribute is given.
(I have no clue if that's "accessible" enough.)



In the meantime, I'm advicing org-html--format-image as follows to get
the original behavior in my project. (I also need to support different
Org-mode versions, hence the fboundp check.)

;;; Org-mode 9.5 is now using <img> to render SVG images.
;;; Unfortunately, this breaks SVG images that use external style
;;; sheets as <img> are expected to be self-contained.
;;;
;;; Since we do use such external style-sheets and never had
;;; any issue with <object type="image/svg+xml"...>, we revert
;;; to the previous behavior.
;;;
;;; The following function is based on org-html--svg-image from
;;; Org-mode 9.4.5, with the addition of the SVG extension test.
(defun spot-svg-output-as-object (source attributes info)
  "If source is an SVG file, return an \"object\" embedding svg file
SOURCE with given ATTRIBUTES.
INFO is a plist used as a communication channel.  Otherwise return nil.

The special attribute \"fallback\" can be used to specify a
fallback image file to use if the object embedding is not
supported.  CSS class \"org-svg\" is assigned as the class of the
object unless a different class is specified with an attribute."
  (when (string= "svg" (file-name-extension source))
    (let ((fallback (plist-get attributes :fallback))
          (attrs (org-html--make-attribute-string
                  (org-combine-plists
                   ;; Remove fallback attribute, which is not meant to
                   ;; appear directly in the attributes string, and
                   ;; provide a default class if none is set.
                   '(:class "org-svg") 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.")))))
;;; Hack org-html--format-image to call the above first.
;;; (The org-html--svg-image function was removed when the formater code
;;; switched to <img> for SVG.)
(unless (fboundp 'org-html--svg-image)
  (advice-add 'org-html--format-image :before-until 'spot-svg-output-as-object))

-- 
Alexandre


             reply	other threads:[~2022-10-12 14:18 UTC|newest]

Thread overview: 4+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2022-10-12 14:17 Alexandre Duret-Lutz [this message]
2022-10-14  8:17 ` Org 9.5 broke the rendering of my SVG images Ihor Radchenko
2022-10-17 13:32   ` Chris Clark
2022-10-17 13:49     ` Timothy

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=87o7uhp1n7.fsf@lrde.epita.fr \
    --to=adl@lrde.epita.fr \
    --cc=emacs-orgmode@gnu.org \
    --cc=tec@tecosaur.com \
    /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).