SVG images, external file versus inline

[j.p.s]

The mobileread wiki on SVG, https://wiki.mobileread.com/wiki/SVG has the following paragraph:

Note that an SVG element can be placed inside the XHTML itself and this is generally the preferred method. It is also possible to place an IMG element in the XHTML file and then reference the SVG as a separate file (with an SVG extension) although some reading devices or apps my not support this.

Does anyone know of any epub reading applications or devices that have trouble with epubs made from HTML that reference svg files but work with SVG inline? By SVG image, I mean an SVG object consisting solely of shapes (like rectangles), lines, arrows, text, and similar. (All vector and text, no rasters of pixels.)

I am not an author or publisher. I am reading a Creative Commons licensed book that has PNG illustrations. The dia source for the images is available and dia can export as SVG. I tried that, and unzipped the epub, replaced the PNG files with SVG files, changed all the references in the HTML, and rezipped. (dia is an application for producing diagrams used by the book's author.)

The result looks fine in FBReader in linux, but many of the figures are severely cropped on the devices I've tried. I would like to change the SVG so that devices scale the images to fit the screen, but information on the web is conflited about how to do this sort of thing.

Adding in the (unknown in detail to me) individual quirkiness of devices, makes experimenting difficult enough. I would prefer not to have to move the SVG inline unless I really have to.

So, which applications and devices, if any, handle external SVG files worse than SVG inline to the HTML?

The devices I've tried are Nook HD+, Aua HD, Onyx M92, and, in desperation, Pocketbook 360.

On the high resolution screens, the PNGs are just too tiny to read. I really, really do not like reading books on a computer monitor, so FBReader on my desktop or laptop monitor is out of the question.

Thanks for any illumination on this issue.

[MikeWV]

Kobo ignores embedded fonts in kepubs but not epubs. If the font the Kobo software decides to use in place of the embeded font is significantly different in proportions it will result in text strings overlapping each other and text being truncated at the right side of the image if the default font is wider than that used in the image. This applies to Kobo PC, Kobo Android and Kobo readers.

I'm currently struggling with SVG images in my books being rendered as pure black rectangles on my Kobo Touch reader (firmware 3.3.0) when viewed as kepubs. But not all images, just some, and they all contain a lot of text. So far, I have not found anything that is common only to the images that are rendered as black rectangles. Some of the images that display properly also have a lot of text. I didn't have this problem until I updated my firmware.

You can get your images to scale by setting width or height to a percent less than or equal to 100% and setting the other dimension to auto. Do it inside the <img> tags where you probably now have the height and width set to a fixed number of pixels. For example: width="90%"; height="auto"; You should make the smaller dimension auto in most cases.

[j.p.s]

Originally Posted by MikeWV

You can get your images to scale by setting width or height to a percent less than or equal to 100% and setting the other dimension to auto. Do it inside the <img> tags where you probably now have the height and width set to a fixed number of pixels. For example: width="90%"; height="auto"; You should make the smaller dimension auto in most cases.

Thanks. I will give that a try.

[j.p.s]

Originally Posted by j.p.s

The mobileread wiki on SVG, https://wiki.mobileread.com/wiki/SVG has the following paragraph:

Does anyone know of any epub reading applications or devices that have trouble with epubs made from HTML that reference svg files but work with SVG inline? By SVG image, I mean an SVG object consisting solely of shapes (like rectangles), lines, arrows, text, and similar. (All vector and text, no rasters of pixels.)

So, I assume no one knows of an example of inline SVG working and a reference to the same SVG as an external file not working.

[MikeWV]

I'm using SVG images inside the <img> tag for my tables and charts. It seems to be working fine except the Kobo issues I mentioned above. They were all created from PDFs in Inkscape and saved as plain SVGs. The SVGs reside in an image folder separate from the XHTML files and are referenced by source inside the <img> tag, i.e. <img src="../images/file_xyz.svg" then all the usual attributes.