Shape Type
Canvas
Click on Shape for Details



Scriptbridge Blendup

A single SVG document can be referenced multiple times within a hosting HTML document, and each instance will have its own DOM and scripting context, in addition to the scripting context of the host document. Using Javascript, it is possible to communicate between the HTML hosting document and each of the SVG document instances. Mixing different document types in this way is commonly referred to as a "compound document", and when script or declarative links are used to make them interoperate with one another, I call it a "blendup" (like a mashup, but with multiple type of documents and intercommunication between them).

Setting up the script context, which I refer to as a "scriptbridge", is very easy (just view the source), though currently you have to use a couple of different methods to nail it down. Once the scriptbridge is established, you can call functions in the SVG scripting context from HTML, and vice versa. Through the HTML host document, you can even communicate between different instances of the same SVG document, as demonstrated in the example above. Here, the user can select a shape type and a target canvas (SVG instance) to insert the shape into, using an HTML form. Each instance receives the function call, and dynamically generates a random shape of the right type; if the same command is sent to both instances, each will still create a unique element with its own random characteristics. Clicking on any shape send that shape to the HTML scripting context, where the details of the shape are displayed, and the shape is can optionally be inserted into the other SVG document instance.