Scaling up an image via SVG - Page 2

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

Quote:

Originally Posted by Kayto

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:

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.

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:

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>

Turtle91 · 01-25-2013, 07:39 AM

Quote:

Originally Posted by JSWolf

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.

Thanks!

JSWolf · 01-25-2013, 09:21 AM

Quote:

Originally Posted by Turtle91

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

Thanks!

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;
    }

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

Quote:

Originally Posted by Kayto

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?

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>

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?

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, 03:40 PM	#16
Kayto 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
Kayto 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, 11:31 PM	#20
JSWolf Resident Curmudgeon Posts: 73,866 Karma: 128597114 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, 11:51 AM	#24
Turtle91 A Hairy Wizard Posts: 3,093 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
Kayto 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
Kayto 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-26-2013, 03:38 AM	#28
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Does this help?