emacs-orgmode
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[O] Request: change SVG embedding in exported HTML


From: Jarmo Hurri
Subject: [O] Request: change SVG embedding in exported HTML
Date: Sat, 23 Jul 2016 15:53:44 +0300
User-agent: Gnus/5.13 (Gnus v5.13) Emacs/24.5 (gnu/linux)

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




reply via email to

[Prev in Thread] Current Thread [Next in Thread]