<svg> to <img>

codrutoctavian · 02-14-2012, 07: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, 08:45 PM

You need to center the image using CSS. I would do something like this,

Code:

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

in your XHTML.

And this,

Code:

.center {
	text-align:center;
	}

in your CSS.

codrutoctavian · 02-15-2012, 03:58 PM

Thanks, it worked like a charm

KLUTCH · 02-23-2012, 11:09 AM

Here is a good example of a clean cover page.

Code:

<?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, 02: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, 08:21 AM

Quote:

Originally Posted by Toxaris

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

Quote:

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, 02:49 PM

Quote:

Originally Posted by KLUTCH

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, 08:54 PM

Use Calibre to make the Mobi. Then you won't have to change the cover XML.

02-14-2012, 07:06 PM	#1
codrutoctavian Enthusiast Posts: 37 Karma: 10 Join Date: Jul 2009 Location: Bucharest, Romania Device: Kindle 3	<svg> to <img> 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.

02-14-2012, 08:45 PM	#2
Keroberos Zealot Posts: 128 Karma: 238654 Join Date: Aug 2009 Device: Kobo Mini (4GB), Nook Classic wi-fi, iPod Touch (Bluefire Reader)	You need to center the image using CSS. I would do something like this, Code: <div class="center"><img src="images/cover.jpg" height="800" width="600" /></div> in your XHTML. And this, Code: .center { text-align:center; } in your CSS.

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
grab the big-ones (img)	schuster	Recipes	8	05-19-2011 02:09 PM
<img longdesc=	traskilajussi	EPUBReader	3	02-23-2011 08:15 AM
vfat.img	pewterbot9	enTourage Archive	11	12-29-2010 06:41 PM
Can you decompile an IMG file?	Nate the great	Android Devices	3	06-06-2010 07:37 AM
PRS-900 Help! Who can help me to pack the opt.img	alansuyalun	Sony Reader	5	05-08-2010 09:25 PM

02-15-2012, 03:58 PM	#3
codrutoctavian Enthusiast Posts: 37 Karma: 10 Join Date: Jul 2009 Location: Bucharest, Romania Device: Kindle 3	Thanks, it worked like a charm

02-23-2012, 02:53 PM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	I personally use an image inside a SVG wrapper to resize the image proportionaly according to the screen size.

03-01-2012, 08:54 PM	#9
JSWolf Resident Curmudgeon Posts: 73,845 Karma: 128597114 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Use Calibre to make the Mobi. Then you won't have to change the cover XML.