An Issue about a SVG wrapper

[RbnJrg]

Hi friends;

I have an image of 1200px (height) x 800px (width) that I want to use as a cover for a .kf8 book. In Kindle, that image is resized as 800 x 533 and like the Kindle screen is 800 x 600, then the cover appears with two white stripes on the sides. I thought to fix that issue by using the image in a SVG wrapper. Since the title (of the book/cover) is in the top/center, in "preserveAspectRatio" I used "xMidYMin slice" with the following code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin slice" version="1.1" viewBox="0 0 800 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
       <image height="1200" width="800" xlink:href="../Images/Cover.jpg"></image>
    </svg>
</div>

In Sigil (I always made my books as epub in Sigil and then I convert them by using Kindlegen) works fine but when I open the kf8 book in Kindle, the cover still has the two white stripes on the sides.

It seems that Kindle doesn't support the SVG wrapper; can anyone of you tell me if has the same problem as me or if I'm doing something wrong?

Thank you very much in advance.
Rubén

[susan_cassidy]

.mobi doesn't support svg.

[RbnJrg]

Originally Posted by susan_cassidy

.mobi doesn't support svg.

Hi Susan, thanks for answering. When you say .mobi, do you mean .kf8 (.azw3) books? Because according to the Kindle Publishing guidelines, point 3.6.10, it seems that .azw3 supports SVG wrappers.

[Doitsu]

Originally Posted by RbnJrg

It seems that Kindle doesn't support the SVG wrapper; can anyone of you tell me if has the same problem as me or if I'm doing something wrong?

It seems that KindleGen doesn't support html title pages at all. Each time I convert an ePub that has one, KindleGen displays the the following message:

Info(prcgen):I1052: Kindle support cover images but does not support cover HTML. Hence using the cover image specified and suppressing cover HTML in content.

I usually ignore it, because I rmanually resize my covers to 600 x 800 before I add them to the epub.

Do you get the same message?

[susan_cassidy]

I don't know about kf8. Just .mobi. I don't know if the .mobi part of a .kf8 file would support the svg cover. I understand that a full kf8 file has a .mobi part and a kf8 part, for readers that can't support kf8 format.

[RbnJrg]

Originally Posted by Doitsu

It seems that KindleGen doesn't support html title pages at all. Each time I convert an ePub that has one, KindleGen displays the the following message:

Info(prcgen):I1052: Kindle support cover images but does not support cover HTML. Hence using the cover image specified and suppressing cover HTML in content.

I usually ignore it, because I rmanually resize my covers to 600 x 800 before I add them to the epub.

Do you get the same message?

Hi Doitsu;

I got the following message:

advertencia(inputpreprocessor):W29008: Etiqueta rechazada por uso no adecuado: </image> en el archivo: E:\Tempmbp_7DD_6_6_14_36_D_DA_63C_A8C_1\OEBPS\Text \Portada.html línea: 0000014

It's in spanish but it says that the </image> tag is rejected by improper use. The number of the warning is W29008.

So, what will be the proper use of the <image>...</image> tag?

[RbnJrg]

Originally Posted by susan_cassidy

I don't know about kf8. Just .mobi. I don't know if the .mobi part of a .kf8 file would support the svg cover. I understand that a full kf8 file has a .mobi part and a kf8 part, for readers that can't support kf8 format.

Hi Susan;

I'm building a mobi book for K4NT that supports .kf8. It's as you say, kindelgen generates a mobi file that contains both a version for older Kindle models (a mobi7 book) and new ones (a mobi8 books). According to the Kindle Publishing guidelines, mobi8 books can support svg wrapper.

[GMcG]

My understanding is, that preserveAspectRatio means, that the proportions of the picture shall be kept the same even on a smaller display.
Your original image with 1200 x 800 has an aspect ratio of 3 : 2.
The kindle has a display with 800 x 600, which is 4 : 3.
So the picture is shown correctly with 800 x 533 (3 : 2). Without those white stripes at the sides (height=100% and width=100%) you would get a distortion and not a preserved aspect ratio. So it is either height=100% or width=100% if the display has different proportions. You don't get both.
If you can risk the distortion try it without wrapper but with height=100%, width=100% in the img tag.

George

Edit: There is no closing tag for <image> like it is with <p>.....</p> or <h1>.....</h1>.
Delete </image>.

[neufsix]

RbnJrg,

