Type 2 on External SVG

We demonstrate the use of Type 2 on an external SVG. The image is the official logo for the SVG available from the W3C website.

Of note here is that the logo makes extensive use of the SVG grouping feature, g, and through event propagation the g elements will receive the mouse events of any child. When any child element receives a mouseover event, so does the g element, and on mousewheel up the entire group is selected, not the individual elements, which may or may not be desired. This is most noticeable on the letters SVG, where a mousewheel up on any of these letters will select all the letters, as well as the containing box.

Using an external SVG can be problematic as the normal ways of importing an SVG (embed, img, object or iframe) do not expose the SVG's DOM for use. For this implementation we use the d3 API to read in the SVG as an XML file, which is then used to dynamically construct an inline SVG using .importNode (which may not be a cross-browser solution). This gives us full access to the DOM and once the import is complete we can proceed as before.