Forma no svg text as the cover page image, epub3

lumpynose · 05-29-2019, 01:07 AM

I made a simple text svg for my cover image and it displays as expected in the calibre ebook viewer and in Sigil's preview window and in Microsoft Edge (Windows 10 browser).

On the Kobo in the list of books it shows the svg cover as the thumbnail. But when I open the book it shows the box I drew but the text that's inside it doesn't show.

It's an epub3, and I'm using the Kobo Touch Extended driver so it arrives on the Kobo as a kepub.

The book is uploaded here: https://www.mobileread.com/forums/sh....php?p=3849878

Here's the cover page:

Code:

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90%" height="90%" viewBox="0 0 700 700" preserveAspectRatio="xMidYMid meet">
    <rect width="100%" height="100%" fill="#f4f4f4" stroke="#111" stroke-width="6"/>
    <text x="110" y="220" font-size="40" font-weight="bold">The Treasure of the Ice</text></svg>
  </div>
</body>

lumpynose · 05-29-2019, 02:14 AM

More weirdness. I left the kobo on that book and plugged in charging and the sleep screen shows the title page of the book you were reading and when it went to sleep it shows the svg text.

Quoth · 05-29-2019, 04:47 AM

What's the advantage of epub3 vs epub2?

What happens if you use epub2 and transfer as epub, not kepub?

davidfor · 05-29-2019, 11:02 AM

Just had a look at this and is seems the text in SVGs are not displayed in kepubs. The first file in a kepub is treated differently to the other files. But, I copied to a second file, and the same thing happened. I don't think I've used text in SVGs before. But, they work fine for images.

For the thumbnail, are you sure it is showing the first page? I would expect it to be the default cover Kobo uses which is just the title and format with two rectangles around them. The reason for this is that for kepubs, Kobo needs an image to be marked as the cover in the OPF. It extracts this and sizes as needed. As there are no images in the book, the default is used. For epubs, the first page is rendered, and that is used as the cover.

lumpynose · 05-29-2019, 03:58 PM

Quote:

Originally Posted by davidfor

For the thumbnail, are you sure it is showing the first page? I would expect it to be the default cover Kobo uses which is just the title and format with two rectangles around them. The reason for this is that for kepubs, Kobo needs an image to be marked as the cover in the OPF. It extracts this and sizes as needed. As there are no images in the book, the default is used. For epubs, the first page is rendered, and that is used as the cover.

Yes, it's definitely the cover page it's showing. It's just a single line of text slightly above the middle.

Well if it needs an image marked as the cover in the OPF, as a kludge/workaround maybe I could put the svg in a file, cover.svg, in the Images directory and use that somehow. I don't know if the img tag accepts an .svg for its src.

jackie_w · 05-29-2019, 04:22 PM

Quote:

Originally Posted by lumpynose

I don't know if the img tag accepts an .svg for its src.

In general, you can use .svg files in <img> tags. This should work for both epub and kepub on a Kobo but see Note below. It certainly works for .svg images used as scenebreak ornaments in the main body text.

However, as has already been said, kepubs do treat the cover as a special case, so you'd need to double-check.

Note: This is a reply to a question you didn't ask but may be relevant ... I wouldn't recommend using .svg image files if you intend to read the same epub on a wide variety of Android epub reading apps. Only a few of them support .svg image files.

lumpynose · 05-29-2019, 04:55 PM

Quote:

Originally Posted by jackie_w

In general, you can use .svg files in <img> tags. This should work for both epub and kepub on a Kobo but see Note below. It certainly works for .svg images used as scenebreak ornaments in the main body text.

However, as has already been said, kepubs do treat the cover as a special case, so you'd need to double-check.

Note: This is a reply to a question you didn't ask but may be relevant ... I wouldn't recommend using .svg image files if you intend to read the same epub on a wide variety of Android epub reading apps. Only a few of them support .svg image files.

Well it sort of worked with an img tag using the .svg as its src. The text was in the right place but the box I'd put around it was shrunk down a bunch and was on the left.

So minding your cautionary recommendation about svg image files and android I decided to try another idea I had which is to make the cover image a .gif file. Curiously the grayscale gif was larger than the rgb one and since I'm on this holy grail quest to make the smallest possible epub 3 files I made it an rgb gif. Gifs are better than jpeg when the image is solid colors and I did try also saving it as jpeg; 6K gif, 22K jpeg. The .gif works. I now need to figure out how to position it correctly.

For size, the .svg was a great idea while it lasted; 343 bytes, the .gif is 5,461 bytes.

lumpynose · 05-29-2019, 05:01 PM

Quote:

Originally Posted by FrustratedReader

What's the advantage of epub3 vs epub2?

Ask google; lots of answers.

Quoth · 05-29-2019, 05:21 PM

Quote:

Originally Posted by lumpynose

Ask google; lots of answers.

Lots of noise and idiots.

lumpynose · 05-29-2019, 05:30 PM

Quote:

Originally Posted by FrustratedReader

Lots of noise and idiots.

Try searching for nutrition advice, then it's all noise and idiots.

DaleDe · 05-29-2019, 05:50 PM

Quote:

Originally Posted by FrustratedReader

What's the advantage of epub3 vs epub2?

What happens if you use epub2 and transfer as epub, not kepub?

Check our wiki ePub and ePub 3.

Dale

lumpynose · 05-29-2019, 06:47 PM

Quote:

Originally Posted by DaleDe

