From: Christian Moe <mail@christianmoe.com>
To: Scott Randby <srandby@gmail.com>
Cc: Jarmo Hurri <jarmo.hurri@iki.fi>, emacs-orgmode@gnu.org
Subject: Re: Request: change SVG embedding in exported HTML
Date: Sun, 24 Jul 2016 18:50:10 +0200 [thread overview]
Message-ID: <m2a8h7t1z1.fsf@christianmoe.com> (raw)
In-Reply-To: <5c2f153b-05ad-c4b5-6384-e3e204a8f201@gmail.com>
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
>>
>>
>>
next prev parent reply other threads:[~2016-07-24 16:50 UTC|newest]
Thread overview: 10+ messages / expand[flat|nested] mbox.gz Atom feed top
2016-07-23 12:53 Request: change SVG embedding in exported HTML Jarmo Hurri
2016-07-23 20:50 ` Scott Randby
2016-07-24 16:50 ` Christian Moe [this message]
2016-07-24 16:55 ` Christian Moe
2016-07-24 17:40 ` Scott Randby
2016-07-24 21:30 ` Christian Moe
2016-07-24 17:51 ` Jarmo Hurri
2016-07-24 18:53 ` Jarmo Hurri
2016-07-24 8:24 ` Nicolas Goaziou
2016-07-24 14:42 ` Jarmo Hurri
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=m2a8h7t1z1.fsf@christianmoe.com \
--to=mail@christianmoe.com \
--cc=emacs-orgmode@gnu.org \
--cc=jarmo.hurri@iki.fi \
--cc=srandby@gmail.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).