How to make SVG scale properly vertically?

[SBT]

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]

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]

The SVG is cropped properly in Chromium. In the readers, anny alteration to top/bottom margins is simply ignored.

[frostschutz]

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]

Try it in an <img> tag...

[SBT]

Thanks, Toxaris, that did the trick!
You who are so knowledgeable in all things concerning standards, how long has this been legal?

[Toxaris]

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]

Well, I have checked and I can say the following.

This 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 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]

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]

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]

Originally Posted by FunkeXMix

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.