SVG to rotate image

[AlanHK]

I have no real understanding of SVG, I use plugins to generate SVG wrappers for images and then place it.

One thing I often do with landscape mode images (e.g., maps) is to to rotate them 90% so they can be larger on the page -- I assume it's being read on a Kindle or other tablet so you can just turn it in your hand.

It''s easy to rotate the image losslessly in Irfanview, but I wonder if I can import the image in normal orientation and use SVG to rotate it? Would make managing or revising the image easier.

[jackie_w]

Originally Posted by AlanHK

... but I wonder if I can import the image in normal orientation and use SVG to rotate it? Would make managing or revising the image easier.

I don't know about using SVG to do the rotation but the calibre Editor has a 'rotate image' tool. Clicking it rotates it 90-degrees at a time.

[AlanHK]

Originally Posted by jackie_w

I don't know about using SVG to do the rotation but the calibre Editor has a 'rotate image' tool. Clicking it rotates it 90-degrees at a time.

I guess that changes the image file. I know how to do that; I want code to display rotated.

[Turtle91]

You could mess around with the TRANSFORM options, but I don't think there will be much, if any, support for that...especially with ePub2.

Check out this thread for a discussion on why its not even worth it with a reflowable epub and devices that autorotate - and zoom into the image with a tap.

[AlanHK]

Originally Posted by Turtle91

Check out this thread for a discussion on why its not even worth it with a reflowable epub and devices that autorotate - and zoom into the image with a tap.

Matter of opinion. Anyway, there are devices that don't autrotate (like Kindle) or you can turn it off. I usually do.

Originally Posted by Turtle91

You could mess around with the TRANSFORM options, but I don't think there will be much, if any, support for that...especially with ePub2.

Which is why my question is about how to do it in SVG. But it seem not a lot of SVG coders here.

[jackie_w]

Originally Posted by AlanHK

Which is why my question is about how to do it in SVG. But it seem not a lot of SVG coders here.

I seem to remember that MR member RbnJrg knows a lot about SVG and epub. If he doesn't see this thread it might be worth PM-ing him. He's usually very helpful about sharing info.

[signum]

Originally Posted by AlanHK

But it seem not a lot of SVG coders here.

I've fooled around with some SVG transforms before. The short answer to your question is Yes, you can rotate images using just SVG. You can also scale, skew, translate and possibly reflect the image to somewhere else in the viewport. The image could be a jpg, png, geometric primitive such as rect, text, most anything. Look up a reputable tutorial on SVG, especially transforms, and see what you can come up with.


A couple things you must not forget: 1) The viewport defines a virtual "canvas" with left-hand coordinates (meaning simply that the origin is in the UPPER left corner, instead of the BOTTOM left corner), which often corresponds to pixels, but it doesn't have to. All transforms are performed on this canvas. Actual screen pixels aren't assigned until SVG finishes its job. 2) rotations are done about the (0,0) point of the canvas. You will probably want to translate the center of you image to (0,0), do the rotation, and then back-translate it to where it came from.

[RbnJrg]

Originally Posted by jackie_w

I seem to remember that MR member RbnJrg knows a lot about SVG and epub. If he doesn't see this thread it might be worth PM-ing him. He's usually very helpful about sharing info.

Thank you very much kind lady. The OP could read with advantage the items in the following site:

http://tutorials.jenkov.com/svg/index.html

and regarding "transformations", this page:

http://tutorials.jenkov.com/svg/svg-transformation.html

But the best way to proceed while one is not acustomed to work with SVG images, is to download Inkscape and play with it.