Setting SVG image styles via CSS.

[Jim101]

I've been experimenting with setting the styles in an SVG image via a style sheet. The attached EPUB is hopefully self-explanatory. It contains 4 cases, starting with setting SVG styles via SVG presentation attributes and gradually working towards setting the styles with CSS and eventually separating them out to the EPUB's style sheet.

The first 3 cases behave as expected. Case 4 is broken. This might be due to a bug in Sigil, but I'm new at coding EPUB documents, so it's far more likely that I've made an error in the coding. But after a week of staring at my code, I'm not making any progress. Can anyone spot my error?

Incidentally, the comment that the first 3 cases behave as expected is true when viewing the EPUB in Sigil, Calibre and Gnome Books. Curiously, FBReader and Sumatra were unable to display any of the 4 SVG images, and Okular only managed to partially display some of them. I'm not sure whether that is due to me making a coding error that caused them to choke, or limitations of those apps.

[KevinH]

FYI, Not every browser engine treats handling css applied to svg in the same way. You can see that with some of the epub3 mathml tests. If all browser engines do not agree , then there is little chance of other e-readers are broadly support it.

Calibe and Sigil, use the same browser engine QtWebEngine which is Chrome based. Try your tests there. Applying css is done internally to Qt so any bug reports should be reported there or at its underlying Chrome browser project.

If the current Chrome browser passes your case 4, then support will eventually become part of QtWebeEngine at some later date.

[DiapDealer]

Also consider testing with an EPUB3 which which will typically have more SVG support. Including the ability to mark xhtml that contains embedded SVG (by reference or by inclusion) with the svg property in the epub manifest.

It still probably won't work in all situations, even if it works in some renderers.

[KevinH]

By the way, your test case 4 does not work in iBooks. And so I doubt it will work in Chrome or Safari. If it does not work in those two browsers, you can consider it unsupported.

[DiapDealer]

Strangely enough: using an object tag when embedding the svg by reference (instead of the img tag), allows the externally referenced stylesheet to work as expected.

<object type="image/svg+xml" data="../Images/Image04_svg_links_style_sheet.svg"></object>

I suspect something deep within Chrome is the culprit.

And once the doctype is removed from the external svg file, it even passes EPUB3 validation (after being converted to an EPUB3, of course).

Still no idea how widespread the support for such a strategy would be.

Though it raises the question of whether or not Sigil should be parsing files (including those with svg extensions) for "xml-stylesheet" PIs to adjust when updating hrefs.

[KevinH]

Yes, the issue appears to be that when you pull in svg via an img tag no outside links in the svg are processed. This is by definition how a img tag works.

As DiapDealer said, if you "include" the svg in some other way, such as an object tag or via an iframe then the proper svg external links are processed.

You can try the following (but set width and height to match the image).

<iframe src="../Images/Image04_svg_links_style_sheet.svg" />

So this appears to be spec (whatwg behaviour for anything that tries to include an svg via an img tag.

So you would need to take it up with the w3c and or Chrome developers.

[KevinH]

Yes, Sigil would not update a PI like the OP used if moved or the stylesheet was renamed. The OP could use a link tag immediately after the svg tag and that would be updated properly by Sigil after moves and name changes.

Something like:

<link xmlns="http://www.w3.org/1999/xhtml" href="../Styles/Style.css" rel="stylesheet" type="text/css" />"

Using PI's to link in things would probably not be supported by many e-readers if at all. Although it works in Sigil now, after moving or renaming the stylesheet or moving the svg file relative to stylesheet, that PI would not be updated automatically while the link approach would be.

[KevinH]

FWIW, according to the w3c, iframe is the recommended way to include html and since svg is part of html5 and because use of object tags has fallen dramatically since plugins and flash has gone away, if you want non-static svg either place it directly in the xhtml file or use an iframe to embed it would be the most standards compliant. But be prepared for many many old e-readers to not work well in any case.

[DiapDealer]

I wasn't sure if the link tag was valid inside an svg tag pair, to be honest. I just tried the object tag because it was always mentioned as a fall-back technique years ago. An iframe would definitely be the better way to go if the epub spec permits it.

[Jim101]

Thanks for your quick responses.

Curiously, DiapDealer's solution of replacing the img tag by an object tag works for me on my Linux PC in both Sigil and Gnome Books, but does not work in Sigil on my Windows 10 PC. If EPUB format gives inconsistencies like this, I'm starting to think I'm better off publishing in some other format, like pdf.

I haven't yet tested iframe. It's painful that the height and width attributes for iframe require the units to be pixels. One of the reasons I like SVG is that it allows me to specify dimensions in absolute units like millimetres. If I need to figure out the resolution to specify a sensible size in pixels to get it to work the way I want in an EPUB document, it doesn't seem to be worth the effort.

Since I'm new to Sigil and EPUB, I'm still trying to work my way through some of the comments. Can someone please explain what PI stands for?

[DiapDealer]

Sorry. PI is an xml Processing Instruction. Those lines that are encapsulated by <? ?> (though the xml declaration itself is not technically a PI). Your "xml-stylesheet" is one of the more common uses of a processing instruction.

They're not EPUB (or Sigil) specific.

[KevinH]

You do understand that epub reading devices come in all different screen sizes and so setting absolute sizes makes very little sense in a reflowable format like epub.

It sounds like you expect to format your ebook for a specific size page. If that is your desire, pdf is a much better format.

And yes epub format has been implemented by a large number of different devices and manufacturers and each device has its own issues and inconsistencies that experienced epub developers have learned to work around or use fallbacks to handle.

On top of that the epub spec itself has evolved from epub2 to epub3 (3.2 is current) and may be to moving towards web publications for epub 4.

This is even true for web browser engine based epub tools like Sigil and Calibre who support a much broader range than most actual older e-ink e-readers that make up the bulk of the installed user base.