MobileRead Forums - View Single Post

Kayto · 01-23-2013, 05:53 PM

I have a problem with image scaling using svg. I have an ebook that was sent out to an ebook conversion company and came back with this coding:

(Anonymized)
<body>
<div>
<svg:svg viewBox="0 0 1200 1600">
<svg:image xlink:href="../images/xxxxx.jpg" transform="translate(0 0)" width="1200" height="1600"/>
</svg:svg>
</div>
</body>

The problem is enlarging the cover image to fit the screen of an e-reader. Currently it appears on an e-reader in the centre of the screen with about 25% white space above and below it.

I think the enlargement problem stems from the element description ‘svg’. The picture shows up but I can’t seem to resize it. It's as if it's locked in its size. I’ve tried adjusting the width and height specs to percentages as well as larger values, but to no avail. I’ve also tried to enlarge the image by adjusting the specs of ‘svg’ on the css page. Again, to no avail. I tried a different route altogether in which I removed the svg coding and inputted the image using the <p></p> element (as done successfully with other cover images), but then lost the image outright. The link to the image file is intact and working, so I’m not sure where I’ve gone wrong.

Ideally, I’d like to keep the svg formatting and be able to enlarge the image within it, as this will allow the cover image to conform to a multitude of e-reader screen sizes. (Right?)

If it's of any use to know, I'm using Oxygen to work the epub file.

Any advice re: svg formatting is appreciated. I'm pretty new to the lingo and definitely not well versed in svg jazz.

01-23-2013, 05:53 PM	#1
Kayto Member Posts: 18 Karma: 10 Join Date: Jan 2013 Location: British Columbia, Canada Device: Android cell phone, iPhone using Bluefire on both	Scaling up an image via SVG I have a problem with image scaling using svg. I have an ebook that was sent out to an ebook conversion company and came back with this coding: (Anonymized) <body> <div> <svg:svg viewBox="0 0 1200 1600"> <svg:image xlink:href="../images/xxxxx.jpg" transform="translate(0 0)" width="1200" height="1600"/> </svg:svg> </div> </body> The problem is enlarging the cover image to fit the screen of an e-reader. Currently it appears on an e-reader in the centre of the screen with about 25% white space above and below it. I think the enlargement problem stems from the element description ‘svg’. The picture shows up but I can’t seem to resize it. It's as if it's locked in its size. I’ve tried adjusting the width and height specs to percentages as well as larger values, but to no avail. I’ve also tried to enlarge the image by adjusting the specs of ‘svg’ on the css page. Again, to no avail. I tried a different route altogether in which I removed the svg coding and inputted the image using the <p></p> element (as done successfully with other cover images), but then lost the image outright. The link to the image file is intact and working, so I’m not sure where I’ve gone wrong. Ideally, I’d like to keep the svg formatting and be able to enlarge the image within it, as this will allow the cover image to conform to a multitude of e-reader screen sizes. (Right?) If it's of any use to know, I'm using Oxygen to work the epub file. Any advice re: svg formatting is appreciated. I'm pretty new to the lingo and definitely not well versed in svg jazz.