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.

Interactors

SVG object

Details

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:

• Rotation, introduced in SVG Tiny 1.2, (currently) only works in Opera
• Most Internet Explorer plug-ins don't (yet) support the required interfaces

Works with (and know caveats, if any):

• Firefox 3.0.11 and 3.6a1pre
• Opera 9.64 and 10.00b2
• Chrome 3.0.191.3
  • weird behavior with zoom and navigation
• Safari 4.0.2
  • weird behavior with zoom and navigation
• IE 8.0.6001 + ASV 3.0.3 and 6.0b
  • link replaces the whole canvas
• IE 8.0.6001 + Renesis 1.1
  • link replaces the whole canvas
• IE 8.0.6001 + SVG Web r877
  • link replaces the whole canvas

Doesn't work with (and reason):

• IE 8.0.6001 + GPAC 0.4.6
  • the required interfaces (to fetch the SVG document's DOM) aren't available
• IE 8.0.6001 + Renesis V3b
  • the required interfaces (to fetch the SVG document's DOM) aren't available
• IE 8.0.6001 + CSV 2.1
  • the required interfaces (to fetch the SVG document's DOM) aren't available
• IE 8.0.6001 + Ssrc SVG 1.9.1
  • issues with SVG embedding

To be done (potential improvements):

• File issues (or link to existent ones) for the missing interfaces in unsupported/broken implementations
• Take a look at SVG Web's zoom and pan implementation
  • see issue 291 which tracks SVG Web progress on this
• Respect the zoomAndPan attribute whenever specified in the SVG document
• Integrate a Batik-based applet viewer as fallback
  • use a similar approach to what's being done with SVG Web for Internet Explorer
• Improve behavior by not using absolute values for zoom and pan
  • calculate step using document dimension and viewport size
  • use the viewport's center point as zoom/rotate center
• Improve script logic
  • rework to use try/catch blocks instead of the attempt to detect all needed objects/APIs
  • avoid lots of redundant object/properties look-ups by using local variables (currently, the code's focus is on being easily read and understood)

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