SVG and Mathematics

For the SVG Open 2005 conference

Keywords: mathematics, SVG, education, elearning

Dr. Kelly Carey
Interim Dean, Career Programs and Workforce Development
West Valley College
14000 Fruitville Avenue


Kelly Carey holds a doctorate in Organizational Leadership from the University of San Francisco where she focused on critical hermeneutic theory. Kelly currently teaches in an educational doctorate program for the University of La Verne.

Dr. Stanko Blatnik
Director of Institute
Institute for Symbolic Analysis and Development of Information Technologies
Efenkova 61



Stanko Blatnik holds a doctorate in Theoretical Particle Physics from the University of Zagreb and spent decades writing, working, and teaching in Eastern and South Eastern Europe.


The authors began playing with SVG for mathematics animation, multilingual texts and two dimensional graphics a couple of years ago. Experimentation with this concept revealed SVGs simple editing capacity in relationship to ADA (American Disabilities Act) requirements for increased accessibility. For example: SVG color can easily be adjusted for color-blind audiences. Animation can be separated into two-dimensional graphics for ADD and ADHD students who struggle to follow animation. Audio can be added, in any language, to coincide with SVG animation. XML support for Braille-based user agents enhances accessibility for sight impaired students. In connection with MathML, SVG offers strength in web application development in the context of mathematics. We propose to present our experience in using SVG for K-12 mathematics education and in developing a commercially available open-source web application for a major education publisher

Table of Contents

1. Introduction
     1.1 K-12 mathematics education
          1.1.1 High School and College Level Mathematics and SVG

1. Introduction

Mathematics is undeniably an important discipline, but perhaps its role in education is overestimated. As Edward de Bono [Edward de Bono, 1998] wrote:

"In OECD countries, an average of 24 percent of the time in school is spent on mathematics. Of the mathematics taught, probably less than five per cent is of use in life, to most students. We do not need to spend all this time on mathematics in case a few students want to become engineers. As for the argument that mathematics trains the mind, if this was our purpose there are much more powerful ways of training the mind."

We believe the inefficiency is in the teaching mathematics, rather than the discipline itself. Students spend too much time on relatively simple concepts and fundamentals, and become frustrated when they cannot understand basic principles.

We believe there are ways to find the "royal way " to mathematics. In teaching mathematics you have the choice of two approaches, and associated technologies. The first approach is an older, traditional one where students make models by cutting paper or using sticks. The older approach is which is time consuming albeit efficient in teaching fundamentals, and particularly useful for tactile students). A second approach uses modern technology such as a computer, the Internet and SVG.

SVG is an ideal tool for the development of simple graphics with animation. It also has other advantages for the classroom: SVG is nonproprietary and in principle can be realized in accordance with accessibility requirements.

In this paper we shall describe our experience in SVG for K-12, high school and college mathematics education.

1.1 K-12 mathematics education

We believe that the cause of many problems in the development of educational products, especially for K-12 pupils, is the lack of serious user analysis [Carey, 2003]. User analysis typical begins with the following:

Despite these requirements authors are not asking the children what kind of product they like. In best cases the authors may talk with the teachers about pupils need. We all think that we know exactly what pupils need and the best way to deliver educational materials to satisfy these needs. A big mistake! There is a wide difference in culture and experience between pupils and people who are developing educational materials. There are several products that were tested in real environments when they are fully developed, however with the wrong starting point, lack of pupil user analysis, it is difficult to correct mistakes at a late phase of the projects Many of use are familiar with the process of user analysis when developing a commercial Web site. We would not hesitate to proceed without asking clients questions like:

Yet nothing similar happens when we develop educational products. Maybe the lack of user analysis is why we do not have popular products for educational software.

There are some exceptions that confirm the thesis that involving children early in development process can yield excellent results. Here is excerpt from Galdwell's book "Tipping Point"(Galdwell, 2002) where he explains the success of the Sesame Street:

To test the shows, Palmer took them to Philadelphia, and over the third week of July showed them to groups of preschoolers in sixty different homes throughout the city. It was a difficult period. Philadelphia was in the midst of a heat wave, which made the children who were supposed to watch the show restless and inattentive. Worst of all were the conclusions from Palmer's distracter. "What we found," Lesser says, "almost destroyed us."

The problem was that when the show was originally conceived the decision was made that all fantasy elements of the show be separated from the real elements. This was done at the insistence of many child psychologists, who felt that to mix fantasy and reality would be misleading to children. The Muppets, then, were only seen with other Muppets, and the scenes filmed on Sesame Street itself involved only real adults and children. What Palmer found out in Philadelphia, though, was that as soon as they switched to the street scenes, the kids lost all interest. "The street was supposed to be the glue," Lesser said. "We would always come back to the street. It pulled the show together. But it was just adults doing things and talking about stuff and the kids weren't interested. We were getting incredibly low attention levels. The kids were leaving the show. Levels would pop back up if the Muppets came back, but we couldn't afford to keep losing them like that." Lesser calls Palmer's results a "turning point in the history of Sesame Street. We knew that if we kept the street that way, the show was going to die."

