Adventures & misadventures with SVG

[graycyn]

Bear with me, I'm old and all of this is kind of new to me, but I'm learning!

I have an epub put together, but I wanted, for nostalgia reasons to have a title page graphic that looked like the title page in the actual paper book. And because I sometimes read on a tablet, where I like to set a sepia colored background, I like transparency.

A transparent PNG in an SVG wrapper (to make it fit fullscreen) works fine on my Sony and Kobo e-ink readers. However, NOT SO MUCH in many Android reading apps, where it often results in a BLANK PAGE. Seems the SVG wrapper might be the problem as the apps that do that *will* display a transparent PNG that is *NOT* in an SVG wrapper.

I haven't yet tried just a straight PNG image because I really wanted the image to fill the page, just like the cover does. (Cover is in an SVG wrapper.)

Enter Inkscape. I created a brand new SVG version of my title page graphic using text. It looks great, even better than the PNG I made in Photoshop. I put it inline in my epub. (Yes, I did save it as a plain SVG for the purpose.)

I'm using this code (I'm just putting the first bit here, the rest is the text description of the graphic which goes on and on.)

<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="100%"
 preserveAspectRatio="xMidYMid meet" version="1.1" 
viewBox="0 0 744.09448819 1052.3622047" width="100%"
 xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2">

Everything checks with ePubcheck and FlightCrew through Sigil. I ran my CSS through CSSLint and the W3C validator and that's good too. (except for an error that the adobe-hyphenate property generates)

I tested this on the following reader devices where it works fine:

Sony PRS-350
Sony T1

I tested on my PC and it works fine in:

ADE 2.01
Readium for Chrome (displays properly, but I did get some kind of odd loading circle of dots on that page, but had no trouble just going to the next page)

I tested in the following Android epub reading apps, where again, it works beautifully! And TTS can read it in apps where that's an option, except one.

Aldiko Premium
Bookari Premium
Cool Reader (graphic does not display, but text from tag does.)
Bluefire Reader
FBReader (graphic does not display, but text from tag does.)
Gitden Reader (displayed beautifully but TTS borked.)
Lithium Reader
Kobo
Moonreader+ Pro
Overdrive
Pocketbook
UBReader

The above apps display the text SVG like a graphic. Changing font size has NO EFFECT on the display.

BUT THEN THERE IS A PROBLEM!

In Google Play Books, at a font size of 100%, the display is fine, but changing font size upward causes the display of the graphic to behave like text and causes portions of the text at larger font sizes to run right off the screen or overlap in an ugly fashion! (I normally read at 125% to 138% in that app.)

The font itself also changes as you change fonts in the Play Books app, though this looked fine at sizes of 100% or less and was not detrimental.

In the Nook app, the display is STATIC, i.e. changing font size does NOT change the text, but the text displays somewhat like it looks in Google Play Books at 138% or higher with some text run off the page and other text overlapping. Actual font does NOT change either.

On my Kobo Aura HD, the display is similar to that of Google Play Books, both font size and font are variable, and it looks pretty damn awful there, not remotely like how it displays elsewhere! Even using the same font (Georgia) that the SVG graphic uses did not help the appearance.

So, my question is, is this simply a limitation of support by the reading systems, or is there anything I can do to make it work in the few places it doesn't?

The simple solution for this particular book would be to eliminate the title page graphic entirely. It really doesn't *have* to have it.

But I have other books with illustrated title pages that I absolutely *DO* need to have a graphic title page and I want those books to work on both my e-ink readers AND my Android phone/tablets if possible.

If there is a fix, simple explanations help. Assume I don't know too much. My brain is already exploding over this!


Edited: FWIW, the Android apps that bork (display a blank page) on a transparent PNG in an SVG wrapper are:

Aldiko Premium
Bookari Premium
Bluefire Reader
Overdrive
Pocketbook
UBReader

I guess I could just go with PNG in SVG, but it does bother me that it won't display correctly in some of these apps.

[dgatwood]

You might try tweaking any text within the SVG graphic to use hard-coded absolute font sizes (using unitless values in properties on the elements, rather than CSS).

If that doesn't work (it should), then the next thing to try is vectorizing any text within the SVG, i.e. converting each of the characters to an outline.

[pdurrant]

I think dgatwood's second suggestion is the one to go for - vectorise the text.

[graycyn]

Originally Posted by dgatwood

You might try tweaking any text within the SVG graphic to use hard-coded absolute font sizes (using unitless values in properties on the elements, rather than CSS).

If that doesn't work (it should), then the next thing to try is vectorizing any text within the SVG, i.e. converting each of the characters to an outline.

I looked in the SVG and as far as I could tell, font size was in px but is there a different unit I should use?

