View Full Version : <svg> to <img>


codrutoctavian
02-14-2012, 08:06 PM
I am trying to convert a book from epub to mobi. As Kindle does not support SVG I am trying to convert these tags in the html from:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 11 600 800" width="100%">
<image height="800" transform="translate(0 0)" width="600" xlink:href="images/cover.jpg"/>
</svg>

to <img> but I do not know how. I tried:

<img src="images/cover.jpg" height="800" width="600" />

However the images is now not centered in the web browser and it affects how it looks on Kindle too. What's the correct translation from svg to img? These are not svg images anyway.

Keroberos
02-14-2012, 09:45 PM
You need to center the image using CSS. I would do something like this,
<div class="center"><img src="images/cover.jpg" height="800" width="600" /></div>
in your XHTML.

And this,
.center {
text-align:center;
}
in your CSS.

codrutoctavian
02-15-2012, 04:58 PM
Thanks, it worked like a charm :)

KLUTCH
02-23-2012, 12:09 PM
Here is a good example of a clean cover page.

<?xml version="1.0"?>
<!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-US" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title></title>
<style>
.sjfixer { margin: 0; padding: 0; text-align:center;}
</style>
</head>

<body class="sjfixer">
<p class="sjfixer"><img src="cover.jpg" alt="" height="100%" /></p>
</body>
</html>

Toxaris
02-23-2012, 03:53 PM
I personally use an image inside a SVG wrapper to resize the image proportionaly according to the screen size.

KLUTCH
02-28-2012, 09:21 AM
I personally use an image inside a SVG wrapper to resize the image proportionaly according to the screen size.

This isn't really a good idea. We fix hundreds of these a week because SVG title/cover pages will not display correctly on Kindle devices 1 - 3 :)

DiapDealer
02-28-2012, 09:53 AM
This isn't really a good idea. We fix hundreds of these a week because SVG title/cover pages will not display correctly on Kindle devices 1 - 3
I assume you mean they don't convert well to the Kindle format... since ePubs are mostly worthless on a Kindle anyway. ;)

Your point is taken, of course, but you can hardly condemn this fairly standard ePub practice without making the assumption that every single ePub is also a mobi source document.

So yes, if making a single (easily maintained) source document to use for ePub and MOBI is high on your list of priorities, then it's best to not use the SVG wrapper. Otherwise... there's absolutely no reason not to use it in an ePub.

Toxaris
02-28-2012, 03:49 PM
This isn't really a good idea. We fix hundreds of these a week because SVG title/cover pages will not display correctly on Kindle devices 1 - 3 :)

No, it is a good idea. The quality of the cover is better and after all, I create an ePUB, not a mobi for Kindle.

JSWolf
03-01-2012, 09:54 PM
Use Calibre to make the Mobi. Then you won't have to change the cover XML.