MobileRead Forums - View Single Post - Avoid the "jagged" images in multiple e-readers

Jellby · 03-03-2012, 03:45 AM

Use SVG to properly scale the image to the screen size, keeping the aspect ratio:

Code:

<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>

While it's not strictly necessary, it's easier to maintain if the dimensions in the "viewBox", "width" and "height" all match the actual image pixel dimensions.

If you don't want the image being scaled up beyond a certain size, you can use max-width or max-height.

Or you could directly code the entire image in SVG, that way it can be scaled to any size, without losing quality.

03-03-2012, 03:45 AM	#2
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Use SVG to properly scale the image to the screen size, keeping the aspect ratio: Code: <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <image width="600" height="800" xlink:href="images/Cover.jpg" /> </svg> </div> While it's not strictly necessary, it's easier to maintain if the dimensions in the "viewBox", "width" and "height" all match the actual image pixel dimensions. If you don't want the image being scaled up beyond a certain size, you can use max-width or max-height. Or you could directly code the entire image in SVG, that way it can be scaled to any size, without losing quality.