1999 OPEN CLASSROOM ANNUAL CONFERENCE



sVG – A NEW DIMENSION IN PRODUCING INTERACTIVE NETBOOKS

Vladimir Batagelj, University of Ljubljana, Slovenia

What is SVG ?

SVG - Scalable Vector Graphics [5] is a 2D-graphics markup language based on XML [4]. It is compatible with other web standards: HTML, XML Namespace, Xlink, Xpointer, CSS 2, DOM 1, Java, ECMA/Javascript, Unicode, SMIL 1.0, ... [6-15]. It allows us to include in HTML documents pictures described by their structure – composition of curves and shapes. Since the SVG viewer is not integrated yet into web browsers we need to view SVG pictures, to install it as a plug-in. An excellent SVG plug-in for Windows was produced by Adobe [16].

The SVG pictures are not static (as standard bitmaps GIF, JPEG, PNG). The SVG viewer provides options to zoom in (to see details) and out (to see global view), to move the picture, to search for text, ... Besides this, using built-in animation capabilities or Javascript program support, the pictures can be made alive and interactive. To get some impression about SVG see the following examples:

Kaleidoscope:

RGB/HSV Color Picker:

Diagram:

Networks visualization:

PC Technology in motion:

The Four-Bar Linkage:

CR2V, raster to vector converter:

Why SVG ?

The main: zooming, a relatively small file, text is entered as a string – search, independent of output devices and computer platforms, excellent color control, interactivity and animation.

Applications of SVG

SVG pictures can be produced by drawing tools. In Windows we can use Adobe Illustrator 9, Corel Draw 9, WebDraw (by Jasc) and Mayura [17-20]. But special programs for visualization of obtained data/results will produce most SVG pictures. See, for example:

Vienna - Social patterns and structures:

Europe:

Other applications include: data visualization, presentations (like Power Point), maps (GIS), layouts, educational pictures, ...

Evolution of SVG

In 1985 Adobe presented Postscript that, combined with a laser printer, produced a revolution in publishing. Since the Postscript was not completely appropriate for the use on web they, at Adobe, developed a new format PDF – Portable Document Format. PDF established itself as a leading format for publication of closed documents (reports, manuals, papers, tutorials,...).

Several other companies produced in nineties their own graphics description formats with plug-in viewers for them: QuickTime (Apple), CMX (Corel), Flash (Macromedia),... Their main drawback is – they are not an open standard.

In 1998 two groups of companies submitted to The World Wide Web Consortium - W3C their proposals for web graphics format based on XML. The first group (April 1998 / Adobe, IBM,

Netscape and Sun) proposed PGML - Precision Graphics Markup Language); and the second

(May 1998 / HP, Macromedia, Microsoft and Visio) proposed VML - Vector Markup Language).

Both groups merged into SVG development group that published already in October 1998 the requirements on SVG and in February 1999 the first draft. Several improved versions followed. The last version was published in November 2000 [5] as a candidate release.

A simple example in SVG

Here is a simple example of picture description in SVG

Mathematics

It creates yellow circle with black border containing red inscription “Mathematics”.

[pic]

Embedding SVG pictures in web pages

To insert a SVG picture into a HTML document we use the EMBED tag. For the picture from our simple example we have:

The attribute SRC determines the location (URL) of the SVG file; NAME becomes important in advanced applications using Javascript or Java. The attributes HEIGHT and WIDTH are obligatory and determine the size of rectangle in which the picture is rendered. The value of TYPE is the MIME-type of the file - for SVG file it can be image/svg or image/svg-xml. The attribute PLUGINSPAGE directs the user that has not a SVG viewer installed on his computer, to the web site from which he can obtain a viewer.

SVG player

Using the g SVG tag we can partition a SVG picture to several parts. In the g tag two attributes display and visibility are available to control the visibility of the corresponding part. The difference between them is explained in SVG documentation. We shall use the display attribute. Setting it to none we switch the visibility of the part off; setting it to inline (or some other value) we switch the visibility of the part on. Using Javascript this can be done interactively allowing to the user to select the parts to be displayed.

To support this I prepared SVG player - a collection of Javascript functions for controlling the value of display attribute in parts of the SVG picture. SVG player is given in the listing of the file SVGplayer.js . The file shapes.svg contains the description of the picture – five different shapes, each in its own part (see the figure). Besides this it also contains data needed to cooperate with Javascript functions (arrays PicList and PicIndex).

