SVG is an XML standard, and as such is rather verbose. All attributes are named, and have to be specified in each command (unless the defaults are overridden with CSS, which is not easily done in a portable way for inline SVG). This makes it rather tedious to write SVG documents by hand. Generating the SVG commands with built-in JavaScript functions is possible, but even more verbose. ASCIIsvg provides intuitive and short commands for most common SVG constructs.
The coordinate system for SVG is the standard one for page layout, with the y-values increasing down the page. This is not compatible with the standard mathematical cartesian plane, and makes it pedagogically difficult to use SVG as part of mathematics and science classes. Of course the required transformation is trivial, but it is conceptually advantageous to hide it from the user. This can be done with and SVG transform attribute, but with the unintended result that text is also rendered upsidedown.
Currently inline SVG in multiple browsers is quite limited and works mostly with XML files. However the inline aspects are required for use in wikiservers and course mangement software. With ASCIIsvg most of the limitations are circumvented, and the dynamically generated SVG also works in the more familiar HTML files.
SVG is a declarative language that does not have variables. When descibing diagrams, it is useful to use variables for the positions of points so that the point and all its attached lines can be moved simply by reassigning different coordinates to the variables. In addition, diagrams often have parts with a regular structure that is best described algorithmically, e.g. by a compact JavaScript loop. This also makes it conceptually easier to produce animations and interactive diagrams. The declarative animations defined in standard SVG are certainly a powerful and convenient feature, but the crossbrowser support is currently still lacking.
What is the src="d.svg" doing in the < embed> tag?
This file is used by the Adobe SVG viewer plugin as a target for the dynamically generated SVG elements. Although the Adobe plugin also allows inline SVG (in Internet Explorer) this approach lacks some functionality (e.g. interactive zoom, and dynamic object creation don't work).
Why does the pointer-tracking in Mozilla/Firefox only work sometimes (initially)?
This affects only the interactive examples. It appears to be difficult to get exact pointer positions relative to the SVG canvas, so the pointer position is callibrated by an invisible frame around the SVG canvas. The frame triggers four different onmousemove events (depending on which side of the frame the pointer moves over), and this information is used together with the clientX (clientY) attribute to get the relative pointer position. Thus the pointer has to move (slowly) over both a horizontal and a vertical part of the canvas edge before the exact position of the pointer is known. Please let [me] know if you are aware of a more reliable/simpler way to read the pointer position (relative to the SVG canvas) in SVG enabled Mozilla/Firefox.
How does one do ...
Feel free to add other questions that you encounter.
Any hope of using ASCIIMathML in an ASCIIsvg script?
(I realize that SVG doesn't support MathML at the moment, but it does let you use arbitraty unicode glyphs and arbitrary text offsets, so it's at least conceivable that you could use the same syntax to generate output that looks the same...)
Workaround: Combining the tools by Peter Jipsen and Walter Zorn gives the possibility to implement mathematical formula into graphics. For a demo look at http://www.pieperu.de/mathmlgraph/ - Uli
When printing, the picture is not printed. -- Phk
Problems with text (more than 1 letter)
I had a problem, when I wanted a text-output of a String with length>1.
It works if I change 2 lines in ASCIIsvg.js
Line 389 in function text(p,st,pos,id) {...
node.setAttribute("x",Math.floor(p[0]*xunitlength+origin[0]+dx));
node.setAttribute("y",Math.floor(height-p[1]*yunitlength-origin[1]+dy));
(The Installation of Adobe SVG View 3.01 instead of 3.0 solves the Problem, too!)
Problem with aciisvgsample.html
My Computer didn't accept: rect([0,0],[2,2],null,.5,1)
No Problems with: rect([0,0],[2,2],0,.5,1)
(The Installation of Adobe SVG View 3.01 instead of 3.0 solves the Problem, too!)
Thanks for noticing this strange behavior and promptly coming up with a solution. I have only tested the code with 3.01, so it completely escaped my attention. I'll add the required version number to the link on the homepage. -- Peter
Thanks for your great tool! Since I installed SVG 3.01 I didn't have Problems anymore. -- Uli