[PATCH] Use <img> tags for SVGs

[PATCH] Use <img> tags for SVGs

[Timothy]

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

Hey everyone,

This is the first patch addressing an item raised in
https://orgmode.org/list/87sga4914t.fsf@gmail.com/ [subject: W3C
violations in Org's HTML export].

For more information see the email mentioned above and/or the commit
message.
It's worth nothing that the current approach isn't just "not great", but
actually causes some issues. For instance, in the ox-html export of my
Emacs config, here's an SVG generated by Gnuplot with org-plot:


[-- Attachment #2: svg-object.png --]
[-- Type: image/png, Size: 45527 bytes --]

[-- Attachment #3: Type: text/plain, Size: 66 bytes --]


If I just change <object> to <img> this is much better behaved:


[-- Attachment #4: svg-img.png --]
[-- Type: image/png, Size: 47244 bytes --]

[-- Attachment #5: Type: text/plain, Size: 69 bytes --]


Anyway, that's enough preamble --- here's the patch :)

--
Timothy


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #6: 0001-ox-html-Use-img-tags-for-svgs-not-object.patch --]
[-- Type: text/x-patch, Size: 3210 bytes --]

From 9c041f16a947309d47c5a162146946268788d459 Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 7 Apr 2021 19:07:53 +0800
Subject: [PATCH] ox-html: Use <img> tags for svgs, not <object>

* lisp/ox-html.el (org-html--format-image, org-html--svg-image): Remove
special treatment of SVGs with <object>, and just use <img>.  This used
to be poorly supported, but since Firefox 4 / Chrome 28 / Safari 9 this
is no longer a concern (https://caniuse.com/svg-img) and the last
browser release that didn't support SVG images was in 2010 (SVG data
URIs took until 2015 to be fully supported, but this is a lesser
concern).
---
 lisp/ox-html.el | 49 ++++++++++++-------------------------------------
 1 file changed, 12 insertions(+), 37 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 89da823e8..adda7365e 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -1693,43 +1693,18 @@ (defun org-html--format-image (source attributes info)
 ATTRIBUTES is a plist, as returned by
 `org-export-read-attribute'.  INFO is a plist used as
 a communication channel."
-  (if (string= "svg" (file-name-extension source))
-      (org-html--svg-image source attributes info)
-    (org-html-close-tag
-     "img"
-     (org-html--make-attribute-string
-      (org-combine-plists
-       (list :src source
-	     :alt (if (string-match-p
-		       (concat "^" org-preview-latex-image-directory) source)
-		      (org-html-encode-plain-text
-		       (org-find-text-property-in-string 'org-latex-src source))
-		    (file-name-nondirectory source)))
-       attributes))
-     info)))
-
-(defun org-html--svg-image (source attributes info)
-  "Return \"object\" embedding svg file SOURCE with given 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.  CSS class \"org-svg\" is assigned as the class of the
-object unless a different class is specified with an attribute."
-  (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."))))
+  (org-html-close-tag
+   "img"
+   (org-html--make-attribute-string
+    (org-combine-plists
+     (list :src source
+           :alt (if (string-match-p
+                     (concat "^" org-preview-latex-image-directory) source)
+                    (org-html-encode-plain-text
+                     (org-find-text-property-in-string 'org-latex-src source))
+                  (file-name-nondirectory source)))
+     attributes))
+   info))
 
 (defun org-html--textarea-block (element)
   "Transcode ELEMENT into a textarea block.
-- 
2.30.1

Re: [PATCH] Use <img> tags for SVGs

[Timothy]

Timothy <tecosaur@gmail.com> writes:

> It's worth nothing that the current approach isn't just "not great", but
> actually causes some issues.

Oh, and for reference the W3C violation this fixes is:
"Attribute alt not allowed on element object"

--
Timothy

Re: [PATCH] Use <img> tags for SVGs

[Bastien]

Applied as d96e89757, thanks.