emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Scott Randby <srandby@gmail.com>
To: Jarmo Hurri <jarmo.hurri@iki.fi>, emacs-orgmode@gnu.org
Subject: Re: Request: change SVG embedding in exported HTML
Date: Sat, 23 Jul 2016 16:50:51 -0400	[thread overview]
Message-ID: <5c2f153b-05ad-c4b5-6384-e3e204a8f201@gmail.com> (raw)
In-Reply-To: <87oa5oqzvr.fsf@iki.fi>

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

  reply	other threads:[~2016-07-23 20:51 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 [this message]
2016-07-24 16:50   ` Christian Moe
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:

  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=5c2f153b-05ad-c4b5-6384-e3e204a8f201@gmail.com \
    --to=srandby@gmail.com \
    --cc=emacs-orgmode@gnu.org \
    --cc=jarmo.hurri@iki.fi \


* 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


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