View Full Version : Scaling up an image via SVG


Kayto
01-23-2013, 05:53 PM
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 cant seem to resize it. It's as if it's locked in its size. Ive tried adjusting the width and height specs to percentages as well as larger values, but to no avail. Ive 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 Im not sure where Ive gone wrong.

Ideally, Id 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.

Toxaris
01-24-2013, 02:27 AM
What is the real height and width of the image?

JSWolf
01-24-2013, 09:47 AM
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.

Kayto
01-24-2013, 12:03 PM
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.

Jellby
01-24-2013, 12:30 PM
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?

Kayto
01-24-2013, 12:36 PM
I'm not sure.... what would that look like?

Jellby
01-24-2013, 01:34 PM
Something like:

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

or

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

JSWolf
01-24-2013, 03:13 PM
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?

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

JSWolf
01-24-2013, 03:15 PM
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.

Kayto
01-24-2013, 03:20 PM
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.

Kayto
01-24-2013, 03:21 PM
How would I input the correct aspect ratio?

Kayto
01-24-2013, 03:28 PM
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>

Jellby
01-24-2013, 03:31 PM
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.

JSWolf
01-24-2013, 03:35 PM
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.

JSWolf
01-24-2013, 03:39 PM
How would I input the correct aspect ratio?

The following code does not use an SVG container and works perfectly for a cover image.
<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.
<?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>

Kayto
01-24-2013, 03:40 PM
Soooo....back to the original problem.

The image's size is still unchanged after implementing the various suggestions here. Any ideas on why the coding was written [svg:svg...etc.] rather than [svg ...etc]?

Kayto
01-24-2013, 03:46 PM
Thanks, JSWolf. I tried both codes. The first rendered a white page (no image). The second rendered a black page (no image). This has happened with other attempts to change the size. (I've changed the src and href to correlate with the image file.)

Any idea what's going on there?

JSWolf
01-24-2013, 03:54 PM
Thanks, JSWolf. I tried both codes. The first rendered a white page (no image). The second rendered a black page (no image). This has happened with other attempts to change the size. (I've changed the src and href to correlate with the image file.)

Any idea what's going on there?

Maybe there is a problem with the image. Try one you know works and see what happens.

dgatwood
01-24-2013, 11:29 PM
Part of the problem may be that a lot of your SVG is under-specified. You're leaving out a bunch of optional attributes that you probably shouldn't be leaving out, e.g. preserveAspectRatio. And you shouldn't need to translate the image. Leave that out.

The following works for me everywhere I've tried it:


<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Cover</title>
<link rel="stylesheet" type="text/css" href="nookstyles.css" />
<link rel="stylesheet" type="text/css" href="nookstyles2.css" />
<style type="text/css">
html,body {
height: 100% !important;
min-height: 100% !important;
width: 100% !important;
margin: 0 !important;
border-width: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body style="oeb-column-number: 1; height: 100%; width: 100%; background-color: #000000;" >
<div class="coverpage">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100%"
height="100%"
id="svg2"
xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">
<image xlink:href="tiw-frontcover.jpg" height="2640" width="2040">
<desc>Patriots: Traitors in Waiting</desc>
</image>
</svg>
</div>
</body>
</html>



And in my stylesheet:


div.coverpage {
page-break-inside: avoid;
text-indent: 0 !important;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
div.coverpage p {
text-indent: 0 !important;
}



Change 2040 and 2640 to the width and height of your cover image in two places.

JSWolf
01-24-2013, 11:31 PM
Don't use that code. It's not good. The CSS is not proper for reflowing ePub.

Jellby
01-25-2013, 03:57 AM
My code for SVG covers (probably equivalent to JSWolf's one), adapted to your image size:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title>Cover</title>
<style type="text/css">
@page, body.cover { margin: 0; }
div { text-align: center; }
</style>
</head>
<body class="cover">

<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 900"
preserveAspectRatio="xMidYMid meet">
<image width="600" height="900" xlink:href="images/Cover.jpg" />
</svg>
</div>

</body>
</html>

Turtle91
01-25-2013, 07:39 AM
Don't use that code. It's not good. The CSS is not proper for reflowing ePub.

Which part is not proper and why - the SVG?? I'm just getting my feet wet on SVG and was wondering. :blink:

Thanks!

JSWolf
01-25-2013, 09:21 AM
Which part is not proper and why - the SVG?? I'm just getting my feet wet on SVG and was wondering. :blink:

Thanks!

<style type="text/css">
html,body {
height: 100% !important;
min-height: 100% !important;
width: 100% !important;
margin: 0 !important;
border-width: 0 !important;
padding: 0 !important;
}

That is just messy. Look at the SVG wrapper code that Jellby and I posted. Take your pick. Both are a lot neater without this bloated CSS code.

Turtle91
01-25-2013, 11:51 AM
Ahh...ok. I'm all for reducing bloat! :) I thought there was something wrong with the SVG. Thanks!

Kayto
01-25-2013, 02:48 PM
Okay, I've had a bit of success using the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
</style>
</head>

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

Still have a problem though. The image is now sitting at the bottom of the e-reader screen with about 25% white space above it. It did manage to fill out in width though, which is great.

Any advice as to why it's still not filling out the screen?

Kayto
01-25-2013, 02:49 PM
Also, just wanted to give you guys all a shout out for helping me with this problem. Your suggested codes have been great learning tools and your advice has been invaluable!

JSWolf
01-25-2013, 11:42 PM
Okay, I've had a bit of success using the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
</style>
</head>

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

Still have a problem though. The image is now sitting at the bottom of the e-reader screen with about 25% white space above it. It did manage to fill out in width though, which is great.

Any advice as to why it's still not filling out the screen?

<?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>

Compare my code with your code and you can see where your CSS code may not be correct. My code works with ADE and Blufire.

Jellby
01-26-2013, 03:38 AM
Does this help?
http://www.w3.org/TR/SVG/images/coords/PreserveAspectRatio.png