Org 9.5 broke the rendering of my SVG images

Org 9.5 broke the rendering of my SVG images

[Alexandre Duret-Lutz]

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

Re: Org 9.5 broke the rendering of my SVG images

[Ihor Radchenko]

Alexandre Duret-Lutz <adl@lrde.epita.fr> writes:

> 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).

Confirmed.
This is clearly a regression and should be fixed.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: Org 9.5 broke the rendering of my SVG images

[Chris Clark]

[-- Attachment #1: Type: text/plain, Size: 2435 bytes --]

Would the HTML <svg> tag be appropriate in this case?

For example, here's a tiny example of using the <svg> tag with an external
CSS stylesheet: https://plnkr.co/edit/i8RFDW?preview


On Fri, Oct 14, 2022 at 4:32 AM Ihor Radchenko <yantar92@gmail.com> wrote:

> Alexandre Duret-Lutz <adl@lrde.epita.fr> writes:
>
> > 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).
>
> Confirmed.
> This is clearly a regression and should be fixed.
>
> --
> Ihor Radchenko // yantar92,
> Org mode contributor,
> Learn more about Org mode at <https://orgmode.org/>.
> Support Org development at <https://liberapay.com/org-mode>,
> or support my work at <https://liberapay.com/yantar92>
>
>

[-- Attachment #2: Type: text/html, Size: 3685 bytes --]

Re: Org 9.5 broke the rendering of my SVG images

[Timothy]

[-- Attachment #1: Type: text/plain, Size: 512 bytes --]

Hi Chris,

> Would the HTML <svg> tag be appropriate in this case?

Adding an option to switch between object/img would be best, and I’ll do so in
the near future, I’m just currently sorting out the test deployment of the 2022
Emacs Survey.

All the best,
Timothy

-- 
Timothy (‘tecosaur’/‘TEC’), Org mode contributor.
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/tec>.

Re: Org 9.5 broke the rendering of my SVG images

[Ihor Radchenko]

Timothy <orgmode@tec.tecosaur.net> writes:

>> Would the HTML <svg> tag be appropriate in this case?
>
> Adding an option to switch between object/img would be best, and I’ll do so in
> the near future, I’m just currently sorting out the test deployment of the 2022
> Emacs Survey.

I am inclined to revert the commit changing object to img for svg
images.

The previously discussed concerns about object tag do not seem to be
real:
1. Resizing objects seems to be supported:
   https://list.orgmode.org/87y44tx1h5.fsf@iki.fi/
2. We can put :alt text on objects using tactics described in
   https://stackoverflow.com/questions/27884879/how-do-i-add-alternative-text-to-an-object

I see no benefits using img in our situation.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: Org 9.5 broke the rendering of my SVG images

[Ihor Radchenko]

Ihor Radchenko <yantar92@posteo.net> writes:

> I am inclined to revert the commit changing object to img for svg
> images.
>
> The previously discussed concerns about object tag do not seem to be
> real:
> 1. Resizing objects seems to be supported:
>    https://list.orgmode.org/87y44tx1h5.fsf@iki.fi/
> 2. We can put :alt text on objects using tactics described in
>    https://stackoverflow.com/questions/27884879/how-do-i-add-alternative-text-to-an-object
>
> I see no benefits using img in our situation.

Done, on main.
https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=895a367a6
https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=302bc6393
https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=0e5ac4332

Hope I did not break anything.

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>

Re: Org 9.5 broke the rendering of my SVG images

[Ihor Radchenko]

Ihor Radchenko <yantar92@posteo.net> writes:

> Ihor Radchenko <yantar92@posteo.net> writes:
>
>> I am inclined to revert the commit changing object to img for svg
>> images.
>>
>> The previously discussed concerns about object tag do not seem to be
>> real:
>> 1. Resizing objects seems to be supported:
>>    https://list.orgmode.org/87y44tx1h5.fsf@iki.fi/
>> 2. We can put :alt text on objects using tactics described in
>>    https://stackoverflow.com/questions/27884879/how-do-i-add-alternative-text-to-an-object
>>
>> I see no benefits using img in our situation.
>
> Done, on main.
> https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=895a367a6
> https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=302bc6393
> https://git.savannah.gnu.org/cgit/emacs/org-mode.git/commit/?id=0e5ac4332
>
> Hope I did not break anything.

My hope was futile. qtwebengine is unable to render <object ...> svgs
with data pointing to outside URL. So, I have reverted the commits.
It does not look like using <object ...> for svgs is a good idea these
days. (If someone more familiar with browser teck have better ideas,
please chime in).

-- 
Ihor Radchenko // yantar92,
Org mode contributor,
Learn more about Org mode at <https://orgmode.org/>.
Support Org development at <https://liberapay.com/org-mode>,
or support my work at <https://liberapay.com/yantar92>