ASCIIsvg.js (ver 1.2): 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 3.01, as well as SVG enabled Mozilla/Firefox.
ASCIIsvg is also used in David Lippman's SVG Grapher

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 500 lines.

This page requires Internet Explorer 6 + Adobe SVGviewer 3.01 or higher 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. 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 examples of static pictures produced with ASCIIsvg.js. If you copy the <embed ...> tag on the left into a HTML page that also loads the ASCIIsvg.js script, then the picture on the right appears on the page -- it's that simple!
Be sure to also check out the Demo / Editor (runs locally in your browser!) and the interactive pictures in the ASCIIsvg Gallery 


Parametric spiral







A graph of x3-x










A discrete graph








A circle theorem




blue ang = 2*red ang











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.



Acknowledgements: Many thanks to the numerous people who have
contributed to the excellent SVG 
standard. Without such a
well designed standard, a project like this would be much more difficult.


Thanks to the volunteers who implemented SVG in Mozilla/Firefox.
Let's hope it will soon be available by default.


Thanks to Adobe for producing the superb
SVG viewer plugin and making it freely available.


Finally, thanks to the designers and implementors of JavaScript. All
these tools work together fairly seemlessly to allow us to generate
nice pictures on webpages in a convenient and inexpensive way.