View Full Version : How to make SVG scale properly vertically?


SBT
03-29-2012, 05:26 AM
I have some standard decorations in SVG I wish to include in an epub. I load them as an <OBJECT> inside a <DIV>, and scale the <DIV> with eg. width="50%".
In Chrome the width and height are scaled properly; in ADE and Calibre viewer the width (& aspect ratio) is OK, but there is a lot of vertical padding. Anybody know how to get rid of it?

the xhtml code is:
<div style="width:50%">
<object data="svg/doodle.svg" type="image/svg+xml" ></object>
</div>
The svg file headers are:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="40 70 290 90">
<path id="....

frostschutz
03-29-2012, 06:26 AM
if you add a 1px border to the div... is the padding inside or outside? maybe it just needs some margins set to 0

the svg itself is cropped properly?

SBT
03-29-2012, 07:59 AM
The SVG is cropped properly in Chromium. In the readers, anny alteration to top/bottom margins is simply ignored.

frostschutz
03-29-2012, 08:03 AM
Hm, and just for the sake of trying, does it look different with embed src= instead of object data=?

And without the div, using width directly on the object / embed tag?

Toxaris
03-29-2012, 03:32 PM
Try it in an <img> tag...

SBT
03-29-2012, 04:20 PM
Thanks, Toxaris, that did the trick!
You who are so knowledgeable in all things concerning standards, how long has this been legal?

Toxaris
03-30-2012, 03:19 AM
No idea to be honest. I recently tried out various methods of embedding SVG to an ePUB and got nowhere with the <object>. Then I tried something which I hadn't used before. I used the image handler of Sigil to insert the image. I figured that since Sigil sees the SVG file as image, maybe I could try that. To my surprise I saw it wrapped in <img> tags and it worked.
I always meant to check whether it was according to the standard/specifications but did not get around to it. I will do now.

Word of warning though. I haven't checked if it works on my reader yet.

Toxaris
03-30-2012, 03:34 AM
Well, I have checked and I can say the following.

This (http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML) W3 link describes how you can embed an SVG in HTML tags. You have a few methods (remember, this is standard HTML!)
- <embed> (e.g. <embed id="E" src="myfile.svg"/>)
- <frame> and <iframe>
- <object> (is not recommended except for non-HTML content)
- <img> (not all browsers support this)
- inline, but we already know that.

Next step is the IDPF standards. I used the ePUB2 specs (http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section2.5) for this.
A reader must support SVG 1.1, with the exception of animated and scripting features.
- inline must be supported, when the vocabulary is XHTML
- <img>
- <object>
- via CSS with the image URI as parameter

In short, it is both supported by W3 and the IDPF. If the readers support it, that is something else...

Keroberos
03-30-2012, 09:09 AM
I've been been using SVG files in <img> tags for a bit now, displays fine on my nook and in ADE and Sony Reader for PC (all ADE based) and even works in KF8 mobi files converted with KindleGen.

FunkeXMix
12-21-2012, 02:40 PM
iBooks store asses guide states the following: To ensure proper viewing of images in content, use the HTML img tag instead of wrapping images in
svg:img. I am not sure what the ramifications of this is though.

dgatwood
12-22-2012, 02:00 PM
iBooks store asses guide states the following: To ensure proper viewing of images in content, use the HTML img tag instead of wrapping images in
svg:img. I am not sure what the ramifications of this is though.

The biggest ramification is that text within the image is not searchable, whereas with the <object> tag, the <svg> tag, etc., it is.

If you have any text in your SVG images, I'd be wary of using the <img> tag, if only because of the accessibility hit. I've filed a bug against the asset guide urging them to reword that and to provide a better recommendation for how to embed SVG.