HELP: svg file in Sigil for epub on Kobo

[Turtle91]

Originally Posted by jhowell

My understanding is that the "width" and "height" attributes for an "img" element in HTML 5 only allow an integer value without a unit.

Yup - that knocked the rust off those brain cells. They got rid of the units when using width/height directly in the html tag...the integer is always in px. But all the other units can be used if styled with CSS.

[jhowell]

Originally Posted by Turtle91

I know that was true at one time, but according to the current Image Guidelines they encourage SVG use:
...
Have you seen kindles still having problems in recent testing???

Personally, I would avoid SVG images when publishing on Amazon for Kindle. The main reflowable Kindle formats each handle SVG differently.

MOBI does not support SVG at all, so for the oldest Kindles the images will be missing unless media queries are used to provide a rasterized image fallback.

KF8 handles SVG fairly well as far as I know. There may be limitations due to the KF8 renderer being essentially frozen for the last ten years.

KFX, which is the format most readers will experience, only does so-so with SVG. During conversion to KFX format SVG images are rasterized and converted to JPEG. So the rendering of detail you would expect from SVG is lost. This is especially noticeable in a zoomed-in image. Also, the conversion does not take into account the fonts present in the book so if the SVG image includes text only generic fonts will be used.

[Turtle91]

Interesting - If they are encouraging SVG use with their current guidelines it seems like Amazon has given up supporting their older devices (it's about time!).

Converting SVG to rasterized defeats the whole purpose (as stated in their guide) of zooming in.... lolz

Sounds like Amazon is still having carnal relations with a canine...

[jhowell]

Originally Posted by Turtle91

Interesting - If they are encouraging SVG use with their current guidelines it seems like Amazon has given up supporting their older devices (it's about time!).

They still have an appendix to the publishing guidelines about Media Queries that contains a section on "Using Media Queries for Backward Compatibility with MOBI". That does not mention of SVG but then again it does not mention several other things that work in KF8 but not in MOBI.

If you publish a Kindle book that is not readable in MOBI format and a customer leaves you a bad review or complains to Amazon then that is your own fault.

Originally Posted by Turtle91

Converting SVG to rasterized defeats the whole purpose (as stated in their guide) of zooming in.... lolz

It has worked this way for years now. Perhaps they intend to improve how it works sometime in the future, but I would not bet on it. Amazon is consistently inconsistent.

[Tex2002ans]

Originally Posted by Turtle91

Have you seen kindles still having problems in recent testing???

edit: I did some more looking at the only restriction I found was that they require you to remove any SVG namespace references.

Kindles "support" SVG similar to how the guidelines say they "support" MathML.

The major problem with SVG on Kindles is it forces a page-break before + after every SVG.

They have rendering issues (see jhowell's post above).

And they still require fallbacks for KF7 (although I'm not too sure if Amazon would ding you for that now that they deprecated MOBI earlier this year).

See all the discussion we had in:

• 2018: "SVG and float CSS on Kindle"
• 2019: "(sigh), Kindle/KPF format Blues..."

Originally Posted by jhowell

It has worked this way for years now. Perhaps they intend to improve how it works sometime in the future, but I would not bet on it. Amazon is consistently inconsistent.

And thanks for more detailed info.

In EPUB, SVG always worked well (besides rotten, non-standards compliant readers like Moon+).

But on Kindles, SVGs are (and have always been) a mess.

I would love for them to fix the garbage though, it would help make maths + equations + charts/graphs so much higher quality. (And it's always smart to store the vector originals, so you could swap them in at a future date!)

[philm]

Originally Posted by DNSB

Out of curiosity what firmware version are you using? I copied the epub you generated and renamed it to .kepub.epub. I then copied both of them to my Sage at the same time and they showed up correctly. See attached images for the results.

The partial "e" alone is not the expected result. Please look at my svg, you can extract it from epub with Sigil.

[philm]

Originally Posted by philm

The partial "e" alone is not the expected result. Please look at my svg, you can extract it from epub with Sigil.

Sorry. I didn't look at your pictures correctly.
Software is 4.33.19611 (6/8/22)
I can't find a Firmware number.

[philm]

Thank you everyone for sharing your knowledge, it's really appreciated!

Originally Posted by JSWolf

@philm, try adding the following CSS code to your eBook and see how the SVG works.

img {
  max-height: 100%;
  max-width: 100%;
}

Ok, I updated the Kobo software to the latest version.
With the first small image, I tried with the CSS file content + code in the head section

<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>

, and it didn't work for me. Even the Sigil preview is not showing width at 100%, I guess max-width is for "can't go beyond" and this image is quite small.
I also tried changing CSS content to simply

img {
  width: 100%;
}

without luck. Same result.
I also tried epub 2 without luck.
So far,only kepub.epub displays the svg and width 100% is not showing up.

[RbnJrg]

Hi,

I studied the epub you posted and I think I found the cause of your issue.

First at all, your epub is an epub3, so the only way that it can be correctly displayed on Kobo is as .kepub since .epub is for epub2.

Second, since your svg has text, to be sure that it will be (the text) showed in your device, first you must convert it as "paths". I did so and I built a new epub that you can watch below.

Finally, if you want an epub3, then you must do two things:

1) To use the format .kepub
2) To force the <body> of your .xhtml page (where you are going to include the svg) to have a full height. You can do that with something like:

   <body class="fullHeight">
   <div style="height: 100%">
      <svg ...><image.../></svg>
   </div>

and

.fullHeight {
   height: 99vh;  /* Take into account that this unit of measure is for epub3 */
}

Don't use a height of 100vh because some ereaders can create a blank page after the svg. Use a height of 100% with the <div> that will contain the svg.

Regards
Rubén

[philm]

That is really cool! Thank you Ruben, @RbnJrg!

I don't need to stick to epub3. I though it was more recent, with more features

You're right, text to path fixes everything on Kobo.
Even img with width is working now:

<img width="100%" alt="drawing" src="../Images/drawing2.svg"/>

I wonder if it also work on other e-reader? I only have a Kobo and I use Linux.

[RbnJrg]

Originally Posted by philm

That is really cool! Thank you Ruben, @RbnJrg!

No problem

I don't need to stick to epub3. I though it was more recent, with more features

Indeed, epub3 is more modern and it has many more features than epub2 (in fact, all the epubs I build to me, now are epub3). The "issue" with epub3 is that you only could read it properly in your Kobo as .kepub.

You're right, text to path fixes everything on Kobo.

To convert text to path is an universal way to be sure that the svg will be read for any ereader that supports svg because not all devices supports svg text (for example, Kindle with .kfx).

Even img with width is working now..

SVG wrappers are mainly used with non .svg images and/or as an "imperfect" way of vertical center an image on a page (I say imperfect because it centers on the <div>, not on <body>; to center on body are neccessaries more css properties than the simple svg wrapper). In your case, if your image has not to be center vertically, is a good idea to employ the <img> tag instead of a svg wrapper.

I wonder if it also work on other e-reader? I only have a Kobo and I use Linux.

It will work on any ereader with support for svg (in Cool Reader, for example, it won't work ) The epub I posted (an epub2), it will work even in those ereaders based on ADE Legacy. Below you can watch a new, another epub, this time an epub3. Try to open it in your Kobo, and in the Sigil plugins, Readium, Bibi and EpubJS. Open it also with Calibre. And since you are working in Linux, open the epub on Foliate and Gnome-books. If you want to do more experiments, then open the epub3 in the apps PocketBook, Reasily, Lithium, Overdrive, Gitden Reader (there is not in PlayStore) and Aldiko Next (it must be Aldiko Next, not the Aldiko Classic); all these apps support epub3. After all that work, you'll have a better aproximation to your question

EDIT: before opening the ebook in your Kobo, rename the .epub as .kepub.

[Quoth]

Epub2 if you want widest compatibility with all ereaders, apps, Amazon, Google etc. The epub3 has features for multimedia perhaps best done as an App for iOS and Android that won't work on most eink and most ereader apps and won't be accepted in upload to Amazon for publishing.

There are a few features in epub3 that are OK for novels and may work. But for a straight novel / fiction even with illustrations the epub2 is fine and is preferred upload to Amazon, Smashwords (who send it to Apple, Kobo, Barnes & Noble etc), Google PlayBooks etc.

[KevinH]

Again, I disagree. Epub2 is old, deprecated, and can not work with many languages. Epub3 is the current specification, it can do everything epub2 can, plus more. It can be made backwards compatible for older epub2 only readers. And Epub3 is perfectly accepted at Amazon, works just find with kindlegen, etc. No where does Amazon say in recent documentation that epub2 is preferred that I could find.

So to future proof your work, I strongly recommend epub3 over epub2.

[RbnJrg]

Originally Posted by Quoth

Epub2 if you want widest compatibility with all ereaders, apps, Amazon, Google etc. The epub3 has features for multimedia perhaps best done as an App for iOS and Android that won't work on most eink and most ereader apps and won't be accepted in upload to Amazon for publishing.

Yes, for that reason I said that the ebooks I built only "for me" are epub3. Regrettably, as you claim, most eink devices don't have full support for css3 and then, you can't employ shapes, mathml, grids, etc., etc. But the last Kobo model (Elipsa) seems to have good support for epub3 according to what I have read.

[Turtle91]

“Deprecated” is an extremely strong term… and I would say inaccurate. It is still supported on all devices and apps…. Unless there is an ePub3 only device out there???

I agree that ePub3 (and later) is the future… but I would think ePub2 “backwards compatible" support will last for several decades at least.