By vectorizing text, do you mean I should build a title letter by letter after making an outline of each? That might be more trouble than this is worth! But I'm not sure I understand what you mean either, so maybe I'm wrong about that.

Sent from my Pixel C using Tapatalk

[graycyn]

Originally Posted by pdurrant

I think dgatwood's second suggestion is the one to go for - vectorise the text.

I only just started with Inkscape last week so I'm not quite sure how to do that.

Do you mean export the text as PNG, then import it again and bitmap trace it? Or is there another more elegant way to go about it?

I really would love to make this work, since I like using Bookari as a reader when I read on my tablet. It hyphenates better than Google Play Books.

Also, have a series of my Dad's old childhood books I'd like to do eventually and some of those might even make public domain while I'm alive. Or, perhaps I could get permission from the family.

I'm not expert at the epub end, but I take heart that I can open and read my books in a great many apps and they mostly look quite decent! And in many cases, perform better than some books I've bought!

Sent from my Pixel C using Tapatalk

[pdurrant]

Originally Posted by graycyn

I only just started with Inkscape last week so I'm not quite sure how to do that.

I don't know inkscape at all, but I'd be astonished if there wasn't an option to select some text and convert it to graphical outlines. It should be as simple as selecting the text to be converted and choosing a menu option.

[graycyn]

Originally Posted by pdurrant

I don't know inkscape at all, but I'd be astonished if there wasn't an option to select some text and convert it to graphical outlines. It should be as simple as selecting the text to be converted and choosing a menu option.

I have done some googling and think it is as you say! Probably won't have time to experiment further until after the holidays. Really hope I can work this out! Have come so far from where I started!

Sent from my Pixel C using Tapatalk

[Tex2002ans]

Originally Posted by pdurrant

I don't know inkscape at all, but I'd be astonished if there wasn't an option to select some text and convert it to graphical outlines. It should be as simple as selecting the text to be converted and choosing a menu option.

GrannyGrump wrote a tutorial on that:

https://www.mobileread.com/forums/sho...d.php?t=238029

In Inkscape, it is called "Convert to Path".

[graycyn]

It turned out to be very easy to do and did the trick! Thanks everyone! I'm not sure if I would've thought of that, because I think I was assuming that text was automatically vectorised by the program.

I think it was a setting 'Object to Path' or something like that. No more issues with display, though most apps won't read it aloud now either. (I *do* have title and desc tags in ... some apps that don't like SVG are displaying the text I've entered, so clearly the tags are working.) But that's a simple solve with a half title page.

But otherwise, my book is working in all apps I tested it in with only a few hiccups here and there in particular apps and is also fine on my Kobo reader. I'll check it on the Sony T1 and PRS-350 later, but am not anticipating any issues there.

I'm a very happy camper tonight!



Sent from my Nexus 9 using Tapatalk

[dgatwood]

Of course, the downside is that the text probably isn't searchable when you do that. So if there's another approach that works, you're better off.

BTW, if you can send me a minimal (but complete) sample EPUB that demonstrates the problem, I'd be happy to file a bug against Google Play Books for you; scaling the font size in an SVG image is almost certainly a bug.

[graycyn]

Originally Posted by dgatwood

Of course, the downside is that the text probably isn't searchable when you do that. So if there's another approach that works, you're better off.

BTW, if you can send me a minimal (but complete) sample EPUB that demonstrates the problem, I'd be happy to file a bug against Google Play Books for you; scaling the font size in an SVG image is almost certainly a bug.

The stuff I'm working on is copyrighted, so I can't send that, I'd have to make some kind of a mock up.

Not sure if it's worthwhile. On search, I suspect very few would feel the need to search a book for title/author!

The other issue is that it wasn't *just* Google Play Books that scaled the SVG with text as font size changed, it was also the Nook app and worse, my Kobo Aura HD device that I primarily read on!

Google Play Books has other quirks, it doesn't like the aspect ratio of the average paperback cover at least if you are using a device with a different aspect ratio such as a Nexus 9 or Pixel C! Scan a cover from a paperback and Play Books likes to cut some of the bottom off in spite of putting the image in an SVG wrapper! BUT, if you display this epub in Play Books on a phone, say a Nexus 6p, the cover displays exactly as it should!

So SVG wrapper scaling isn't working quite right in Play Books either, it shouldn't matter what the device's aspect ratio is!

I've more or less decided that if my book is readable, looks decent in ADE and on my reader, and functions reasonably well in a boat load of Android apps, that's got to be good enough. I'd *like* all apps to display my book absolutely identically, but realistically, I know it isn't going to happen.










Sent from my Nexus 9 using Tapatalk