Ken Webb 2011-01-20T03:23:51Z
SVG Web is "a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari". It uses either the native SVG support built into the browser (for example Firefox), or it converts the SVG to Flash code for other browsers (including Internet Explorer.
A Xholon applet running in a browser window, can dynamically accept SVG specified as a JavaScript script. As an example, you can paste the following script into the Bestiary applet. Just select the text of one of the scripts on this page, copy it to the clipboard, paste the text into the console panel on the Bestiary page, and press the Submit button. The applet needs to be actively running (unpaused) for this to work correctly. The SVG image should appear near the top of the Bestiary web page.
<script implName="lang:BrowserJS:inline:"><![CDATA[ // circle var circle = document.createElementNS(svgns, 'circle'); circle.setAttribute('id', 'myCircle'); circle.setAttribute('cx', 30); circle.setAttribute('cy', 50); circle.setAttribute('r', 20); circle.setAttribute('fill', 'red'); circle.setAttribute('stroke-width', '1px'); circle.setAttribute('stroke', 'black'); // rectangle var rect = document.createElementNS(svgns, 'rect'); rect.setAttribute('id', 'myRect'); rect.setAttribute('x', 150); rect.setAttribute('y', 50); rect.setAttribute('width', 50); rect.setAttribute('height', 40); rect.setAttribute('fill', 'green'); rect.setAttribute('stroke-width', '1px'); rect.setAttribute('stroke', 'black'); // ellipse var ellipse = document.createElementNS(svgns, 'ellipse'); ellipse.setAttribute('id', 'myEllipse'); ellipse.setAttribute('cx', 290); ellipse.setAttribute('cy', 50); ellipse.setAttribute('rx', 50); ellipse.setAttribute('ry', 20); ellipse.setAttribute('fill', 'blue'); ellipse.setAttribute('stroke-width', '1px'); ellipse.setAttribute('stroke', 'black'); // text var text = document.createElementNS(svgns, 'text'); text.setAttribute('id', 'myText'); text.setAttribute('x', 120); text.setAttribute('y', 130); text.setAttribute("font-family", "sans-serif"); text.setAttribute("font-size", "40"); text.appendChild(document.createTextNode('Xholon', true)); // line var line = document.createElementNS(svgns, 'line'); line.setAttribute('id', 'myLine'); line.setAttribute('x1', 45); line.setAttribute('y1', 50); line.setAttribute('x2', 150); line.setAttribute('y2', 60); line.setAttribute('stroke', 'magenta'); line.setAttribute('stroke-width', 5); // put it all together var svgSvg = document.getElementById("svgSvg"); svgSvg.setAttribute('width', 350); svgSvg.setAttribute('height', 150); svgSvg.appendChild(circle); svgSvg.appendChild(rect); svgSvg.appendChild(ellipse); svgSvg.appendChild(line); svgSvg.appendChild(text); ]]></script>
The next script changes the fill color of the just-created rectangle.
<script implName="lang:BrowserJS:inline:"><![CDATA[ var el = document.getElementById("myRect"); el.setAttribute('fill', 'yellow'); ]]></script>