Request: change SVG embedding in exported HTML

Request: change SVG embedding in exported HTML

[Jarmo Hurri]

Greetings.

Request: An SVG file embedded in exported HTML should be embedded using
the <img> tag instead of <object>.

Short reasoning: The displayed size of the SVG image can not be
controlled from outside the SVG file when embedded using <object>, but
size can be controlled when embedded using <img>.

Here is the longer explanation.

The HTML exporter currently embeds SVG as an object. Here is an example
of the HTML produced by the exporter:

<div class="figure">
<p><object type="image/svg+xml" data="kolmio-nelio.svg" >
Sorry, your browser does not support SVG.</object>
</p>
</div>

I have in the past couple of days found out that there is a serious
disadvantage to this: the displayed size of the resulting web page image
can not be controlled in any reasonable manner; see, for example

https://css-tricks.com/scale-svg/

However, the size _can_ be controlled if embedding is done with an
<img>. For example, the exported code above could be

<div class="figure">
<img class="org-svg" src="kolmio-nelio.svg">
</div>

I have included 'class="org-svg"' above so that embedded SVG images can
then be distinguished from other images in CSS files. For example, the
following CSS then sets the width of SVG images to be 80% of the width
of the viewport.

.org-svg
{
    width: 80vw;
}

Current embedding using <object> has a nice textual fallback property
for browsers not capable of SVG (I have no idea if this support is
necessary nowadays). If need be, such fallback could also be added to
embedding using <img>. See

http://www.w3schools.com/jsref/event_onerror.asp

Jarmo

Re: Request: change SVG embedding in exported HTML

[Scott Randby]

On 07/23/2016 08:53 AM, Jarmo Hurri wrote:
> 
> Greetings.
> 
> Request: An SVG file embedded in exported HTML should be embedded using
> the <img> tag instead of <object>.

I second this request. Right now, I use HTML code for SVG images, and
I'd rather use Org markup instead.

Scott Randby

> 
> Short reasoning: The displayed size of the SVG image can not be
> controlled from outside the SVG file when embedded using <object>, but
> size can be controlled when embedded using <img>.
> 
> Here is the longer explanation.
> 
> The HTML exporter currently embeds SVG as an object. Here is an example
> of the HTML produced by the exporter:
> 
> <div class="figure">
> <p><object type="image/svg+xml" data="kolmio-nelio.svg" >
> Sorry, your browser does not support SVG.</object>
> </p>
> </div>
> 
> I have in the past couple of days found out that there is a serious
> disadvantage to this: the displayed size of the resulting web page image
> can not be controlled in any reasonable manner; see, for example
> 
> https://css-tricks.com/scale-svg/
> 
> However, the size _can_ be controlled if embedding is done with an
> <img>. For example, the exported code above could be
> 
> <div class="figure">
> <img class="org-svg" src="kolmio-nelio.svg">
> </div>
> 
> I have included 'class="org-svg"' above so that embedded SVG images can
> then be distinguished from other images in CSS files. For example, the
> following CSS then sets the width of SVG images to be 80% of the width
> of the viewport.
> 
> .org-svg
> {
>     width: 80vw;
> }
> 
> Current embedding using <object> has a nice textual fallback property
> for browsers not capable of SVG (I have no idea if this support is
> necessary nowadays). If need be, such fallback could also be added to
> embedding using <img>. See
> 
> http://www.w3schools.com/jsref/event_onerror.asp
> 
> Jarmo
> 
> 
> 

Re: Request: change SVG embedding in exported HTML

[Christian Moe]

I disagree. A switch to <img> for SVG export (1) is not necessary for
scaling, and (2) would disable other useful features that are presently
available out of the box.

(1) It *is* a bit easier to scale SVG with <img> in HTML. But you *can*
scale SVG with <object> by putting the <object> in a container <div> and
scaling the container width and height.

This is actually simple with Org, which natively wraps the <object> in a
<div class="figure"> tag, and passes any attributes to the latter.  To
scale an arbitrary image.svg e.g. to 100px width, try:

  #+attr_html: :width 100px
  [[path/to/image.svg]]

Alternatively, you can use #+attr_html to set an id on the figure <div>,
and style it with CSS.

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

Raw SVG in the exported HTML is a third option that is very plain-texty
and supports all the mentioned features, but it tends to bloat files,
and doesn't encourage caching and re-using of an image across web pages.

To sum up, <img> makes the most common task simpler (scaling the
graphic), but at the cost of features such as interactive animated
graphics, which are possible with <object> or SVG islands.

Yours,
Christian

Scott Randby writes:

