Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-23-2013, 06:53 PM   #1
Kayto
Member
Kayto began at the beginning.
 
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.
Kayto is offline   Reply With Quote
Old 01-24-2013, 03:27 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,183
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
What is the real height and width of the image?
Toxaris is offline   Reply With Quote
Old 01-24-2013, 10:47 AM   #3
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,541
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
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.
JSWolf is offline   Reply With Quote
Old 01-24-2013, 01:03 PM   #4
Kayto
Member
Kayto began at the beginning.
 
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.
Kayto is offline   Reply With Quote
Old 01-24-2013, 01:30 PM   #5
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
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?
Jellby is offline   Reply With Quote
Old 01-24-2013, 01:36 PM   #6
Kayto
Member
Kayto began at the beginning.
 
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?
Kayto is offline   Reply With Quote
Old 01-24-2013, 02:34 PM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
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%; }
Jellby is offline   Reply With Quote
Old 01-24-2013, 04:13 PM   #8
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,541
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Jellby View Post
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 is offline   Reply With Quote
Old 01-24-2013, 04:15 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,541
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Jellby View Post
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.
JSWolf is offline   Reply With Quote
Old 01-24-2013, 04:20 PM   #10
Kayto
Member
Kayto began at the beginning.
 
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.
Kayto is offline   Reply With Quote
Old 01-24-2013, 04:21 PM   #11
Kayto
Member
Kayto began at the beginning.
 
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?
Kayto is offline   Reply With Quote
Old 01-24-2013, 04:28 PM   #12
Kayto
Member
Kayto began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
Quote:
Originally Posted by Jellby View Post
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>
Kayto is offline   Reply With Quote
Old 01-24-2013, 04:31 PM   #13
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by JSWolf View Post
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.
Jellby is offline   Reply With Quote
Old 01-24-2013, 04:35 PM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,541
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Jellby View Post
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 is offline   Reply With Quote
Old 01-24-2013, 04:39 PM   #15
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,541
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Kayto View Post
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>
JSWolf is offline   Reply With Quote
Reply

Tags
cover image, epub, oxygen, svg

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 02:59 PM.


MobileRead.com is a privately owned, operated and funded community.