01-24-2013, 03:40 PM | #16 |
Member
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
|
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]? |
01-24-2013, 03:46 PM | #17 |
Member
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
|
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? |
01-24-2013, 03:54 PM | #18 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
01-24-2013, 11:29 PM | #19 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
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: Code:
<?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: Code:
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. Last edited by dgatwood; 01-24-2013 at 11:33 PM. |
01-24-2013, 11:31 PM | #20 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Don't use that code. It's not good. The CSS is not proper for reflowing ePub.
|
01-25-2013, 03:57 AM | #21 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
My code for SVG covers (probably equivalent to JSWolf's one), adapted to your image size:
Code:
<?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> |
01-25-2013, 07:39 AM | #22 |
A Hairy Wizard
Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
|
01-25-2013, 09:21 AM | #23 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
<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; } Last edited by JSWolf; 01-25-2013 at 11:09 PM. |
|
01-25-2013, 11:51 AM | #24 |
A Hairy Wizard
Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Ahh...ok. I'm all for reducing bloat! I thought there was something wrong with the SVG. Thanks!
|
01-25-2013, 02:48 PM | #25 |
Member
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
|
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? |
01-25-2013, 02:49 PM | #26 |
Member
Posts: 18
Karma: 10
Join Date: Jan 2013
Location: British Columbia, Canada
Device: Android cell phone, iPhone using Bluefire on both
|
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!
|
01-25-2013, 11:42 PM | #27 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
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-26-2013, 03:38 AM | #28 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Does this help?
|
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 |