The proper user of the <image> tag is <image />.

Here is what I used :

<image height="901" width="552" xlink:href="../images/u_reves.png" />

[neufsix]

Here is the full file

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title></title>

<style type="text/css">
</style>
<meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center;">

 <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 850" width="100%">
      <image height="850" width="573" xlink:href="../images/v_execution.png" />
    </svg>
 </div>
</body>
</html>

[RbnJrg]

Originally Posted by GMcG

My understanding is, that preserveAspectRatio means, that the proportions of the picture shall be kept the same even on a smaller display.
Your original image with 1200 x 800 has an aspect ratio of 3 : 2.
The kindle has a display with 800 x 600, which is 4 : 3.
So the picture is shown correctly with 800 x 533 (3 : 2). Without those white stripes at the sides (height=100% and width=100%) you would get a distortion and not a preserved aspect ratio. So it is either height=100% or width=100% if the display has different proportions. You don't get both.
If you can risk the distortion try it without wrapper but with height=100%, width=100% in the img tag.

George

Edit: There is no closing tag for <image> like it is with <p>.....</p> or <h1>.....</h1>.
Delete </image>.

Hi George;

The fact to use a SVG wrapper is in order that an image, no matter its size, is able to occupy a full screen, no matter its size -without distortion- since in this case, I'm using in "preserveAspectRatio" the value "slice". Of course, since the aspect ratio is preserved, then just only one part of the full image is showed, in this case, the "xMid-yMin" part of it. If you do the try of using a SVG wrapper in Sigil, you'll see how the image changes its size to fill the entire "ViewBook" area no matter the size of this last one. If you, manually, change the size of the ViewBook area, also will change the size of the image, without distortion, to occupy the full area. In this case, it seems that this feature is not supported in the .azw3 format

[RbnJrg]

Originally Posted by neufsix

Here is the full file

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<head>
<title></title>

<style type="text/css">
</style>
<meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center;">

 <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 573 850" width="100%">
      <image height="850" width="573" xlink:href="../images/v_execution.png" />
    </svg>
 </div>
</body>
</html>

Hi neufsix;

You are right; the proper use of the <image> tag is <image />. It's Tidy that erroneously reforms my code, changing <image /> in <image></image>. What is surprising is that by using <image>...</image> the book passed the test of FligthCrew. By using the <image /> tag, now Kindlegen doesn't show the warning message, but still the cover continues to show the two white stripes on the sides This thing is driving me crazy Many thanks for your answer.

Rubén

[DaleDe]

Originally Posted by RbnJrg

Hi neufsix;

You are right; the proper use of the <image> tag is <image />. It's Tidy that erroneously reforms my code, changing <image /> in <image></image>. What is surprising is that by using <image>...</image> the book passed the test of FligthCrew. By using the <image /> tag, now Kindlegen doesn't show the warning message, but still the cover continues to show the two white stripes on the sides This thing is driving me crazy Many thanks for your answer.

Rubén

You cannot achieve locking the aspect ratio and avoid while lines on the sides or else on the top at the same time unless the image you make has the correct aspect ratio to begin with. It you want to avoid while lines remade the source image itself so it is correct for the target device. It either this or allow the image to be distorted. There is no other option.

Dale

[RbnJrg]

Originally Posted by DaleDe

You cannot achieve locking the aspect ratio and avoid while lines on the sides or else on the top at the same time unless the image you make has the correct aspect ratio to begin with. It you want to avoid while lines remade the source image itself so it is correct for the target device. It either this or allow the image to be distorted. There is no other option.

Dale

Hi Dale;

You can achieve locking the aspect ratio and avoid white lines on the sides That is because in "preserveAspectRatio" I use the value "slice" and not "meet". As I said in a previous post, since the aspect ratio is preserved, then just only one part of the full image is showed, in this case, the "xMid-yMin" part of it (because is what I chosen); the larger the screen, the larger the portion of the image shown. I attach a book with a cover of 520 x 850 pixels; that cover is inside a SVG wrapper that in ADE works perfectly. While you resize the ADE GUI, automatically the cover is resized so the image fills the entire ADE window and no distortion. I want to reproduce this behavior in K4NT (and I can't )

Regards
Rubén

[JSWolf]

That behavior sounds dreadful. The best thing to do is to make the image fit the screen with the correct aspect ratio and not some small piece of the image.