01-23-2013, 05:53 PM | #1 |
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. |
01-24-2013, 02:27 AM | #2 |
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 |
Resident Curmudgeon
Posts: 74,313
Karma: 129333690
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 |
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 |
frumious Bandersnatch
Posts: 7,516
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 |
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 |
frumious Bandersnatch
Posts: 7,516
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:13 PM | #8 |
Resident Curmudgeon
Posts: 74,313
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
ADE needs the numbers to be the numbers for the images or the aspect can be off.
|
01-24-2013, 03:15 PM | #9 |
Resident Curmudgeon
Posts: 74,313
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
01-24-2013, 03:20 PM | #10 |
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 |
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?
|
01-24-2013, 03:28 PM | #12 | |
Member
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
|
Quote:
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> |
|
01-24-2013, 03:31 PM | #13 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
01-24-2013, 03:35 PM | #14 |
Resident Curmudgeon
Posts: 74,313
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
01-24-2013, 03:39 PM | #15 |
Resident Curmudgeon
Posts: 74,313
Karma: 129333690
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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> |
Tags |
cover image, epub, oxygen, svg |
|
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 |