SVG images - why?

[odamizu]

I have been long confused by SVG and would like to understand.

What is the benefit of wrapping a cover jpg (or any image) in SVG code? I've seen ebooks with cover images without SVG; and other ebooks wrap the cover jpg in SVG. SVG also seems to be the default for Sigil and Calibre.

But when I load these ebooks onto my iDevices (reading with an epub app) or Kindle (after converting epub via KindleGen) both seem to work fine, and I'm not understanding the advantage of SVG.

Google has not been helpful in enlightening my poor brain, and I would really like to learn this. Thank you.

[jhowell]

A "SVG wrapper" is sometimes applied to an image in order to scale it as large as possible on a page without distortion. This is not possible using just using HTML because screens can have widely differing aspect ratios.

This does nothing for the cover of a kindle book because Amazon uses just the underlying image and ignores the HTML or SVG coding of the cover page.

Another unrelated use of SVG is to provide images that can scale large or small without becoming pixelated. This is used for things like charts and equations, rather than photographic images.

[JSWolf]

Speaking of Amazon and covers, Amazon really doesn't want you to see the cover of the book you are reading.

[odamizu]

Originally Posted by jhowell

A "SVG wrapper" is sometimes applied to an image in order to scale it as large as possible on a page without distortion. This is not possible using just using HTML because screens can have widely differing aspect ratios.

This does nothing for the cover of a kindle book because Amazon uses just the underlying image and ignores the HTML or SVG coding of the cover page.

Another unrelated use of SVG is to provide images that can scale large or small without becoming pixelated. This is used for things like charts and equations, rather than photographic images.

I feel like this is still going over my head

Am I understanding correctly that the general advantage of SVG is that it reduces distortion and pixelization?

But SVG makes no difference when it comes to cover images in Kindle books?

Does SVG make a difference for non-cover images in KF8?

Thank you for any enlightenment you can offer

[jhowell]

Originally Posted by odamizu

I feel like this is still going over my head

It is difficult to explain. Perhaps someone else will jump in with a better description.

Originally Posted by odamizu

Am I understanding correctly that the general advantage of SVG is that it reduces distortion and pixelization?

It can eliminate distortion in the form of stretching or cropping of raster images (such as cover photos) that do not have the same aspect ratio of the screen used to display the book. It can also eliminate pixelization of vector graphics, such as diagonal lines, so that they do not appear jagged when zoomed in. These are really two different things.

Originally Posted by odamizu

But SVG makes no difference when it comes to cover images in Kindle books?

Yes, but it does affect EPUB so when kindle books are converted to EPUB the cover HTML is often generated with an SVG wrapper so that it renders nicely.

Originally Posted by odamizu

Does SVG make a difference for non-cover images in KF8?

I believe that it can also be used for that purpose, but I do not have experience with that.

Use of SVG in anything but the cover can sometimes prevent a kindle book from supporting enhanced typesetting.

[odamizu]

Originally Posted by jhowell

... It can eliminate distortion in the form of stretching or cropping of raster images (such as cover photos) that do not have the same aspect ratio of the screen used to display the book. It can also eliminate pixelization of vector graphics, such as diagonal lines, so that they do not appear jagged when zoomed in. These are really two different things.

Thank you! I think I understand now

Use of SVG in anything but the cover can sometimes prevent a kindle book from supporting enhanced typesetting.

This means SVG in non-cover images can interfere with conversion to KFX?

Can SVG in non-cover images cause problems with KF8?

[jhowell]

Originally Posted by odamizu

This means SVG in non-cover images can interfere with conversion to KFX?

Can SVG in non-cover images cause problems with KF8?

See the Amazon Kindle Publishing Guidelines for information on SVG support in KF8:

9.4.12 Use Supported SVG Tags and Elements

A publisher can reference the SVG files from within an HTML file using inline <svg>, <img>, <embed>, or <object> tags. Refer to the SVG specification http://www.w3.org/TR/SVG/ for details about SVG. SVG with animation is not supported. SVGs are not supported in iOS. Enhanced Typesetting does not support SVG images.
...

in most cases use of SVG (other than for a cover image) blocks KFX conversion. I haven't tested this extensively, but it appears that if a boilerplate SVG wrapper is used in other places the book will sometimes convert to KFX, despite what the guidelines say.

[DaleDe]

Originally Posted by jhowell

See the Amazon Kindle Publishing Guidelines for information on SVG support in KF8:



in most cases use of SVG (other than for a cover image) blocks KFX conversion. I haven't tested this extensively, but it appears that if a boilerplate SVG wrapper is used in other places the book will sometimes convert to KFX, despite what the guidelines say.

I would interpret the advance typesetting to say that is would not work on text in an SVG image which is likely true.

Dale

[j.p.s]

Originally Posted by odamizu

