Image Not Visible - Using SVG

SeaCanary · 05-13-2014, 04:41 AM

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, 07: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, 12:58 AM

BINGO !!!

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, 08:18 AM

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

Toxaris · 05-14-2014, 09:31 AM

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

exaltedwombat · 05-14-2014, 09: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, 09:47 AM

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

theducks · 05-14-2014, 09:48 AM

Quote:

Originally Posted by exaltedwombat

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>

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!

)

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

exaltedwombat · 05-14-2014, 10: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, 10:55 AM

Quote:

Originally Posted by exaltedwombat

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>

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, 11:06 AM

Quote:

Originally Posted by RbnJrg

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, 03:24 PM

Quote:

Originally Posted by Jellby

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

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, 03:11 AM

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, 06:09 AM

Quote:

Originally Posted by SeaCanary

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

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

Amazon

Quote:

Originally Posted by SeaCanary

What forum should I post these questions to?

MR Kindle Formats

Jellby · 05-15-2014, 08:48 AM

Quote:

Originally Posted by RbnJrg

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.

05-15-2014, 03:11 AM	#13
SeaCanary Enthusiast Posts: 34 Karma: 10 Join Date: Jan 2014 Device: Nook	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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Svg wrapper and image resizing	Nabodita	ePub	24	05-02-2014 12:21 AM
Scaling up an image via SVG	Kayto	ePub	27	01-26-2013 03:38 AM
Sigil and SVG image links	Rand Brittain	Sigil	1	01-05-2013 05:39 PM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
How to make image visible?	ppharm	PDF	2	01-11-2011 06:40 AM

05-14-2014, 12:58 AM	#3
SeaCanary Enthusiast Posts: 34 Karma: 10 Join Date: Jan 2014 Device: Nook	BINGO !!! 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!

05-14-2014, 08:18 AM	#4
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	I've never quite understood the advantage of wrapping an image in SVG. Educate me?

05-14-2014, 09:31 AM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	For one thing automatic centering and automatic adjustment to the size of the screen.

05-14-2014, 09:40 AM	#6
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	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>

05-14-2014, 09:47 AM	#7
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	umm...Try in landscape orientation and tell me.

05-14-2014, 10:42 AM	#9
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	But isn't SVG rejected when converting to mobi? And that's what most self-publishing customers want, whether we like it or not.