In our experience we did not carefully test the users as in example above, but we asked pupils from K-12 schools what was difficult for them and how it can be improved. After that survey we concluded that as best starting point for the use of SVG would be to develop animation which will help pupils to understand the formulas used to calculate areas of different geometrical shapes.We developed several similar animations that help students in learning process, in response to their answers to our basic user requirements survey

1.1.1 High School and College Level Mathematics and SVG

At the high school and college level there are many opportunities to use SVG as a tool in the preparation of educational materials for mathematics. We will discuss two possibilities. using SVG's animation tools to elucidate complex problems not easily understood by students. There are several topics, for example many proof of theorems in the geometry, construction exercises in geometry, or different problems in the analytical geometry, which are much easier to teach using animated tools. Nice example is animation which simulates a geometrical solution of two equations with two unknown variables. Using random number generation different equations are generated and presented graphically. By selecting a crossing point students can also get a numerical solution.

A second possibility is even more interesting: The implementation of design-based learning system in mathematics.Edward de Bono wrote about it as follows:

"In education we are concerned with literacy and numeracy. That leaves out the most important aspect of all, which I call "operacy ". The skills of action are every bit as important as the skills of knowing. We neglect them completely and turn out students who have little to contribute to society.

In a stable world, knowledge of standard situations and the routine ways of dealing with then is sufficient. Not so in a changing world. Routines and category judgments from the past may be inadequate, misleading and dangerous. Instead of analysis and judgment, we need design. We need to be able to "design " ways forward.

Unfortunately, the traditions of education and the thinking culture of society make no provision for "design" - we see it as applying only to buildings, furniture and Christmas cards. This is a fundamental weakness, derived from the last Renaissance, which never encouraged innovation or design but believed that truth was enough. "

Because SVG is simple and based on mathematical expressions, it can be easily learned by students, so they can start to use SVG to construct shapes, coordinate systems and similar components of mathematics almost as fast as they learn the code. By changing parameters they can learn much faster about curves in analytical geometry or coordinate transformation than they can with paper, pencil or scissor. Mathematics may become more interesting if pupils are less frustrated with their learning tools. SVG is a good tool for more than problem solving. Students use their creativity to active contribute in the learning process. Our experience in teaching SVG showed that students enjoyed in this design-oriented approach.

We remain excited with the results achieved using SCG in the k-12 classroom and at the college level, but we are also aware that traditional approaches to mathematics education will not vanish overnight. However, we feel our results are so encouraging as to warrant further research and investigation into efficient learning systems. Accessibility

Because we want to use our learning software online, we want to quickly address the accessibility problem and SVG. The World Wide Web Consortium states that there are five types of disabilities that affect Internet usage:

As an XML-based language SVG can be used for the development websites which are accessible according to W3 Standards. Some accessibility problems can be easily solved using SVG, others are more difficult. For example, if students need larger text or images only few parameters have to be changed. If students have some form of colour deficiency it is possible to change colours simply using external CSS.

For users with Attention Deficit Disorder (ADD) you have to make series of static images instead of animations, which, again, it is not such a difficult task with SVG. Audio is easily included in SVG so it is possible to make a presentation with a combination of animation and sound, a helpful feature for some students. For students who are visual impaired, or blind, there are SVG based tools that can generate outputs accessible to this group of users.

However it is important to correctly prepare the SVG document so that the target user will get our essential information. Our experience shows that it is possible to make efficient SVG websites which are accessible, but to do it efficiently the developers have to work very closely with their target users with disabilities. Conclusions

SVG is an ideal tool for the development of educational materials at many different levels, especially for mathematics. In addition SVG is based on open standards, it's free, and can generate compelling graphics and animation.

The basic shapes used in coordinate transformations in SVG are similar to the expressions used in traditional classroom mathematics. Thus learning SVG itself is a good learning too for students. By learning SVG students have active, engaged role in the educational process.

There are two main obstacles in use of SVG for educational purposes:

There is no browser that includes SVG in its standard toolset.

The formal educational system (especially in the teaching of mathematics) is one of the most conservative systems in our society. New ideas and approaches penetrate slowly.


[Carey, 2003]
Design Concepts with Code, Apress 2003
[Edward de Bono, 1998]
Edward de Bono accessed 20th December 2004.
[Galdwell, 2002]
Tipping Point, Back Bay Books 2002

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.