Re: [docbook-apps] SVG Image Size

["Bob Stayton" <bobs@sagehill.net>]

Hi,
Image sizing in HTML output can be tricky, and SVG makes it trickier.

You cannot specify in HTML a width="6in" and expect to get a 6 inch wide image.   The 
main reason is that "in" is not accepted as a unit, so this would be interpreted by a 
browser as 6 pixels, which is very small.  In any case, to get an actual 6 inches on 
your screen, the system would need to know your screen resolution in pixels per inch, 
which varies.

So the DocBook HTML stylesheet converts the 6in to pixels, by multiplying it by the 
value of the param named 'pixels.per.inch', which is set to 90 by default.  When I 
process your sample, I get a width="540" on the output.  Is that what you get?

Even then, I see two different sizes when I view the image in IE8 and Firefox 3.6. 
That probably has to do with how the different browsers handle the <object> element 
that contains the svg image, as well as the intrinsic size of the SVG image itself. 
My 6in image is actually smaller than the window size, not larger.

And keep in mind that older browsers don't support SVG in HTML unless they have a 
plugin installed to interpret the SVG.  That means some users might not see the image 
at all.

As a result of these complications, most people with SVG images for PDF output also 
create a PNG image for HTML output, and use two imageobjects in a manner similar to 
your second example, except the html version is PNG.  See this example:

http://www.sagehill.net/docbookxsl/SVGimages.html#SvgHtml

If anyone has succeeded in SVG working in HTML output as well as it does in PDF 
output, I'd like to hear about it.

Bob Stayton
Sagehill Enterprises
bobs@sagehill.net


----- Original Message ----- 
From: "Giuseppe Greco" <giuseppe.greco@agamura.com>
To: <docbook-apps@lists.oasis-open.org>
Sent: Tuesday, January 17, 2012 1:56 PM
Subject: [docbook-apps] SVG Image Size


> Dear all,
>
> I'm evaluating to move to SVG graphics... so I did some testing. It works quite 
> well, if noting else I experienced a problem when setting the image size:
>
> <figure xml:id="figure-game-schema">
> <title>Game Schema</title>
> <mediaobject>
> <imageobject>
> <imagedata align="center" format="SVG" width="6in" 
> fileref="figures/game-schema.svg"/>
> </imageobject>
> </mediaobject>
> </figure>
>
> In FO output, the image is scaled correctly, while in HTML output the image is not 
> scaled at all... it is just cut on the right. I was able to partially solve the 
> problem like this:
>
> <figure xml:id="figure-game-schema">
> <title>Game Schema</title>
> <mediaobject>
> <imageobject role="fo">
> <imagedata align="center" format="SVG" width="6in" 
> fileref="figures/game-schema.svg"/>
> </imageobject>
> <imageobject role="html">
> <imagedata align="center" format="SVG" fileref="figures/game-schema.svg"/>
> </imageobject>
> </mediaobject>
> </figure>
>
> ... but this is not what I'm look for - the image is too large. Any idea?
>
> Any help would be really appreciated,
> j3d
>
> --
>
> *Giuseppe Greco*
> Founder
>
> *Agamura, Inc.
> *6900 Lugano - Switzerland
> Phone +41 (0)91 234 51 09 ● Mobile +41 (0)79 590 33 06 ● Skype giuseppe.greco
> giuseppe.greco@agamura.com <mailto:giuseppe.greco@b-source.ch> - www.agamura.com
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: docbook-apps-unsubscribe@lists.oasis-open.org
> For additional commands, e-mail: docbook-apps-help@lists.oasis-open.org