> On 07/23/2016 08:53 AM, Jarmo Hurri wrote:
>> 
>> Greetings.
>> 
>> Request: An SVG file embedded in exported HTML should be embedded using
>> the <img> tag instead of <object>.
>
> I second this request. Right now, I use HTML code for SVG images, and
> I'd rather use Org markup instead.
>
> Scott Randby
>
>> 
>> Short reasoning: The displayed size of the SVG image can not be
>> controlled from outside the SVG file when embedded using <object>, but
>> size can be controlled when embedded using <img>.
>> 
>> Here is the longer explanation.
>> 
>> The HTML exporter currently embeds SVG as an object. Here is an example
>> of the HTML produced by the exporter:
>> 
>> <div class="figure">
>> <p><object type="image/svg+xml" data="kolmio-nelio.svg" >
>> Sorry, your browser does not support SVG.</object>
>> </p>
>> </div>
>> 
>> I have in the past couple of days found out that there is a serious
>> disadvantage to this: the displayed size of the resulting web page image
>> can not be controlled in any reasonable manner; see, for example
>> 
>> https://css-tricks.com/scale-svg/
>> 
>> However, the size _can_ be controlled if embedding is done with an
>> <img>. For example, the exported code above could be
>> 
>> <div class="figure">
>> <img class="org-svg" src="kolmio-nelio.svg">
>> </div>
>> 
>> I have included 'class="org-svg"' above so that embedded SVG images can
>> then be distinguished from other images in CSS files. For example, the
>> following CSS then sets the width of SVG images to be 80% of the width
>> of the viewport.
>> 
>> .org-svg
>> {
>>     width: 80vw;
>> }
>> 
>> Current embedding using <object> has a nice textual fallback property
>> for browsers not capable of SVG (I have no idea if this support is
>> necessary nowadays). If need be, such fallback could also be added to
>> embedding using <img>. See
>> 
>> http://www.w3schools.com/jsref/event_onerror.asp
>> 
>> Jarmo
>> 
>> 
>> 

Re: Request: change SVG embedding in exported HTML

[Christian Moe]

I also disagree with myself :-)  -- I wrote:

> To sum up, <img> makes the most common task simpler (scaling the
> graphic),

but the Org example I included seems to show that <object> can be just
as simple from Org. Forgot to edit the conclusion.

cm

Re: Request: change SVG embedding in exported HTML

[Scott Randby]

On 07/24/2016 12:50 PM, Christian Moe wrote:
> 
> I disagree. A switch to <img> for SVG export (1) is not necessary for
> scaling, and (2) would disable other useful features that are presently
> available out of the box.
> 
> (1) It *is* a bit easier to scale SVG with <img> in HTML. But you *can*
> scale SVG with <object> by putting the <object> in a container <div> and
> scaling the container width and height.
> 
> This is actually simple with Org, which natively wraps the <object> in a
> <div class="figure"> tag, and passes any attributes to the latter.  To
> scale an arbitrary image.svg e.g. to 100px width, try:
> 
>   #+attr_html: :width 100px
>   [[path/to/image.svg]]

It has been awhile since I tried to scale an SVG image using Org markup,
but I recall trying what you suggest and it didn't work. I will try
again when I have some time and report the results to this list.

> 
> Alternatively, you can use #+attr_html to set an id on the figure <div>,
> and style it with CSS.
> 
> (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).
> 
> Raw SVG in the exported HTML is a third option that is very plain-texty
> and supports all the mentioned features, but it tends to bloat files,
> and doesn't encourage caching and re-using of an image across web pages.
> 
> To sum up, <img> makes the most common task simpler (scaling the
> graphic), but at the cost of features such as interactive animated
> graphics, which are possible with <object> or SVG islands.

I do remember a discussion in the past about this issue.

Scott

Re: Request: change SVG embedding in exported HTML

[Christian Moe]

Scott Randby writes:

>>   #+attr_html: :width 100px
>>   [[path/to/image.svg]]
>
> It has been awhile since I tried to scale an SVG image using Org markup,
> but I recall trying what you suggest and it didn't work. I will try
> again when I have some time and report the results to this list.

I think I've been there, too, in the past. But it Works for me with Org
8.3.4 in Firefox, and Jarmo Hurri now reports it working in Chrome (see
the thread "Scaling HTML-exported SVG").  It seems I got some details
wrong about *how* it works, though.

Yours,
Christian

Re: Request: change SVG embedding in exported HTML

[Jarmo Hurri]

Christian Moe <mail@christianmoe.com> writes:

> I disagree. A switch to <img> for SVG export (1) is not necessary for
> scaling, and (2) would disable other useful features that are
> presently available out of the box.
>
> (1) It *is* a bit easier to scale SVG with <img> in HTML. But you
> *can* scale SVG with <object> by putting the <object> in a container
> <div> and scaling the container width and height.

The current version of Org wraps the SVG image in a <div> of class
figure, but at least setting the width of this class in a CSS produces
no scaling effect (tested with Chrome and Safari).

> This is actually simple with Org, which natively wraps the <object> in
> a <div class="figure"> tag, and passes any attributes to the latter.
> To scale an arbitrary image.svg e.g. to 100px width, try:
>
>   #+attr_html: :width 100px
>   [[path/to/image.svg]]
>
> Alternatively, you can use #+attr_html to set an id on the figure
> <div>, and style it with CSS.

But if you need to set an id, then you will also have to do scaling on a
file-by-file basis. Or? If this is so, then scaling would be a _lot_
easier using <img>.

Do we need to / could we add an option to HTML export? Either export all
SVG files with <object> or <img>.

Jarmo

Re: Request: change SVG embedding in exported HTML

[Jarmo Hurri]

It looks like we can ignore my suggestion in this thread, and take the
(extremely easy) way out suggested in the thread with title "Scaling
HTML-exported SVG".

Jarmo

Re: Request: change SVG embedding in exported HTML

[Nicolas Goaziou]

Hello,

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

Regards,

-- 
Nicolas Goaziou

Re: Request: change SVG embedding in exported HTML

[Jarmo Hurri]

[-- 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