SVG wrapper not read by iBooks and Sony

[eggheadbooks1]

I did a book for a friend; the book has photos, but they're not the best quality, so I put them in SVG wrappers to prevent upsampling. The wrapper is the standard fare:

<div class="Image">
 	<svg xmlns="http://www.w3.org/2000/svg" style="max-width:720px; max-height:960px" width="75%" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 720 960" > <image alt="" width="720" height="960" xlink:href="../Images/cover.jpg"></image>
	 </svg>
</div>

Everything works fine and looks great in ADE, Kobo, Aldiko, Nook for PC. But when viewed on my friend's Mac in iBooks, the pictures are all cut off (only about 25% displays). He has also heard from a friend who bought his book that text is overlapping the pictures in his Sony reader.

I have heard that some devices have issues with SVG wrappers, but I'm stumped about iBooks.

I'm not sure if this is part of the issue, but when I code the books as such in Sigil for PC, the SVG wrapper remains as is. But when opened/saved in Sigil for Mac, the style is removed and turned into this and added to the header code:

<style type="text/css">
svg.sgc-1 {max-height:960px; max-width:720px}
</style>

Any ideas anyone?

[odedta]

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 720 960" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image height="100%" width="100%" xlink:href="../Images/cover.jpg"></image>
</svg>

Maybe this helps?

[eggheadbooks1]

Will try that and send a new file to my friend and have him check it on his Mac. Will report back once I have a response.
Thanks!

[eggheadbooks1]

Sorry, spoke too soon. I have read that "none" as an aspect ratio causes problems. Also, I don't want the image to fill the screen, so 100% is not correct; I want the 75% and I need the max height and width values to prevent upsampling. But more importantly, what is the reason for repeating the 100% in height and width values in both the svg xmlns and the image code? I don't understand.

[eggheadbooks1]

I think I understand your code - the 100% in image is not the container but the image size; but in any case I tried the code and it doesn't work in ADE or my other devices - the images are distorted. I need something that will work in both my ePub devices and iBooks.

BTW, I got a closer look at what is happening in iBooks and the pictures are displaying but are running over two screens if the image doesn't fit.

Any other suggestions welcome.

[odedta]

Perhaps this thread will help.

[eggheadbooks1]

