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

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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by JSWolf

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

Quote:

Originally Posted by Jellby

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

Quote:

Originally Posted by Kayto

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>

01-23-2013, 05:53 PM	#1
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Sigil and SVG image links	Rand Brittain	Sigil	1	01-05-2013 05:39 PM
Creating internal links in EPUB from svg image	ecojon	ePub	1	03-26-2012 12:37 PM
Trying to add link in image within svg	Maal656	Sigil	0	07-25-2011 05:15 AM
Illustrated ebooks with epub: using the svg image element	dpapathanasiou	ePub	0	06-15-2011 04:17 PM
Calibre News Epub Image Scaling	grib	Calibre	3	01-07-2010 06:45 AM

01-24-2013, 02:27 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	What is the real height and width of the image?

01-24-2013, 09:47 AM	#3
JSWolf Resident Curmudgeon Posts: 73,845 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	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.

01-24-2013, 12:03 PM	#4
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	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.

01-24-2013, 12:30 PM	#5
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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?

01-24-2013, 12:36 PM	#6
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	I'm not sure.... what would that look like?

01-24-2013, 01:34 PM	#7
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Something like: <svg height="100%", width="100%"> or svg { height: 100%; width: 100%; }

01-24-2013, 03:20 PM	#10
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	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.

01-24-2013, 03:21 PM	#11
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	How would I input the correct aspect ratio?