MobileRead Forums - Image Not Visible

Page 1 of 2

Show 40 post(s) from this thread on one page

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- Sigil (https://www.mobileread.com/forums/forumdisplay.php?f=203)

- - Image Not Visible - Using SVG (https://www.mobileread.com/forums/showthread.php?t=239331)

SeaCanary

05-13-2014 05:41 AM

Image Not Visible - Using SVG

I can't get the images that display perfectly in Sigil to display at all on my Nook Basic.

I tried a method I found here to no avail. Here is my code:

Style0001.css

Code:

.svg_outer {

  display: block;

  margin-bottom: 0;

  margin-left: 0;

  margin-right: 0;

  margin-top: 0;

  padding-bottom: 0;

  padding-left: 0;

  padding-right: 0;

  padding-top: 0;

  text-align: left;

  }

.svg_inner {

  display: block;

  text-align: center;

  }

01 Title PageBW.xhtml

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

<head>

  <link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>

  <style type="text/css">

    @page { margin: 0.000000pt; padding: 0.000000pt; }

  </style>

  <title>"Bawdy Booklet Of Buxom Buccaneer Beauties"</title>

</head>



<body>

  <div class="svg_outer">

    <div class="svg_inner">

      <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" 

        version="1.1" viewBox="0 0 592 900" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">



        <image height="900" width="592" xlink:href="../images/01 Title PageBW.jpg"/>

      </svg>

    </div>

  </div>

</body>

</html>

I've tried reducing the height and width by half and that didn't work. Like I say, it works perfectly in Sigil, but not on my Nook Basic. Please help.

Toxaris

05-13-2014 08:14 AM

A couple of comments. Try to avoid spaces in your filenames, even if they are quoted. It will bite you in the back sooner or later.
The other is more important I guess and will result in an error. Things are case-sensitive. Your path is wrong. The path should be "../Images/01 Title PageBW.jpg".

The one below should also work and saves you a nested div.

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

<head>

  <title>Cover</title>

</head>



<body>

  <div style="text-align: center; padding: 0pt; margin: 0pt;">

    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 592 900" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

      <image height="900" width="592" xlink:href="../Images/01 Title PageBW.jpg"></image>

    </svg>

  </div>

</body>

</html>

SeaCanary

05-14-2014 01:58 AM

BINGO !!! :thumbsup:

The path was wrong. I corrected that and eliminated spaces in all the file names and now I can see the illustrations.

Thank you very much!

exaltedwombat

05-14-2014 09:18 AM

I've never quite understood the advantage of wrapping an image in SVG. Educate me?

Toxaris

05-14-2014 10:31 AM

For one thing automatic centering and automatic adjustment to the size of the screen.

exaltedwombat

05-14-2014 10:40 AM

What's wrong with this? Especially as the customer will want a mobi version as well.

<body style="border:0;margin:0">
<div style="text-align:center"><img alt="cover-front" src="../Images/cover-front.jpg" width="100%" /></div>
</body>

Jellby

05-14-2014 10:47 AM

umm...Try in landscape orientation and tell me.

theducks

05-14-2014 10:48 AM

Quote:

Originally Posted by exaltedwombat (Post 2830204)

It distorts the image :( to make 100% :(
SVG allows the biggest image while maintaining Aspect ratio
(Did I mention that I also hate 'stretch-o-vision' mode on widescreen TV's? A full moon is ROUND A-wooo! :p )

It is not reliable. Not all images will center on all devices

exaltedwombat

05-14-2014 11:42 AM

But isn't SVG rejected when converting to mobi? And that's what most self-publishing customers want, whether we like it or not.

RbnJrg

05-14-2014 11:55 AM

Quote:

Originally Posted by exaltedwombat (Post 2830204)

I think you should use:

Code:

<body style="border:0;margin:0">

  <div style="text-align:center"><img alt="cover-front" src="../Images/cover-front.jpg" height="100%" width="auto"/></div>

</body>

That should work for old mobi files both in portrait and landscape mode.

Regards

Jellby

05-14-2014 12:06 PM

Quote:

Originally Posted by RbnJrg (Post 2830263)

Code:

<body style="border:0;margin:0">

  <div style="text-align:center"><img alt="cover-front" src="../Images/cover-front.jpg" height="100%" width="auto"/></div>

</body>

That should work for old mobi files both in portrait and landscape mode.

Not if the image is "wider" than the screen. Say a 800x700 image in an 800x600 screen (both in portrait orientation).

Or, if it does work, it must be a "feature" of Kindles, but it's still a reason to use SVG in Sigil and ePub

RbnJrg

05-14-2014 04:24 PM

Quote:

Originally Posted by Jellby (Post 2830276)

Hi Jellby;

In Kindle works (you can check that with Kindle Previewer). But let's put that result aside; you are forgetting that the exaltedwombat wants something for .mobi, the old Kindle format. And .svg only works for .kf8. When the image is wider than tall, then the solution could be (without using svg):

Code:

<body style="border:0;margin:0">

<div style="text-align:center"><img alt="cover-front" src="../Images/cover-front.jpg" width="100%" height="auto"/></div>

</body>

And when the image is taller than wide, then we could use:

Code:

<body style="border:0;margin:0">

<div style="text-align:center"><img alt="cover-front" src="../Images/cover-front.jpg" width="auto" height="100%"/></div>

</body>

If exaltedwombat doesn't use the above code, then I can't see how will he get what he want for old Kindle devices.

Regards
Rubén

SeaCanary

05-15-2014 04:11 AM

:offtopic:

I am very new at this. Three questions:

What would I use to generate a .mobi file?
Where do I get or get access to the Kindle Previewer?
What forum should I post these questions to?

Thank you.

Doitsu

05-15-2014 07:09 AM

Quote:

Originally Posted by SeaCanary (Post 2830931)

What would I use to generate a .mobi file?

Kindle Previewer for self-published books via KDP or Calibre for non-commercial books.

Quote:

Originally Posted by SeaCanary (Post 2830931)

Where do I get or get access to the Kindle Previewer?

Amazon

Quote:

Originally Posted by SeaCanary (Post 2830931)

What forum should I post these questions to?

MR Kindle Formats

Jellby

05-15-2014 09:48 AM

Quote:

Originally Posted by RbnJrg (Post 2830490)

But let's put that result aside; you are forgetting that the exaltedwombat wants something for .mobi, the old Kindle format.

Maybe but this is the Sigil forum, which is an ePub editor, and the question was just why would one want to use an SVG wrapper, in general :)

Quote:

And when the image is taller than wide, then we could use:

That's no (general) solution, I'm afraid. The problem is not whether the image is taller or wider, which you can know in advance, but whether it is taller or wider than the scree, which you cannot know in advance.

All times are GMT -4. The time now is 08:03 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page