Using IE HTML form elements with SVG

Version 1
10th June 2005.
Jim Ley, Jibbering.com

SVG is bad for input

Getting input to SVG applications is very difficult, yet SVG has many advantages for graphics rich applications, the lack of forms though are very limiting. Various forms in SVG solutions exist, but all suffer from the lack of native feel that normal forms give you.

The future

In the future, SVG/XHTML integration as is available on Opera 8, and mozilla alpha's may become a good viable solution. Mark Birbeck also has an XForms/SVG/XHTML etc. player available for trial called the sidewinder player which might provide an option. However if you don't want to wait for Opera/Mozilla to be ready, or don't want to learn XForms or put all your eggs in an early release of a new player based on immature technology, then basing your non-web applications around the IE renderer with Adobe SVG viewer is a good option for deployment today.

Because in ASV you can interact with the HTML document that hosts ASV - when your content is handled by a plugin in IE, it wraps it in an HTML page, there's always an HTML page in IE. This means you can create HTML elements such as forms in the page. There's one small problem, the ASV layer will always be on top of normal content, however iframes can go on top - so if you create an IFRAME, the contents inside it will appear above.

A simple example

I've prepared a simple example SVG document demonstrating the technique (remember this is an IE and ASV only technique for non public web use). The script is very simple, the script in the SVG document gets a reference to its hosted html document via parent.document, then you can use normal HTML DOM or IE DOM methods to add content, I use the handy IE extension insertAdjacentHTML to add the IFRAME and form.

<iframe style="position:absolute;top:10px;left:10px;width:100px;height:100px;z-index:10;border:0" 
   src="javascript:'
    <style>
      html, body { padding:0;margin:0;overflow:hidden;background-color:white; }
      form {border:1px solid black;height:100%;width:95%; }
      input {border:0px;width:95%}
    </style>
    <body onload=\'parent.callback(document)\'>
      <form><input type=text name=val>
    </form>'"
   frameborder=0 ></iframe>
Using javascript pseudo-protocols like this is a convenient shortcut that currently works well, but may be somewhat risky in the future as security of cross-protocol is always slightly dodgy and security patches can block it. Adding in the script function callback allows the script to access the newly created form, the callback can be implemented with a closures. Any HTML or even simply an HTML document can be added to the IFRAME, so as complex forms as can be expressed in HTML can float across SVG documents.

Worth it?

The techniques here are not as good as those provided in the more advanced players, but the tools in use, Internet Explorer and ASV, are very mature and stable, we know already how to make forms and everything in them. If you don't know XForms (so if your not a member the XHTML WG...) or are working on a windows standardised desktop, and your project is relatively short term, then this is a very viable proposition. Combined with HTA's or Zeepe you can also extend it to use any windows common controls rather than just HTML form elements, an example in a regular SVG doc is available but that only shows instantiation, as getting information out requires raised priviliges.

Useful for the transition

Until XForms and SVG 1.2 and XHTML or whatever comes next in the web world, these techniques are worth considering for your windows desktop applications that use web techniques. Of course if you're reading this in 5 years time, then I'm probably looking a complete muppet right now, if this page is old, ignore it!