Check our wiki ePub and ePub 3.

Dale

Scanning that reminded me of a question I've had; if I have a choice between an OTF or WOFF font does it matter? The last one I remember where I had this option the WOFF was many more bytes in size and I thought WOFF was supposed to be smaller.

DaleDe · 05-29-2019, 07:36 PM

Take a look in our wiki under Fonts.

Dale

lumpynose · 06-04-2019, 10:30 PM

Quote:

Originally Posted by jackie_w

Note: This is a reply to a question you didn't ask but may be relevant ... I wouldn't recommend using .svg image files if you intend to read the same epub on a wide variety of Android epub reading apps. Only a few of them support .svg image files.

And it looks like mildly complicated CSS throws them off as well. The book I'm working on looks good in Adobe Digital Editions on my pc, Windows Edge, Calibre's ebook viewer, Sigil's previewer, and Android Librera.

With Moon+ all of the lines are centered. WTF?

Paragraph indentation is lost with SumatraPDF. But I don't really expect a lot from it since it has PDF in its name.

As for the cover page/image I'm using a PNG since it's smaller than the GIF.

jackie_w · 06-05-2019, 10:02 AM

Quote:

Originally Posted by lumpynose

And it looks like mildly complicated CSS throws them off as well. The book I'm working on looks good in Adobe Digital Editions on my pc, Windows Edge, Calibre's ebook viewer, Sigil's previewer, and Android Librera.

With Moon+ all of the lines are centered.

Moon+ is admirable in many ways but unfortunately not if you're looking for an app which does a good job honouring CSS. I think Moon+ prefers to push its feature of letting you override book CSS with standard settings in Moon+. Some people value that higher than close adherence to standard CSS (not me), particularly some of the 'newer' CSS styles.

I don't use Android Librera, so can't compare, but Pocketbook (by Obreey) is full-featured, free and does a good enough job for me. It has the benefit of having a choice of 2 renderers - one Webkit-based, the other (probably) Adobe-based.

Bookari (aka Mantano) has grown rather stagnant in recent years but it's always done a good job with CSS in EPUB2. It also has an additional EPUB3 reader if you get better results with that.

I haven't tested either for SVG recently but they both used to happily support .svg images. I don't think I've ever tried SVG text with either.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
adding text after svg (not caption) on single page	dbb1480	Sigil	7	06-11-2016 06:00 AM
SVG wrapper image occupies entire page, and shouldn’t	jcsalomon	Kindle Formats	2	06-10-2016 04:05 PM
Using Calibre svg cover wrapper for full-page images	roger64	Editor	8	02-05-2015 09:02 PM
[Tutorial] Convert TEXT to SVG IMAGE with Inkscape	GrannyGrump	Workshop	3	04-22-2014 06:38 AM
g cover image without losing first page of text	fictionaddiction	Conversion	1	07-22-2011 03:27 PM

05-29-2019, 01:07 AM	#1
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	no svg text as the cover page image, epub3 I made a simple text svg for my cover image and it displays as expected in the calibre ebook viewer and in Sigil's preview window and in Microsoft Edge (Windows 10 browser). On the Kobo in the list of books it shows the svg cover as the thumbnail. But when I open the book it shows the box I drew but the text that's inside it doesn't show. It's an epub3, and I'm using the Kobo Touch Extended driver so it arrives on the Kobo as a kepub. The book is uploaded here: https://www.mobileread.com/forums/sh....php?p=3849878 Here's the cover page: Code: <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90%" height="90%" viewBox="0 0 700 700" preserveAspectRatio="xMidYMid meet"> <rect width="100%" height="100%" fill="#f4f4f4" stroke="#111" stroke-width="6"/> <text x="110" y="220" font-size="40" font-weight="bold">The Treasure of the Ice</text></svg> </div> </body>

05-29-2019, 02:14 AM	#2
lumpynose Wizard Posts: 1,086 Karma: 6719822 Join Date: Jul 2012 Device: Palm Pilot M105	More weirdness. I left the kobo on that book and plugged in charging and the sleep screen shows the title page of the book you were reading and when it went to sleep it shows the svg text.

05-29-2019, 04:47 AM	#3
Quoth the rook, bossing Never. Posts: 6,755 Karma: 55804207 Join Date: Jun 2017 Location: Ireland Device: Both Kinds: epub based makes and Kindle	What's the advantage of epub3 vs epub2? What happens if you use epub2 and transfer as epub, not kepub?

05-29-2019, 11:02 AM	#4
davidfor Grand Sorcerer Posts: 24,908 Karma: 47303748 Join Date: Jul 2011 Location: Sydney, Australia Device: Kobo:Touch,Glo, AuraH2O, GloHD,AuraONE, ClaraHD, Libra H2O; tolinoepos	Just had a look at this and is seems the text in SVGs are not displayed in kepubs. The first file in a kepub is treated differently to the other files. But, I copied to a second file, and the same thing happened. I don't think I've used text in SVGs before. But, they work fine for images. For the thumbnail, are you sure it is showing the first page? I would expect it to be the default cover Kobo uses which is just the title and format with two rectangles around them. The reason for this is that for kepubs, Kobo needs an image to be marked as the cover in the OPF. It extracts this and sizes as needed. As there are no images in the book, the default is used. For epubs, the first page is rendered, and that is used as the cover.

05-29-2019, 07:36 PM	#13
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	Take a look in our wiki under Fonts. Dale

Advert

Advert