ASCIIsvg.js (ver 1.0): Simplified Scalable Vector Graphics via JavaScript (HTML version)

Would you like to easily produce good-looking diagrams on webpages using simple commands to describe your picture?
Here is a free solution that works with Internet Explorer + Adobe SVGviewer, as well as SVG enabled Mozilla/Firefox.

This is the main page (HTML version) for the ASCIIsvg.js script which makes it easy to describe pictures on webpages using standard mathematical coordinates. The JavaScript code is currently less than 400 lines.

This page requires Internet Explorer 6 + Adobe SVGviewer or SVG enabled Mozilla/Firefox.

ASCIIsvg.js is freely available under the GNU General Public License. You can get your own copy from the ASCIIsvg.js download page. The script works with both HTML and XML webpages, but in the latter case it requires exactly the right header information. The homepage for the XML version is in preparation (asciisvg.xml).

If you use it on a webpage, please send me an email at jipsen@chapman.edu with the URL so that I can add a link to it on the users page. (Also send me an email if you have problems or would like to provide some feedback.) I'm currently using ASCIIsvg and ASCIIMathML on a Wikiserver for interactive lecture notes.

Here are some example static pictures produced with ASCIIsvg.js
Be sure to also check out the interactive pictures in the ASCIIsvg Gallery

<script>
function spiral() {
  initPicture("spiral",-10,10,-10)
  axes()
  stroke = "red"
  p = []
  with (Math) 
    for (var t = 0; t < 10.01; t += 0.05)
      p[p.length] = [t*cos(PI*t), t*sin(PI*t)]
  path(p)
}
</script>

<script>
function cubic() {
  initPicture("cubic",-2,2,-2)
  axes()
  stroke = "blue"
  p = []
  with (Math) 
    for (var x = -2; x < 2; x += 0.1)
      p[p.length] = [x, (x+1)*x*(x-1)]
  path(p)
}
</script>

<script>
function octagon(){
  initPicture("octagon",-1,1,-1)
  marker = "dot"
  a = []
  with (Math) 
    for (var i = 0; i < 9; i++)
      a[i] = [cos(PI/4*(-1)*i+PI/2), 
              sin(PI/4*(-1)*i+PI/2)]
  path(a)
  path([a[0],a[3],a[6],a[1],a[4],a[7],a[2],
a[5],a[0],a[4],a[5],a[1],a[2],a[6],a[7],a[3]])
}
</script>

<script>
function circleangles(){
  initPicture("circle",-1,1,-1)
  circle([0,0],1)
  a = [-.6,-.8]; b = [.6,-.8]
  stroke = "blue"
  path([a,[0,0],b])
  stroke = "red"
  path([a,[-1,0],b,[-.8,.6],a,[0,1],b,
        [.8,.6],a,[1,0],b])
}
</script>

<script>
function drawPicture() {
  spiral()
  cubic()
  octagon()
  circleangles()
}
</script>

If you are familiar with SVG, you can appreciate that this JavaScript interface is a bit simpler. The commands and the coordinate system are closer to standard mathematical usage, and the pictures are easier to describe and modify (even dynamically) with the use of variables.

Of course most of this can be achieved quite efficiently with pure SVG, but the overhead for the user is considerable. This makes it difficult to incorporate SVG into standard math and science classes. ASCIIsvg aims to make it possible for students to produce their own mathematical diagrams on webpages.

Here is a description of the ASCIIsvg.js commands.