emacs-orgmode@gnu.org archives
 help / color / mirror / code / Atom feed
From: Christian Moe <mail@christianmoe.com>
To: Jarmo Hurri <jarmo.hurri@iki.fi>
Cc: emacs-orgmode@gnu.org
Subject: Re: Scaling HTML-exported SVG
Date: Sun, 24 Jul 2016 23:26:49 +0200	[thread overview]
Message-ID: <m24m7eu3qe.fsf@christianmoe.com> (raw)
In-Reply-To: <878twqq3df.fsf@iki.fi>


Jarmo Hurri writes:

> The method you suggested above - setting id - works (all tests done in
> Chrome).

Mine are in Firefox. 

> But setting id-values is cumbersome, because you need to do it
> for every file.
> It is also possible to set a CSS class similarly, that is, modifying
> your example above,
>
> #+html_head_extra: <style>.svgfig {width: 200px; }</style>
>
> #+attr_html: :class svgfig
> [[path/to/image.svg]]
>
> This also works and is better, because then it is possible to set a
> common class for all SVG figures, and handle them with a single CSS
> rule.

Sure, if they should mostly be scaled to the same size. I just didn't
make that assumption.

> Better, but not yet perfect, because I still need to add a
> attr_html to every SVG figure.

> But there seems to be a way around this. With the last approach the
> generated HTML looks something like
>
> <object type="image/svg+xml" data="image.svg" class="svgfig">

Indeed. Now I'm confused, because this example seems to mean I got
several things wrong earlier today. First, it seems one *can* scale an
SVG image by setting attributes on the <object> element, not just by
scaling the container element as I thought. At least in FF and
Chrome. And second, Org passes attributes from #+attr_html to the
<object> element, not to the container <div> as I wrote, though I could
have sworn that was what I saw when I tested today. On that note, I
think I'll go to bed... But first:

> Why don't we just set a common class for all SVG-images in an HTML
> export by default? Then we could still use an <object> to embed it, and
> control its size from CSS.

> It seems to me that this solves the problem, and requires an extremely
> small change.

Me too. At least, I cannot think of any obvious disadvantages, and it
could be helpful if you want all or most of your SVGs to be scaled to
the same size (or otherwise styled the same way). Particularly if you
need to distinguish them from <object> tags embedding other media, like
videos.

(If you're *not* using <object> for anything beside SVGs, or at least
not in <div class="figure"> environments, you could just style objects,
couldn't you?  e.g.:

  object { width: 200px; }

or slightly safer

  .figure object { width: 200px; }

But I agree that an explicit 'svg' class could be better.)

Yours,
Christian

      reply	other threads:[~2016-07-24 21:26 UTC|newest]

Thread overview: 5+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2016-07-22 13:10 Scaling HTML-exported SVG Jarmo Hurri
2016-07-24 17:09 ` Christian Moe
2016-07-24 17:55   ` Jarmo Hurri
2016-07-24 18:48     ` Jarmo Hurri
2016-07-24 21:26       ` Christian Moe [this message]

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=m24m7eu3qe.fsf@christianmoe.com \
    --to=mail@christianmoe.com \
    --cc=emacs-orgmode@gnu.org \
    --cc=jarmo.hurri@iki.fi \
    /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).