* Scaling HTML-exported SVG
@ 2016-07-22 13:10 Jarmo Hurri
2016-07-24 17:09 ` Christian Moe
0 siblings, 1 reply; 5+ messages in thread
From: Jarmo Hurri @ 2016-07-22 13:10 UTC (permalink / raw)
To: emacs-orgmode
Greetings.
Does anyone have any idea of how to scale an SVG figure produced by Org
(Asymptote)? The exported HTML is
<div class="figure">
<p><object type="image/svg+xml" data="pisteita-koordinaatistossa.svg" >
Sorry, your browser does not support SVG.</object>
</p>
</div>
and the SVG file begins with
<?xml version='1.0'?>
<!-- This file was generated by dvisvgm 1.9.2 -->
<svg height='363.616pt' version='1.1' viewBox='56.6209 54.0603 602.25 363.616' width='602.25pt' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
I have tried various approaches in my CSS, but nothing has worked so
far. I have searched online, and scaling SVG files seems to be a mess.
I basically want to scale the SVG file to be, say 80% of viewed
width. My first try was
.figure
{
width: 80vw;
}
After that I have tried maybe 120 other versions, and nothing has worked.
Jarmo
^ permalink raw reply [flat|nested] 5+ messages in thread* Re: Scaling HTML-exported SVG 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 0 siblings, 1 reply; 5+ messages in thread From: Christian Moe @ 2016-07-24 17:09 UTC (permalink / raw) To: Jarmo Hurri; +Cc: emacs-orgmode Jarmo Hurri writes: > Greetings. > > Does anyone have any idea of how to scale an SVG figure produced by Org > (Asymptote)? The exported HTML is > > <div class="figure"> > <p><object type="image/svg+xml" data="pisteita-koordinaatistossa.svg" > > Sorry, your browser does not support SVG.</object> > </p> > </div> (Suggested an answer on another thread. For completeness:) You can scale the SVG by scaling the <object> element's container, i.e. the <div> with class "figure". Setting attributes on the image link with #+attr_html as usual should work, because they are passed to the figure container rather than to the <object>. Either: #+attr_html: :width 200px [[path/to/image.svg]] or: #+html_head_extra: <style>#svgfig {width: 200px; }</style> #+attr_html: :id svgfig [[path/to/image.svg]] For this to work, the SVG needs to be written to be scalable (with viewport set etc.). Yours, Christian ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Scaling HTML-exported SVG 2016-07-24 17:09 ` Christian Moe @ 2016-07-24 17:55 ` Jarmo Hurri 2016-07-24 18:48 ` Jarmo Hurri 0 siblings, 1 reply; 5+ messages in thread From: Jarmo Hurri @ 2016-07-24 17:55 UTC (permalink / raw) To: emacs-orgmode Christian Moe <mail@christianmoe.com> writes: > Jarmo Hurri writes: >> Does anyone have any idea of how to scale an SVG figure produced by Org >> (Asymptote)? The exported HTML is >> >> <div class="figure"> >> <p><object type="image/svg+xml" data="pisteita-koordinaatistossa.svg" > >> Sorry, your browser does not support SVG.</object> >> </p> >> </div> > > You can scale the SVG by scaling the <object> element's container, > i.e. the <div> with class "figure". Setting attributes on the image > link with #+attr_html as usual should work, because they are passed to > the figure container rather than to the <object>. > > Either: > > #+attr_html: :width 200px > [[path/to/image.svg]] > > > or: > > #+html_head_extra: <style>#svgfig {width: 200px; }</style> > > #+attr_html: :id svgfig > [[path/to/image.svg]] > > For this to work, the SVG needs to be written to be scalable (with > viewport set etc.). (Also addressed this in the other thread; also here for completeness.) But this means scaling on a file-by-file basis, which is very inconvenient for any larger projects. Jarmo ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Scaling HTML-exported SVG 2016-07-24 17:55 ` Jarmo Hurri @ 2016-07-24 18:48 ` Jarmo Hurri 2016-07-24 21:26 ` Christian Moe 0 siblings, 1 reply; 5+ messages in thread From: Jarmo Hurri @ 2016-07-24 18:48 UTC (permalink / raw) To: emacs-orgmode Jarmo Hurri <jarmo.hurri@iki.fi> writes: > Christian Moe <mail@christianmoe.com> writes: >> #+html_head_extra: <style>#svgfig {width: 200px; }</style> >> >> #+attr_html: :id svgfig >> [[path/to/image.svg]] >> >> For this to work, the SVG needs to be written to be scalable (with >> viewport set etc.). > > (Also addressed this in the other thread; also here for completeness.) > > But this means scaling on a file-by-file basis, which is very > inconvenient for any larger projects. Did some tests. The method you suggested above - setting id - works (all tests done in Chrome). 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. 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"> 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. Jarmo ^ permalink raw reply [flat|nested] 5+ messages in thread
* Re: Scaling HTML-exported SVG 2016-07-24 18:48 ` Jarmo Hurri @ 2016-07-24 21:26 ` Christian Moe 0 siblings, 0 replies; 5+ messages in thread From: Christian Moe @ 2016-07-24 21:26 UTC (permalink / raw) To: Jarmo Hurri; +Cc: emacs-orgmode 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 ^ permalink raw reply [flat|nested] 5+ messages in thread
end of thread, other threads:[~2016-07-24 21:26 UTC | newest] Thread overview: 5+ messages (download: mbox.gz / follow: Atom feed) -- links below jump to the message on this page -- 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
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).