SVG Object - HTML Canvas Interactors

Demonstration of HTML-based interactors manipulating a SVG document. Please check the details and/or view source if you are curious about the interns and/or feasibility of this approach.


Zoom Pan Rotation Reset

SVG object

Your browser can't display SVG. Please install Adobe SVG Viewer (plug-in for Internet Explorer versions below 9) or use Firefox, Opera, Safari or Chrome instead.


One common issue with SVG deployement is that many implementations have no user interface for internal navigation (zoom, pan and rotation). In addition, among the ones that do (Opera, ASV and SVG Web, as of this writing), the behavior and interaction (shortcut keys, context menu entries) aren't consistent.

Aside from the proposal to implement a stand-alone SVG holding interactor widgets (which was already demonstrated), one may want use the interactors within an separate environment: that's where this example kicks in and shows how simple it is to provide a (X)HTML+SVG solution for this caveat.

This was motivated by the already referred thread and was based in JWatt's sample on getSVGDocument (and correspondent part of the SVG 1.1 specification) and in the SVG Tiny 1.2 specification for the DOM interfaces. I've also based in a preliminary demo made to check the feasibility of this approach.

Few Thoughts:

Works with (and know caveats, if any):

Doesn't work with (and reason):

To be done (potential improvements):

Please leave comments and/or suggestions about this demo in my blog.