View Single Post
Old 07-06-2017, 12:50 AM   #19
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,306
Karma: 13057279
Join Date: Jul 2012
Device: Kobo Forma, Nook
Quote:
Originally Posted by j.p.s View Post
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.
You could open up those 1.0 SVGs in Inkscape and save them as "Plain SVG". It should convert everything to 1.1 for you.

I tested "progit-svg11-xml-img-auto.epub" on my Nook. Displays ok.

But like jhowell mentioned, probably best to change the SVGs to be more EPUB-standards-compliant.

Quote:
Originally Posted by j.p.s View Post
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?
The only thing you want to do is go into your code:

Quote:
<p class="calibre3"><img width="100%" src="../Images/18333fig0101-tn.svg" alt="Figure 1-1. Local version control diagram." title="Figure 1-1. Local version control diagram." class="calibre6"/></p>
and remove the "calibre6" class:

Code:
.calibre6 {
    height: auto;
    width: auto
    }
that code is interfering with the SVG stretching to the full width of the screen on some viewers.

Ultimately, what I would recommend doing is changing it to this:

Spoiler:
Quote:
<div class="svgimages"><img src="../Images/18333fig0101-tn.svg" alt="Figure 1-1. Local version control diagram." title="Figure 1-1. Local version control diagram." class="svgimage"/></div>


with this CSS:

Spoiler:
Code:
div.svgimages {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

img.svgimage {
	width: 100%;
}


this allows you to easily control all the SVGs in a single location.

Quote:
Originally Posted by j.p.s View Post
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.
Which readers specifically did you try? Most of the Android readers do not follow the EPUB standards... and/or do complete CSS overrides.

Quote:
Originally Posted by jhowell View Post
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.
If this is for personal usage (and you only use Kindles that support KF8), then sure you could keep the SVG images in the book.

But if it's for actual sale, you have to take into account older Kindles (MOBI). You would then need JPG/PNG fallbacks (this is explained in section 17.3.2.2 of the "Amazon Kindle Publishing Guidelines").

If you needed to generate PNGs, I would recommend taking those SVGs and generating higher quality PNGs from them, sort of like how I explained in my "Tutorial: Formulas to PNG" topic:

Manually using Inkscape: Post #2
Automatically using Imagemagick: Post #19

All you have to do is just tweak that .bat file in Post #19 slightly by changing "*.pdf" into "*.svg":

Spoiler:
Code:
FOR /F %%k IN ('dir /b .\*.svg') DO (
convert -density 350 %%k ^
    -background white -flatten -trim ^
	-depth 8 -colors 17 ^
    %%k.png
)


that'll generate all the SVGs in a given folder into high quality PNGs (350 DPI).

Side Note: You have to be careful with some characters that are included in these SVG files though. For example, in 18333fig0104-tn.svg, the author is using a 𝚫 (U+1D6AB : MATHEMATICAL BOLD CAPITAL DELTA) which probably doesn't exist on many fonts. You'll probably want to substitute in a normal Δ (Greek Capital Delta).

Quote:
Originally Posted by jhowell View Post
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.
... yeah... this is one of the downfalls of SVG on the current devices. They just don't support it as well as bitmap images. Not being able to Zoom is one of the disadvantages. And there are still a lot of buggy cases such as changing fonts/backgrounds/colors/Night Mode:

https://www.mobileread.com/forums/sh...44#post2852244

or not scaling properly in some readers:

https://www.mobileread.com/forums/sh...40#post3515940

Not too sure how well Text-to-Speech is handled within SVG images either (haven't tested this thoroughly yet).

Theoretically I am all for vector images over their bitmap counterparts... but practically, the damn readers have a while to go. Good to plan for the future though and store your vector sources, so you could always generate higher quality images at a later date (part of the reason I wrote that tutorial. Some sort of middleground while waiting for higher DPI devices + MathML support to get better).

Last edited by Tex2002ans; 07-06-2017 at 01:16 AM.
Tex2002ans is offline   Reply With Quote