MobileRead Forums - Scaling up an image via SVG

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - Scaling up an image via SVG (https://www.mobileread.com/forums/showthread.php?t=203677)

Scaling up an image via SVG

I have a problem with image scaling using svg. I have an ebook that was sent out to an ebook conversion company and came back with this coding:

(Anonymized)
<body>
<div>
<svg:svg viewBox="0 0 1200 1600">
<svg:image xlink:href="../images/xxxxx.jpg" transform="translate(0 0)" width="1200" height="1600"/>
</svg:svg>
</div>
</body>

The problem is enlarging the cover image to fit the screen of an e-reader. Currently it appears on an e-reader in the centre of the screen with about 25% white space above and below it.

I think the enlargement problem stems from the element description ‘svg’. The picture shows up but I can’t seem to resize it. It's as if it's locked in its size. I’ve tried adjusting the width and height specs to percentages as well as larger values, but to no avail. I’ve also tried to enlarge the image by adjusting the specs of ‘svg’ on the css page. Again, to no avail. I tried a different route altogether in which I removed the svg coding and inputted the image using the <p></p> element (as done successfully with other cover images), but then lost the image outright. The link to the image file is intact and working, so I’m not sure where I’ve gone wrong.

Ideally, I’d like to keep the svg formatting and be able to enlarge the image within it, as this will allow the cover image to conform to a multitude of e-reader screen sizes. (Right?)

If it's of any use to know, I'm using Oxygen to work the epub file.

Any advice re: svg formatting is appreciated. I'm pretty new to the lingo and definitely not well versed in svg jazz.

What is the real height and width of the image?

The numbers you use should be the actual pixel size of the image. Do not use some arbitrary numbers as they won't display correctly.

If your image is not 1200x1600, then they need to be changed to whatever the correct numbers for the image are.

The image's width is 600px, and height is 900px. I've tried changing the numbers to reflect these but the image remains the same size as before.

Actually, the numbers can be arbitrary, if they need to be the real pixel size it's only because of some bug in some reader.

You are defining the coordinates of your viewbox and requesting the image to fill it up, but do you define the size of the SVG element?

I'm not sure.... what would that look like?

Something like:

<svg height="100%", width="100%">

or

svg { height: 100%; width: 100%; }

Quote:

Originally Posted by Jellby (Post 2395108)

ADE needs the numbers to be the numbers for the images or the aspect can be off.

Quote:

Originally Posted by Jellby (Post 2395211)

Something like:

<svg height="100%", width="100%">

or

svg { height: 100%; width: 100%; }

That is very poor coding as that will screw with the image's aspect ratio. The best look to a cover is to have it be the correct aspect ratio.

I've defined svg on the CSS page like this:

svg {height: 100%; width: 100%;}

But still nothing.

The cover image page looks like this:

(Anonymized)
<body>
<div>
<svg:svg viewBox="0 0 600 900">
<svg:image xlink:href="../images/xxxxx.jpg" transform="translate(0 0)" width="600" height="900"/>
</svg:svg>
</div>
</body>

I'm still dumbfounded as to why the alteration of ANY of these numbers won't affect the size of the image.

How would I input the correct aspect ratio?

Quote:

Originally Posted by Jellby (Post 2395211)

Something like:

<svg height="100%", width="100%">

or

svg { height: 100%; width: 100%; }

Sorry if this is a repeat post. Some of my other posts aren't appearing in the thread.

Yes, I've tried defining the svg element this way. I've tried it on the CSS page as well as inputting it in the actual code. Neither attempt has changed the size of the image.

Should I scrap svg in favour of coding the cover image like this?:

<body style="background-color: #000007">
<p id="cover" class="ser"><img class="imgpub" alt="cover" src="images/cover.jpg" style="max-width:100%; height:100%"/></p>
</body>

Quote:

Originally Posted by JSWolf (Post 2395335)

That is very poor coding as that will screw with the image's aspect ratio.

Not at all. That's only the size of the SVG container. The aspect of the image itself can be maintained with the appropriate property in the SVG code.

Quote:

Originally Posted by Jellby (Post 2395363)

Not at all. That's only the size of the SVG container. The aspect of the image itself can be maintained with the appropriate property in the SVG code.

True that. My mistake.

Quote:

Originally Posted by Kayto (Post 2395348)

How would I input the correct aspect ratio?

The following code does not use an SVG container and works perfectly for a cover image.

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Among Others</title>

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>



</head>

<body style="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; text-align:center; background-color:#00007;">

<div><img alt="image" src="images/cover.jpg" style="height:100%"/></div>

</body>

</html>

The following code does use an SVG container and the numbers used are the actual number of the image.

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <title>Cover</title>

<style type="text/css">

@page {padding: 0pt; margin:0pt}

            body { text-align: center; padding:0pt; margin: 0pt; }

</style>

</head>



<body>

  <div>

    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 590 750" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

      <image height="750" width="590" xlink:href="../Images/cover_image.jpg"></image>

    </svg>

  </div>

</body>

</html>