[pic]

File shapes.svg

]>

[pic]

File SVGplayer.js

/*

SVG player/display, version 0.1, Apr 7, 2001

based on SVG player, version 0.1, Sept 2, 2000

Vladimir Batagelj, University of Ljubljana

vladimir.batagelj@uni-lj.si

*/

var curPic = 0;

var svgdoc = null;

var svgobj;

var svgstyle;

var PicList = new Array();

var PicIndex = new Object();

function setAllPics(svgPic,vis){

svgdoc = eval("document."+svgPic+".getSVGDocument()");

for (var i = 0; i < PicList.length; i++){

svgobj = svgdoc.getElementById(PicList[i]);

svgstyle = svgobj.getStyle();

svgstyle.setProperty('display',vis);

};

}

function setPic(svgPic,form,pic,vis){

curPic = pic;

svgdoc = eval("document."+svgPic+".getSVGDocument()");

var picName = PicList[pic];

svgobj = svgdoc.getElementById(picName);

svgstyle = svgobj.getStyle();

svgstyle.setProperty('display', vis);

form.pic.value = curPic+1;

}

function hideAndShow(svgPic,form,hidePic,showPic){

setPic(svgPic,form,hidePic,'none');

setPic(svgPic,form,showPic,'inline');

}

function prevPic(svgPic,form){

var oldPic = curPic; curPic = curPic - 1;

if(curPic < 0) curPic = oldPic;

hideAndShow(svgPic,form,oldPic,curPic);

}

function nextPic(svgPic,form){

var oldPic = curPic; curPic = curPic + 1;

if(curPic > (PicList.length-1)) curPic = oldPic;

hideAndShow(svgPic,form,oldPic,curPic);

}

function getPic(pic,form,msg){

var answer = -1;

while ((answer < 1)|(PicList.length < answer))

answer = eval(prompt(msg,"1"));

curPic = answer-1;

answer=eval("form."+pic+".value = answer");

}

function selPic(pic,sel,form,msg){

var answer=eval("form."+sel+".selectedIndex");

if (answer>=1){curPic = answer-1;

answer=eval("form."+pic+".value = answer");}

else alert(msg);

}

File svgtest.htm

SVG test

form, value {font-family: Arial,Helvetica;}

form { font-size: 12pt;}

input {font-family: Courier New;}

Pictures 

 

SELECT

Yellow Cyan

Magenta Red

Green Blue

The file svgtest.htm combines SVG player (SVGplayer.js) and SVG picture (shapes.svg) and using HTML form tags provides the interactive control of the visibility of parts of the picture. Applying the same scheme to some other SVG picture we can achieve more useful results – for example, a step-by-step display of selected geometrical construction.

Some other educational applications of SVG

The most interesting and rich site on the web with educational SVG contents is the Pilat Informatique Educative that contains several nice mathematical examples and systems SVGeom and SVGFonc.

Some chemical applications of SVG can be found at .

An application of SVG to learn how to write hiragana characters is available at .

Based on the approach used in Logo2PS [1] I prepared also Logo2SVG [2] that allows user to save a trace of the Logo turtle as a SVG picture.

Additional references to SVG sites can be found at .

A ZIP with the last version of SVG player and related files is available at

.

References

1. Vladimir Batagelj: Logo to Postscript. Proceedings of Eurologo’97. Budapest, 1997, p. 333-341.



2. Vladimir Batagelj: Logo2SVG,

3. The World Wide Web Consortium - W3C:

4. XML:

5. W3C/SVG:

6. HTML:

7. XML Namespace:

8. Xlink:

9. Xpointer:

10. CSS 2:

11. DOM 1:

12. ECMA/JavaScript:

13. Java:

14. Unicode:

15. SMIL 1.0:

16. Adobe SVG Viewer:

17. Adobe Illustrator:

18. Corel Draw:

19. Jasc Software, WebDraw:

20. Mayura:

Author:

Prof. Vladimir Batagelj

University of Ljubljana, FMF, Department of Mathematics

Jadranska 19, 1000 Ljubljana, Slovenia

Email – vladimir.batagelj@uni-lj.si

WWW –

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download