From mboxrd@z Thu Jan 1 00:00:00 1970 From: Christian Moe Subject: Re: Request: change SVG embedding in exported HTML Date: Sun, 24 Jul 2016 18:50:10 +0200 Message-ID: References: <87oa5oqzvr.fsf@iki.fi> <5c2f153b-05ad-c4b5-6384-e3e204a8f201@gmail.com> Mime-Version: 1.0 Content-Type: text/plain Return-path: Received: from eggs.gnu.org ([2001:4830:134:3::10]:34356) by lists.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1bRMbb-0005nH-OQ for emacs-orgmode@gnu.org; Sun, 24 Jul 2016 12:50:20 -0400 Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1bRMbW-0007s6-Mc for emacs-orgmode@gnu.org; Sun, 24 Jul 2016 12:50:19 -0400 Received: from mail2.b1.hitrost.net ([91.185.211.205]:56324) by eggs.gnu.org with esmtp (Exim 4.71) (envelope-from ) id 1bRMbW-0007qd-FS for emacs-orgmode@gnu.org; Sun, 24 Jul 2016 12:50:14 -0400 In-reply-to: <5c2f153b-05ad-c4b5-6384-e3e204a8f201@gmail.com> List-Id: "General discussions about Org-mode." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org Sender: "Emacs-orgmode" To: Scott Randby Cc: Jarmo Hurri , emacs-orgmode@gnu.org I disagree. A switch to 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 in HTML. But you *can* scale SVG with by putting the in a container
and scaling the container width and height. This is actually simple with Org, which natively wraps the in a
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
, and style it with CSS. (2) You can also do other things with that you cannot with , 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, makes the most common task simpler (scaling the graphic), but at the cost of features such as interactive animated graphics, which are possible with 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 tag instead of . > > 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 , but >> size can be controlled when embedded using . >> >> 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: >> >>
>>

>> Sorry, your browser does not support SVG. >>

>>
>> >> 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 >> . For example, the exported code above could be >> >>
>> >>
>> >> 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 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 . See >> >> http://www.w3schools.com/jsref/event_onerror.asp >> >> Jarmo >> >> >>