Develop Reference

Zooming SVG is blury or pixelated, not sharp

vI know to some extent this is a known issue that has been asked here but never answered, but I'm hoping for some additional insight.
I have a simple SVG image in a div on a web page. I want to be able to zoom the image using pinch gestures and have the SVG render sharply. It doesn't need to be sharp during the zoom, but should be sharp after the gesture is complete.
I'm doing my testing on a Windows 8.1 computer with a touch monitor, on an iPad, and on an old Android Galaxy Tab. On the main computer, I'm using IE11 and Chrome. For handling touch gestures, I'm using Hammer.js. I'm doing the zooming by modifying the transform CSS using the jQuery css() function (I'm setting scale3d and translate3d).
IE11 on my computer works exactly like I would like it to. It keeps the SVG image sharp throughout the pinch zoom and the image is always sharp regardless of when I set the CSS.
Chrome on my computer always renders the SVG blocky when I am zoomed in using pinch zoom. It is blocky during the zoom and does not get sharp afterwards. If I add a call to zoom the image after the page (x13) is loaded, the image is sharp. If I use a setTimeout() call to reset the zoom and then rezoom the image after the pinch zoom ends, the image is sharp.
On the iPad and Android tablet, the SVG never renders sharply, regardless of when I zoom it in code.
Does anyone have any ideas of how to reliably end up with a sharp rendering of SVG after a pinch-zoom is completed? Does anyone have a better solution? Using the SVG viewBox to zoom and pan during the gesture does not provide good enough performance for our more complex SVG images. I'm thinking of attempting to use the hardware accelerated scale3d/translate3d during the gesture and then attempt to convert this to new SVG viewBox settings afterwards, but this is a challenge and I'm not sure panning will work correctly after this is done. Any pointers or ideas are greatly appreciated.

Having just tried to answer your other SVG Question I will have a try at this one.
Michael Mullany is spot on that GPU translations will never give you a sharp image. This is because the GPU just maps one array of pixels to a new one. Because it has no concept of lines or rectangles the resolution is set by the time the GPU gets the image. The CPU will always struggle to re-render in time for a smooth drag.
What happens to allow some browsers to produce a sharp image is they do clever manipulations like rendering more pixels than they need so some zooming can happen without loss of resolution. These however are completely inconsistent and just not possible to rely on.
The as I see it 'correct' solution is to translate and zoom with hardware accelerated transformations during a pinch or zoom and then to refresh the viewbox with no css transformation when the translation has finished.
Challenges to overcome are
The css transformation will use screen coordinates but the viewBox manipulation will use the SVG coordinate system.
There are browser inconsistencies in both screenCTM and device pixel ratio
limits so that people don't drag or zoom too far need to be calculated in both systems
Pinch centerpoints also need to be calculated in both
To improve performance further the css transforms will be wrapped into updating on the requestAnimationFrame loop.
My working solution is hammerhead2. I am concentrating on desktops and android mobiles first and it seams to be working for them. To simplify the problem zoom is always centered to the screen center. I do however thing this is currently one of the only solutions. Here is an example of it working.

Scaling and touch interaction on Retina screens

I have a problem similar to one described in the following questions.
KineticJS : scaling issue while using custom clipFunc on 2x pixel aspect display
In my application: (please try on retina ipad vs normal ipad or desktop browser, even iOS simulator would also do)
There is are two canvas layers, one of them contains a blanket group that I scale with pinch-zoom gesture in the range of 0.5x to 1.5x
On the retina screen my canvas gets zoomed out to 1/4 the screen when at 0.5x
Now, with the change suggested in the comments, I managed to make it scale it properly however touch events are no longer scaled accordingly. Any ideas whats going on here?
Note that it is working perfectly on non-retina screens.
Am using KineticJS 4.4.3 - as its was an academic project that began early this year for proof-of-concept and now I'm continuing it to make a complete application.
Thanks!

My problem got solved after I upgraded to KineticJS 4.7.4
It however broke the clipping code I had as clipFunc was deprecated but that's a different issue which was resolved by resetting clip parameters on dragmove event.
Not an efficient solution but it works for now!

iPad running iOS5 loads large image with smaller dimension

I'm building a multiplatform HTML5 canvas game with EaselJS (although I tested without using this library and the problem persists);
I'm loading an image in that is 1280 x 1800 and then rendering it to the canvas.
This runs as expected on all devices except the ipad 1st gen running iOS5.
It loads and draws the image to canvas at 640x900...
I alerted Image.width with a result of 640, so I don't think it has anything to do with the actual rendering to canvas but rather limitations to image size with iOS5?
As a work around I am scaling the image up, so it just appears lower quality on this particular device, but I'm looking for a solution or at least explanation of why this is happening!
here is an example of the problem:
http://kokodev.co.uk/ipadcanvasimageproblem/
I also connected the iPad to the xCode organizer console to see if it reported any errors or memory warnings, but it did not!

iphone/ipad large canvas vs small canvas + div animation

Since I dont have either of these devices handy to test, which method would be faster on an iphone/ipad?
One large canvas (overlayed over a bg of the same size), that is cleared, and has new pixel data drawn to it each frame, at a certain position
or
A small canvas that updates each frame, contained in a div that is animated across a background

As it turns out iphone/ipad aren't even capable of running this small animation either way. I will have to look at alternative solutions for mobile/tablet devices.

Yes, I've found the iPhone too slow in all my canvas experiment.
Even moving a simple div around (CSS3 styled, no canvas) is barely accettable ( my test with the new motion API: http://www.omiod.com/i.htm )

Web: solution for image rotate and zoom

I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.

I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...

For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).