MobileRead Forums - View Single Post

Turtle91 · 05-21-2022, 08:34 AM

I hesitated to enter the conversation earlier... the image solution I use works very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy.

SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it.

You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you.

If you're manually entering it: put the image on it's own xhtml page and use the following code:

Code:

<body>
  <div>
    <svg 
	xmlns="http://www.w3.org/2000/svg" 
	height="100vh" width="100vw" 
	preserveAspectRatio="xMidYMid meet" version="1.1" 
	viewBox="0 0 800 1100" 
	xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="800" height="1100" xlink:href="../Images/SampleImage.png"/>
    </svg>
  </div>
</body>

You will need to put the image dimensions in the appropriate places (image height in the red area, image width in the blue area) and the image location/filename in the green area.

I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there!

Find the happy medium.

Cheers!

05-21-2022, 08:34 AM	#13
Turtle91 A Hairy Wizard Posts: 3,375 Karma: 20212733 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I hesitated to enter the conversation earlier... the image solution I use works very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy. SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it. You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you. If you're manually entering it: put the image on it's own xhtml page and use the following code: Code: <body> <div> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1100" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="800" height="1100" xlink:href="../Images/SampleImage.png"/> </svg> </div> </body> You will need to put the image dimensions in the appropriate places (image height in the red area, image width in the blue area) and the image location/filename in the green area. I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there! Find the happy medium. Cheers!