![]() |
#1 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
How to replace PNG images by SVG in epub?
I have been trying to substitute SVG images for PNG images in an epub off and on for three years (mostly off) with vey little (basically none) success. From time to time I learn or think of something to try, but I am now at the end of my rope.
The Creative Commons licensed book "Pro Git" by Scott Chacon has PNG illustrations, some of which are screen shots and many of which are line art diagrams with text. Naturally enough for an open source book about git, the source materials are in a git repository https://github.com/progit/progit (a second edition has since been published). This is all fine, but the diagrams are tiny on high resolution screens. Iearned that the source for the diagrams is in dia format and get rendered into PNG. It turns out that dia can be rendered as SVG. So I unzipped the epub, deleted the diagram pngs, generated the svgs, change the <img src= in the html to refer to the svg files, and the media-type="image/png" to media-type="image/svg" in content.opf. (I've recently learned that it should have been media-type="image/svg+xml".) The rezipped and renamed epub worked great in FBreader in desktop linux but not in any dedicated reader or android tablet. The book text and screenshot PNGs would render, but the SVG diagrams would be completely absent or a small empty rectangle, depending on which reader application. This inspired my question here 3 years ago. https://www.mobileread.com/forums/sh...d.php?t=242208 I had hoped that media-type="image/svg+xml" would be the magic cure, but all that did was get the built in "Reader" app on the NookHD. FBreader in Debian linux continued to work, but Android FBreader and Cool Reader continued to fail. I shouldn't really write fail since the epub itself fails epubcheck, but with puzzling error messages. Epubcheck Version 3.0 said: ERROR: progit-svg-xml-img.epub: I/O error reading 18333fig0101-tn.svg: Connection timed out ERROR: progit-svg-xml-img.epub: I/O error reading 18333fig0102-tn.svg: Connection timed out and so on... Epubcheck Version 4.0.2 said: Validating using EPUB version 2.0.1 rules. FATAL(PKG-008): progit-svg-xml-img-auto.epub/18333fig0101-tn.svg(-1,-1): Unable to read file '18333fig0101-tn.svg'. FATAL(PKG-008): progit-svg-xml-img-auto.epub/18333fig0102-tn.svg(-1,-1): Unable to read file '18333fig0102-tn.svg'. So I am stumped and asking for help here. My modified epub with SVG and original epub with all PNG attached. Thanks for any help. |
![]() |
![]() |
![]() |
#2 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,663
Karma: 85000003
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
I don't know if this relates to your problem, but EPUB calls for SVG version 1.1 and you appear to have version 1.0 in your file.
Added: I ran your file though EPUBCHECK 4.0.2 and received the following errors: Spoiler:
It looks like something went wrong in the file progit_split_053.html. There is content like: Code:
<img width="100%" height="auto" src="18333fig0702-tn.svg" alt="Figure 7-2. The " smudge="" filter="" is="" run="" on="" checkout.="" title="Figure 7-2. The " class="calibre6"/> Last edited by jhowell; 07-01-2017 at 07:06 PM. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
|
![]() |
![]() |
![]() |
#4 | ||
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
Quote:
(but did not attempt to quote smudge). I think I've also fixed the problems related to PNG cover image, and the weird substitution of UUIDs for navpoint ids in the TOC. I don't know if these changes fixed the epubcheck-4.0.2 complaints because it takes over an hour to get past all the "Unable to read file" errors. (It must spend a long time trying each svg file.) In case this might be a linux openJDK thing, I put epubcheck-4.0.2 on a server running solaris with java 1.8.0_45 which is grinding just as slowly with the same "Unable to read file" errors. Android epub readers, except "Reader" on NookHD, still do not render the SVG figures. FBreader on linux desktop continues to work. I haven't rechecked Onyx M92, but assume that still does not work. New version with SVG 1.1 figures and above other fixes attached to this message. Added: Well, it actually took 169 minutes for epubcheck to run, and the last thing it had to say was that I missed the cover image being referred to as jpg in titlepage.xhtml I've fixed that and will try to replace the epub attached to this message. But of course that does not fix the failure of most epub reading apps to render the SVG figures. I hope the epub is now in good enough shape for epub experts to figure out what is going wrong. Sorry for my mistakes. Last edited by j.p.s; 07-02-2017 at 07:18 PM. Reason: Add info regarding errors and replace epub upload |
||
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,663
Karma: 85000003
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
If you haven't already, you may want to check out http://epubtest.org/. They have the results of testing support for EPUB features on a variety of apps and platforms. Their tables show a number of SVG features as not supported in various apps/devices. (I am familiar with Kindles and I know that they only handle a subset of SVG and only in one of the several formats (KF8) that Amazon uses for e-books.)
I tried your new EPUB with EPUBCHECK on my Windows system and while it does take 20 minutes to complete it does not give me the I/O error you experience. I suspect a problem with your setup. There was only one error: Code:
Validating using EPUB version 2.0.1 rules. ERROR(RSC-007): progit-svg11-xml-img-auto.epub/titlepage.xhtml(14,69): Referenced resource could not be found in the EPUB. Last edited by jhowell; 07-02-2017 at 10:29 PM. |
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,702
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
I have not tested the latest posted version it other than with ADE on my laptop, but I do think that some of the images are going to be problematical in reading the text on hi-res eInk devices. eInk works differently then LCD and while you can see low resolution images clearer on LCD, with eInk, you can't. You need high enough resolution images to be able to see them well enough.
|
![]() |
![]() |
![]() |
#7 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
The PNG images are outside the scope of this thread. |
|
![]() |
![]() |
![]() |
#8 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,702
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
But, it depends on how large you specified the SVG to be. Not everyone can edit the eBook to change that.
|
![]() |
![]() |
![]() |
#9 | ||
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
The SVG figures in the progit book only use rectangle, path, and text. Quote:
Do any of the SVG figures in my latest upload render at all in any epub reader you have now that it passes epubcheck? |
||
![]() |
![]() |
![]() |
#10 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
How to best specify the size is exactly what I would like to know, but that is not any good if the figure is not drawn at all. Did ADE draw any of the figures? |
|
![]() |
![]() |
![]() |
#11 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,702
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
ADE did draw the figures no problem. The thing to do is to not specify size in anything like cm or px. Use a % of the container (i.e., screen). The thing to do is make the figure 100% of the width of the screen. So you get the image as large as possible.
|
![]() |
![]() |
![]() |
#12 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
Also, my SVGs are specified in cm, but are referenced in the HTML like: Code:
<p class="calibre3"><img width="100%" height="auto" src="18333fig0101-tn.svg" alt="Figure 1-1. Local version control diagram." title="Figure 1-1. Local version control diagram." class="calibre6"/></p> |
|
![]() |
![]() |
![]() |
#13 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,702
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
I'll give it a go on my H2O sometime later today and let you know about the figures. |
|
![]() |
![]() |
![]() |
#14 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 6,663
Karma: 85000003
Join Date: Nov 2011
Location: Charlottesville, VA
Device: Kindles
|
I do not use EPUB readers, I use Kindles. As an experiment I converted your revised book using kindlegen and loaded it on an e-ink Kindle running the latest firmware version, 5.8.9.2. The SVG images displayed, but the text was a bit small for my eyes. Kindles have the ability to magnify images, but when I tried that with the SVG images they did not display correctly.
|
![]() |
![]() |
![]() |
#15 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,418
Karma: 99236514
Join Date: Apr 2011
Device: pb360
|
Quote:
It looks to me like a single file html file is generated and calibre is used to make epub and mobi. pdf is generated separately. |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Multiple JPG images in SVG on single epub page | dbb1480 | Sigil | 7 | 05-20-2016 09:57 AM |
Convert SVG to PNG/JPEG in ePUB files | bunglegrind | Conversion | 2 | 04-24-2016 05:01 PM |
convert ODT with multiples svg to epub double the images | reup | Conversion | 8 | 01-27-2016 03:39 AM |
Conversion from xhtml to epub loose svg images | pwessel | Conversion | 3 | 05-24-2015 11:29 PM |
PNG Images in ePUB Files not rendered on Kobo | DragonflyKing | ePub | 12 | 10-12-2013 08:28 PM |