[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]
Subject: Re: [docbook-apps] SVG Image Size
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#SvgHtmlIf 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 firstname.lastname@example.org----- Original Message ----- From: "Giuseppe Greco" <email@example.com>
To: <firstname.lastname@example.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 email@example.com <mailto:firstname.lastname@example.org> - www.agamura.com --------------------------------------------------------------------- To unsubscribe, e-mail: email@example.com For additional commands, e-mail: firstname.lastname@example.org