Can SVG in non-cover images cause problems with KF8?

I don't know whether SVG images can cause problems with KF8, but I do know that SVG images that are actually made with vectors instead of pixels can look great in KF8 books.

In the thread https://www.mobileread.com/forums/sh...d.php?t=288215, post #27 has an epub book with SVG images attached, and post #34 has the same book converted to KF8. You can extract the images from either and view them in a web browser and see how they keep looking better the more you zoom.

Post #1 in that thread has the original epub with PNG images and you can see how those start looking bad fast with zooming. The epub in post #1 with SVG images has no use except as an example of how not to put SVG images in an epub.

[odamizu]

Thanks all! I think SVG may be more than my simple brain can handle.

What prompted my question is that I was poking around the Sigil forums when I came across the nifty plugin “InsertImageSVG” (plugin to insert and wrap an image with SVG). I then thought, “gee, maybe I should start wrapping all my images in SVG code!”

But while that seems to have benefits for ePub, it looks like it may have disadvantages for ePubs that will be converted to KF8??? (And it definitely has potential for interfering with conversion to KFX, which is not a real concern for me since I’m a KF8 gal, but still worth noting.)

So maybe I shouldn’t go crazy with the SVG plug-in?

(Note also that I’m just talking about wrapping jpg and png in SVG code, not in using SVG images, which is definitely more than my simple brain can handle )

[Tex2002ans]

Originally Posted by odamizu

What is the benefit of wrapping a cover jpg (or any image) in SVG code? I've seen ebooks with cover images without SVG; and other ebooks wrap the cover jpg in SVG. SVG also seems to be the default for Sigil and Calibre.

As others have mentioned, the SVG Wrapper allows the underlying image to stretch/expand without distortion.

This differences really stand out when you have Tall/Skinny or Fat/Short images, OR you turn your device from Portrait->Landscape.

For example:

Example 1 (SVG Wrapper vs. HTML Width) [Portrait]

You can see the SVG Wrapper stays the proper ratio:



but the HTML version that stretches to "100% width/height of the screen" starts turning into an oompa loompa:



Example 2 (SVG Wrapper vs. HTML Width) [Landscape]

The problem becomes much worse when you turn the device to landscape.

You can see the SVG Wrapper keeps the ratio correct:



but the HTML Width+Height version gets severely distorted:



while the HTML Width version gets chopped off and flies off the screen:

Originally Posted by j.p.s

I don't know whether SVG images can cause problems with KF8, but I do know that SVG images that are actually made with vectors instead of pixels can look great in KF8 books.

But sadly, SVGs don't work in old MOBI. So you would have to create fallback images anyway. A real giant pain.

I still recommend having the SVG sources though, so in the future you could generate higher quality/resolution images (like in my Formulas to PNG tutorial).

Though an absolutely fantastic post you referenced if I do say so myself.

[odamizu]

@Tex2002ans: Thank you so much for these examples! As they say, a picture paints a thousand words

[odamizu]

I ran a few quick tests and see, indeed, how images in EPUBs benefit from an SVG wrapper.

KF8 seems to handle SVG wrappers okay, too (in my limited, quick testing).

However, when the Kindle Publishing Guidelines say "SVGs not supported in iOS," they aren't kidding! Kindle for iOS will totally ignore images wrapped in SVG code, i.e., the image will be missing and the page will be blank!

So it seems if an ebook will at any point be read on Kindle for iOS, images (or at least non-cover images) should not be wrapped in SVG code.

So much for my brief foray into SVG. But it was worth it to better understand SVG, and for that I once again thank you all!

[graycyn]

Originally Posted by odamizu

However, when the Kindle Publishing Guidelines say "SVGs not supported in iOS," they aren't kidding! Kindle for iOS will totally ignore images wrapped in SVG code, i.e., the image will be missing and the page will be blank!

True, but there's a workaround so the page won't be blank. If you use title tags within your SVG, the text within *will* show up on Kindle for iOS.

I know this because I like to do my title page text/images as SVG, but I make a habit of always using title tags to list title and author, as apps that don't support SVG usually will render the text, thus avoiding the blank page look.

Less useful though in instances where you NEED the image content to be seen.

I wonder WHY Kindle for iOS doesn't support SVG though, seems crazy when Kindle for Android has no issues. Does Apple not allow Amazon to support SVG or has Amazon just been lazy with the iOS app?


Sent from my iPad using Tapatalk

[Tex2002ans]

Originally Posted by graycyn

True, but there's a workaround so the page won't be blank. If you use title tags within your SVG, the text within *will* show up on Kindle for iOS.

I know this because I like to do my title page text/images as SVG, but I make a habit of always using title tags to list title and author, as apps that don't support SVG usually will render the text, thus avoiding the blank page look.

Do you have any example EPUBs of this?