intertwingly

inline SVG flag demo

Same source works on MSIE 7.0/with Silverlight on WinXP, Firefox 2.0.0.3 on Ubuntu, and Opera 9.20 also on Ubuntu.

• It took a while to peel away the layers in this quickstart to get to the core.  createMySilverlightControl calls a createObject function with a large number of parameters.  createobject is defined here, and copies the bulk of the parameters to a new slPluginHelper object and then calls buildHTML with that object.  buildHTML builds a string using those parameteters, which is ultimately inserted into the (global!) parentElement.innerHTML.  If you don’t need all the parameters, everything reduces down to the following:

  var embed = document.createElement('embed');
  embed.type = "application/ag-plugin";
  embed.source = '...';
  embed.width = svg.width;
  embed.height = svg.height;
  parentElement.innerHTML = embed.outerHTML;

• Simply creating the embed element and appending it as a child doesn’t cause it to be executed, it must be converted to a string and assigned to an innerHTML attribute.  This is a recurring theme, as the way to create Silverlight objects is via CreateFromXaml.

• I figure that instead of creating a large number of small objects via CreateFromXaml, one might as well do it all at once, and the nifty text/xaml script element does the trick:

  var script = document.createElement('script');
  script.type = 'text/xaml';
  script.id   = '...';
  script.text = canvas;
  parentElement.parentNode.insertBefore(script, parentElement);

• It turns out that IE flattens all the data from the inline SVG element.  There are separate sibling SVG and /SVG elements, with all the intervening nodes placed in between these two.  One can even detect empty tags, so all the necessary information is in place to reconstitute the tree.  One minor issue that needs to be worked around: not only don’t these nodes have any children, they produce errors if you try to add children.  This means that all parent nodes must be replaced with new objects which are capable of having children.

• Finding Silverlight equivalents of all the SVG objects looks to be the most straightforward but time consuming (given the number of objects in question) part of this effort.  At this point, there is only a very modest beginning... one element and two attributes.

• Eventually enough namespace support will also need to be added in order to recognize xlink attributes.