SVG Web JavaScript Library

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(&quot;font-family&quot;, &quot;sans-serif&quot;);
text.setAttribute(&quot;font-size&quot;, &quot;40&quot;);
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(&quot;svgSvg&quot;);
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>

return to main page