View Single Post
Old 01-23-2013, 06:53 PM   #1
Kayto
Member
Kayto began at the beginning.
 
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 cant seem to resize it. It's as if it's locked in its size. Ive tried adjusting the width and height specs to percentages as well as larger values, but to no avail. Ive 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 Im not sure where Ive gone wrong.

Ideally, Id 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.
Kayto is offline   Reply With Quote