Last Update: 27 May 2003

This document is based on **a talk
at the SVG Open 2003 -
Vancouver**. It contains graphics written in
**SVG format** and in
order to be fully accessible to the reader, it should be viewed by
a browser able to display SVG. As an example "Internet Exporer"
needs a plugin e.g. "Adobe SVG
Viewer" that can be downloaded for free.

**The aim** of this
document is to present to **the
SVG-developers' community** some application of SVG
graphics for science education. **It
aims also the educators of science** by showing them
applications of the recent SVG graphics technique that undoubtebly
could boost the teaching abilities.

About three years ago I decided to work on a **teachware project of mathematics intendent for
freshmans of science**. Beeing physicist myself with
teaching experience of more than 30 years, it looked to me very
attractive to develop **a teaching tool
that can be open with a web-browser** not only for
text and graphics, but also for showing animations
and interacting with the user. Animated applets
were new at that time, but their teaching potential was immediately
recognised and I intended to make an ample use of them.

A year ago I **was introduced to SVG and
became immediately and unconditionally a fan of it**. It has all
the necessary properties of what I could dream of for my project. I
am still a novice in the subject and the animations I am presenting
are lacking for instance interactivity, but even so, I've got so
far a very warm and encouraging response from my friends,
collegues and students.

The document contains the following sections:

**"A curve expressed as a Bezier path"**confronts the problem of how any two dimensional curve expressed mathematically can be presented graphically with SVG.**"Animations"**contains animations belonging to three different subjects of simple calculus.**"Conclusions"**presents my personal view, hope and thanks.

**An open source double precision Java
program** uses the
Quadratic Bezier-Casteljau method for convenient expression of
two dimensional curves. **Details and
an example** are given at the website http://alzt.tau.ac.il/~dagan/tools/Bezier2/readMe.html.

For seek of completness here are the main points:

- The curve to be approximated as a chain of Bezier quadratic curves (a "path" in SVG terms) should not have different points with the same value of the derivative.
- The user should supply the coordinates of the end points of the curve and also the derivatives there (derivative with infinite value is acceptable).
- The user should supply the maximal allowed deviation (in "user units" by SVG terms) of the Bezier "path" from the curve. This value defines the necessary accuracy and is used by the program for terminating the approximation procedure.
- The user should supply a coded Java program ("method" in Java terms) that calculates the point on the curve for a given value of the derivative.
- When the approximation is achieved, the program outputs the "path" ready to be plugged in the SVG code.

Since for many people Java is not their cup of tea, but they use a different program language, here is a detailed presentation of the algorithm used, so they could apply it on a different platform. Each link of the present section that follows leads to an SVG file dispalyed in a separate window. It is recommended to expand the window to a maximum.

**Some properties of Quadratic-Bezier**which are used for the algorithm.**The algorithm applied on an elliptical arc**shows a detailed two step procedure. An ellipse was chosen for the demonstartion, since an ellipse could be generically represented by SVG.**Evaluation of the error**shows how the maximal allowed deviation of the approximated curve from the real one is used for terminating the approximation procedure.

This section contains examples intended to be used in the teachware project. Each one includes animated graphics usind SVG. As known "One picture is worth a thousand words". It is a well known fact that a suitable illustration sometimes can make understandable a very complicated and difficult descriptions. From my experience I would dare say that "One animation is worth a thousand pictures". I hope that the examples given here will illustrate that point.

As in the previous section each link that follows leads to an SVG file dispalyed in a separate window. It is recommended to expand the window to a maximum. Each one of the links is related to a different subject of simple calculus. One have to follow any additional link that appears in a SVG file itself.

**Inversion of coordinates**shows what kind of transformation is necessary in order to invert a planar rectangular coordinate system.- The
**first animation**shows that a simple rotation in two dimensions is not enough. - The
**second animation**shows a three dimensional rotation around a diagonal axis (of the plane) that performs the required inversion. In order to achieve the visual effect, SVG uses two static rotations and an animated scale transformation applied simultaneously. - The
**third animation**shows a two-dimensional mirror transformation that also solves the problem of inversion. The effect is achieved in SVG by animated stroke-opacity.

- The
**Measurement of the derivative**uses a cubic function (Bezier cubic path) with a minimum, a maximum and three roots as basis for the presentation.- On the
**first stage**the tangent line of the curve is animated by use of auto-rotated animateMotion. - On the
**next stage**a none-rotated grid is added to the animated tangent that allows the measurement of its slope, which is equivalent to the value of the derivative, at any point of the curve. **Finally**the analytically calculated derivative is plotted and compared to the measurements performed in the previous stage.

- On the
**Cycloid**is a curve that can be expressed only in a parametric form. The curve is obtained by the motion of a point at the circumference of a rolling wheel without sliding along a straight line.**At first**the motion of the point is shown by use of simultaneously applied animated rotation and translation.- On the
**next stage**the actual curve of the cycloid, obtained by use of the program described in the previous section, is superimposed. One can actually observe the accuracy of the approximated curve. **Finally**the wheel's motion is stopped and the parametric form of the curve is derived.

**SVG is going to revolutionize the
education of sciences**:

**The graphics is scalable**. Zooming in and out are very important educational features.**The graphics is versatile**. One can draw any shape.**The animations are smooth**, in contrast to the "Applets" previously used.**The animations are versatile**. Animation of any component seems feasable.**The presentation capabilities are excellent**, comparable to "Power Point".**It requires very limited space**. Takes short time for loading.**It is user friendly**. Easy to code and debug.

**SVG is here to
stay** in view of the unprecedent involvement of many
software companies in SVG. Even Microsoft is showing interest.

**My thanks to "Adobe"**
for enabling us to view and appreciate the beauty of SVG.