03-29-2012, 04:26 AM | #1 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
How to make SVG scale properly vertically?
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: Code:
<div style="width:50%"> <object data="svg/doodle.svg" type="image/svg+xml" ></object> </div> Code:
<?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=".... |
03-29-2012, 05:26 AM | #2 |
Linux User
Posts: 2,279
Karma: 6123806
Join Date: Sep 2010
Location: Heidelberg, Germany
Device: none
|
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? |
Advert | |
|
03-29-2012, 06:59 AM | #3 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
The SVG is cropped properly in Chromium. In the readers, anny alteration to top/bottom margins is simply ignored.
|
03-29-2012, 07:03 AM | #4 |
Linux User
Posts: 2,279
Karma: 6123806
Join Date: Sep 2010
Location: Heidelberg, Germany
Device: none
|
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? |
03-29-2012, 02:32 PM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Try it in an <img> tag...
|
Advert | |
|
03-29-2012, 03:20 PM | #6 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
Thanks, Toxaris, that did the trick!
You who are so knowledgeable in all things concerning standards, how long has this been legal? |
03-30-2012, 02:19 AM | #7 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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. |
03-30-2012, 02:34 AM | #8 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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... |
03-30-2012, 08:09 AM | #9 |
Zealot
Posts: 128
Karma: 238654
Join Date: Aug 2009
Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)
|
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.
|
12-21-2012, 01:40 PM | #10 |
Enthusiast
Posts: 48
Karma: 10
Join Date: Aug 2011
Device: Ipad
|
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. |
12-22-2012, 01:00 PM | #11 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
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. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
How to center an image vertically | GBAV | ePub | 31 | 08-01-2018 01:57 PM |
Seriously thoughtful Scale | GeoffC | Lounge | 8 | 08-02-2011 02:27 PM |
Can you center vertically? | bfollowell | ePub | 10 | 07-07-2011 03:19 AM |
Images flipped vertically when converting from PDF | kataleen | Calibre | 1 | 12-16-2010 02:26 AM |
The scale of the universe | kennyc | Lounge | 16 | 10-27-2010 05:04 AM |