Alas, the thread has not provided a solution. When I tried your code the result in iBooks (on my friend's Mac) was identical to the original code: the pictures are split over screens instead of shrunk to fit. I think this is a bug with the iBooks app.

In ADE, the new code results in distorted images. In Sigil, the images disappear from the screen though they do appear in the book when viewed in ADE.

We tried the original book on his son's newer model Sony Reader and the pictures are fine. So it seems to be a case of an older model Sony and a buggy Apple app. Since the images work well on everything else that we tested, we've decided to leave it alone. It's a bit like complaining that your old DVD player doesn't play BlueRay: suck it up and buy a new DVD player then. As for Apple, they're always contrary and there isn't much one can do about that.

Thank you for your suggestions, though. The help was appreciated and it gave me something to work with.

[odedta]

Well, it seems like you're still stuck, how about upload the epub or an image that's causing your problems and i'll try to fix it?

[mrmikel]

The idea that a reader should ditch their serviceable but older Apple product for a mere $500US for one that will read your content doesn't seem practical. Even at $150 or so it doesn't.

They are doing you a favor by reading what you create, not the other way around.

[eggheadbooks1]

Mrmikel: it's Apple iBooks app, not a device. The device in question is an older Sony Reader. And one cannot code for everything; it's become impossible. It's the nature of the technological beast: the speed of change and the vagaries of device programming mean that even what is considered "standard" code is not read equally across devices. In this case, the code works on everything we tested except someone with an old Sony Reader sees the text overlaying the image. There's nothing I can do about it: if I fix that problem for a minority user set, I create a new one for the majority of users. And once someone decides to go digital, they have to accept that, as with all things digital, obsolescence is their problem; they cannot get angry at content creators because the content doesn't display on an older device.

odeta: thanks for the offer. The problem is merely that the standard SVG code that I used to control the image size (particularly to prevent upsizing in high-resolution devices -- the images are a mere 960 x 720 pixels) has this problem on iBooks and this old Sony Reader. That's the only negative feedback I've had on this SVG wrapper. As noted, iBooks seems to have a problem with SVG wrappers period; the only way to get the image to shrink to fit in iBooks is to take it out of the wrapper. I have another idea, which is to put the max-height and -width in the CSS, and see if I can control the upsizing by using just a Div instead of SVG. I tried a version of that yesterday with no success, but I have another idea today. If it works I will report back.

[odedta]

Alright, waiting for your report.

I also remembered about a conversation we had a week ago or so, maybe that will help.

[eggheadbooks1]

Hi odeta:

I'm at a loss. to reiterate the quandary: I want to specify image height to avoid images getting cut off in devices that do not automatically shrink to fit, AND avoid upsampling in high-res devices. The SVG wrapper solved both issues. BUT as this thread indicates, the wrapper is not read uniformly across iBooks or some older ePub readers. So the challenge is to achieve the same thing without SVG.

My image div sets the page alignment and adds a bottom margin:

 div.Image
	{text-align:center;
	margin-bottom:1em;}

To which I added an image class to limit the image size (I made it really small to make it easier to test on a laptop):

.image1
	{max-height:500px;
	 max-width:375px;}

I have created image classes in the past to control image size and they have worked, so I'm perplexed why this does not:

<div class="Image"><img alt="0425" class="image1" height="75%" src="../Images/0425.jpg" /></div>

What is happening is that if I leave in the height="75%", that works but the max-dimensions of the image class are ignored. If I take out the height="75%", the max dimensions of the image class are respected but now the images are cut off if they exceed screen dimensions because the height="75%" is gone.

If I try to add that value to the image class:

.image1
	{height:75%;
         max-height:500px;
	 max-width:375px;}

the max-height is not respected: ADE stretches the image to 75% and ignores the max-height AND the image ends up distorted. I tried adding "width:auto;" but no change. I tried adding "preserveAspectRatio:none;" but no change. I tried adding "preserveAspectRatio:xMidYMidmeet;" but no change.

I tried just making everything a style override:

<div class="Image"><img alt="0425" style="height:75%; max-height:250px; max-width:188px" src="../Images/0425.jpg" /></div>

but the results are the same: images are stretched.

I tried:

<div class="Image"><img alt="0425" height="75%" style="max-height:250px; max-width:188px" src="../Images/0425.jpg" /></div>

but the results are the same: images are stretched.

If you have a magic code to solve this dilemma, I would love to hear of it. I'm batting zero.

[odedta]

Did you try the solution I offered verydeepwater on that thread?

Create a paragraph or a div with class image as such:

<p class="image"><img src="../Images/image3.jpg" alt="" /></p>

Add this new rule to your CSS file:

.image {
max-width: 99%;
max-height: 99%;
padding:0;
margin:0;
}

As far as I know, this works perfect. Did you try working with percentage rather than pixels? If the aspect ratio get screwed you can remove the CSS rule:

max-height: 99%;

Or this? https://www.mobileread.com/forums/sho...93&postcount=9 (without the page-break rule)

[Zora]

I edit in Oxygen, an XML editor (lets me work inside the zipped epub folder). It flags this code as incorrect:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd'>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../styles/style001.css" type="text/css" />
<title>Chords</title>
</head>

<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 581" preserveAspectRatio="xMidYMid meet">
<image width="400" height="581" xlink:href="../images/chords_cover.jpeg" />
</svg>
</body>
</html>

Oxygen wants me to define image and svg. However, this code seems to work in all ereaders except the iPad. I am wondering if fixing the definition problem, so that the code passes muster with Oxygen, will also fix the iPad problem.

Please, Obi Wan Kenobi, you're my only hope.

[eggheadbooks1]

Odedta:

The suggested code doesn't stop the images from being cut off in ADE. The only way I've been able to prevent that is to include the height percentage inside the image code directly:

<div class="Image"><img alt="0425" height="75%" src="../Images/0425.jpg" /></div>

or indirectly via an image class:

<div class="Image"><img alt="0425" class="image1" style="max-height:250px; max-width:188px" src="../Images/0425.jpg" /></div>

where "image1" has the percentage specified. Putting the percentage in the opening div class isn't being read by ADE. Don't know why.

Also, I don't see how your code would prevent upscaling in high-res devices. If the max-height or width is set to 99%, then that would be 99% of the screen, correct? A 960-pixel image would then be upscaled to about 2000 pixels in an iPad.