How to replace PNG images by SVG in epub?

[j.p.s]

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.

[jhowell]

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:

Validating using EPUB version 2.0.1 rules.
ERROR(OPF-029): progit-svg-xml-img-auto.epub(-1,-1): The file 'cover.jpg' does not appear to match the media type image/jpeg, as specified in the OPF file.
WARNING(PKG-022): progit-svg-xml-img-auto.epub/cover.jpg(-1,-1): Wrong file extension for image. The image is a 'png' file but has the file extension 'jpg'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "smudge" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "filter" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "is" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "run" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "on" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "checkout." not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "clean" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "filter" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "is" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "run" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "when" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "files" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "are" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "staged." not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(14,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(20,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(38,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(56,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(62,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
WARNING(OPF-003): progit-svg-xml-img-auto.epub(-1,-1): Item 'iTunesMetadata.plist' exists in the EPUB, but is not declared in the OPF manifest.

It looks like something went wrong in the file progit_split_053.html. There is content like:

<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"/>

[j.p.s]

Originally Posted by jhowell

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.

It seems plausible that could be contributing to the problem. I hope they had a good reason to exclude earlier versions.

Thanks!

[j.p.s]

Originally Posted by jhowell

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.

I couldn't find a dia exporter with an option to select an SVG ouput version, and the w3c SVG validator didn't like the DTD in the SVG 1.0 files either. I edited the SVG version to 1.1 and changed the DTD to match the w3c SVG 1.1 DTG and every browser I tried rendered the figures at least as well as when they were labeled SVD 1.0, so I made a tip-toe of faith and checked a dozen or so against the w3c validator. All of them passed.

Originally Posted by jhowell

Added:

I ran your file though EPUBCHECK 4.0.2 and received the following errors:

Spoiler:

Validating using EPUB version 2.0.1 rules.
ERROR(OPF-029): progit-svg-xml-img-auto.epub(-1,-1): The file 'cover.jpg' does not appear to match the media type image/jpeg, as specified in the OPF file.
WARNING(PKG-022): progit-svg-xml-img-auto.epub/cover.jpg(-1,-1): Wrong file extension for image. The image is a 'png' file but has the file extension 'jpg'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "smudge" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "filter" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "is" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "run" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "on" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(129,198): Error while parsing file 'attribute "checkout." not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "clean" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "filter" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "is" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "run" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "when" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "files" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "are" not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/progit_split_053.html(131,213): Error while parsing file 'attribute "staged." not allowed here; expected attribute "class", "dir", "id", "ismap", "lang", "longdesc", "style", "title", "usemap" or "xml:lang"'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(14,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(20,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(38,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(56,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
ERROR(RSC-005): progit-svg-xml-img-auto.epub/toc.ncx(62,71): Error while parsing file 'value of attribute "id" is invalid; must be an XML name without colons'.
WARNING(OPF-003): progit-svg-xml-img-auto.epub(-1,-1): Item 'iTunesMetadata.plist' exists in the EPUB, but is not declared in the OPF manifest.

It looks like something went wrong in the file progit_split_053.html. There is content like:

<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"/>

The problem with progit_split_053.html must have been a screw up in of nested quote conversion in the original conversion to epub with PNG figures. I think I've cleaned that up
(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.

[jhowell]

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:

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.

(I also tried using the online EPUB Validator, but it timed out after 10 minutes.)

[JSWolf]

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.

[j.p.s]

Originally Posted by JSWolf

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.

The SVG figures are infinite resolution.

The PNG images are outside the scope of this thread.

[JSWolf]

But, it depends on how large you specified the SVG to be. Not everyone can edit the eBook to change that.

[j.p.s]

Originally Posted by jhowell

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.)

Thanks, but that seems to be all epub3

The SVG figures in the progit book only use rectangle, path, and text.

Originally Posted by jhowell

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:

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.

(I also tried using the online EPUB Validator, but it timed out after 10 minutes.)

I found, and I believe fixed, that error a little after I made the post. I replaced the upload about the same time you wrote your message.

Do any of the SVG figures in my latest upload render at all in any epub reader you have now that it passes epubcheck?

[j.p.s]

Originally Posted by JSWolf

But, it depends on how large you specified the SVG to be. Not everyone can edit the eBook to change that.

The sizes are specified in cm, so the pixel density shouldn't matter.

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?

[JSWolf]

Originally Posted by j.p.s

The sizes are specified in cm, so the pixel density shouldn't matter.

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?

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.

[j.p.s]

Originally Posted by JSWolf

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.

Thanks. I'm also curious whether the figures display on your Kobo aura or any of your Sony e-ink devices. If not, is there some change to any part of the epub that will cause any e-ink device to display at least one of the SVG figures?

Also, my SVGs are specified in cm, but are referenced in the HTML like:

<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>

Again, while I want the image to display optimally, I mainly want the SVG to display at all, which for most epub readers that I have tried it does not.

[JSWolf]

Originally Posted by j.p.s

Thanks. I'm also curious whether the figures display on your Kobo aura or any of your Sony e-ink devices. If not, is there some change to any part of the epub that will cause any e-ink device to display at least one of the SVG figures?

Also, my SVGs are specified in cm, but are referenced in the HTML like:

<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>

Again, while I want the image to display optimally, I mainly want the SVG to display at all, which for most epub readers that I have tried it does not.

Question, what was the original source for this ePub? Obviously there's been a Calibre conversion done on it at some point.

I'll give it a go on my H2O sometime later today and let you know about the figures.

[jhowell]

Originally Posted by j.p.s

I found, and I believe fixed, that error a little after I made the post. I replaced the upload about the same time you wrote your message.

Do any of the SVG figures in my latest upload render at all in any epub reader you have now that it passes epubcheck?

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.

[j.p.s]

Originally Posted by JSWolf

Question, what was the original source for this ePub? Obviously there's been a Calibre conversion done on it at some point.

I'll give it a go on my H2O sometime later today and let you know about the figures.

The source is at: https://github.com/progit/progit

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.