Contact us Heritage collections Image license terms
HOME ACL ACD C&A INF CCD CISD Literature
Further reading □ Overview □ 1998 □ 1 □ 2 □ 3 □ 4 □ 5 □ 6 □ 7 □ 8 □ 9 □ 10 □ 11 □ 12 □ 1999 □ 13 □ 14 □ 15 □ 16 □ 17 □ 18 □ 19 □ 20 □ 21 □ 22 □ 23 □ 24 □ 2000 □ 25 □ 26 □ 27 □ 28 □ 29 □ 30 □ 31 □ 32 □ 33 □ 34 □ 35 □ 36 □ 2001 □ 37 □ 38 □ 39 □ 40 □ 41 □ 42 □ 43 □ 44 □ 45 □ 46 □ 47 □ 48 □ 2002 □ 49 □ 50 □ 51 □ 52 □ 53 □ 54 □ 55 □ 56 □ 57 □ 58 □ 59 □ 60 □ 2003 □ 61 □ 62 □ 63 □ 64 □ 65 □ 66 □ 67 □ 68 □ 69 □ 70 □ 71 □ 72 □ 2004 □ 73 □ 74 □ 75 □ 76 □ 77 □ 78 □ 79 □ 80 □ 81 □ 82 □ 83 □ 84 □ 2005 □ 85 □ 86 □ 87 □ 88 □ 89 □ 90 □ 91 □ 92 □ 93 □ 94 □ 95 □ 96 □ 2006 □ 97 □ 98 □ 99 □ 100 □ 101 □ 102 □ 103 □ 104 □ 105 □ 106 □ 107 □ 108
Harwell Archives Contact us Heritage archives Image license terms

Search

   
⟶ CISD and DCI ⟶ Literature ⟶ W3C UK News (1998-2006)
⟶ CISD and DCI ⟶ Literature ⟶ W3C UK News (1998-2006)
ACL ACD C&A INF CCD CISD Archives
Further reading ⇓

□ Overview
1998
□ 1 □ 2 □ 3 □ 4 □ 5 □ 6 □ 7 □ 8 □ 9 □ 10 □ 11 □ 12
1999
□ 13 □ 14 □ 15 □ 16 □ 17 □ 18 □ 19 □ 20 □ 21 □ 22 □ 23 □ 24
2000
□ 25 □ 26 □ 27 □ 28 □ 29 □ 30 □ 31 □ 32 □ 33 □ 34 □ 35 □ 36
2001
□ 37 □ 38 □ 39 □ 40 □ 41 □ 42 □ 43 □ 44 □ 45 □ 46 □ 47 □ 48
2002
□ 49 □ 50 □ 51 □ 52 □ 53 □ 54 □ 55 □ 56 □ 57 □ 58 □ 59 □ 60
2003
□ 61 □ 62 □ 63 □ 64 □ 65 □ 66 □ 67 □ 68 □ 69 □ 70 □ 71 □ 72
2004
□ 73 □ 74 □ 75 □ 76 □ 77 □ 78 □ 79 □ 80 □ 81 □ 82 □ 83 □ 84
2005
□ 85 □ 86 □ 87 □ 88 □ 89 □ 90 □ 91 □ 92 □ 93 □ 94 □ 95 □ 96
2006
□ 97 □ 98 □ 99 □ 100 □ 101 □ 102 □ 103 □ 104 □ 105 □ 106 □ 107 □ 108

Issue 32: August 2000

SVG becomes Candidate Recommendation

On 2 August, Scalable Vector Graphics (SVG) 1.0 Specification became a Candidate Recommendation which means that it is getting close to being finalised. If you want to see any diagrams in this issue, you will need to download the Adobe SVG plug-in.

SVG is a language for describing two-dimensional graphics in XML. SVG has two main primitives called path and text. So a very simple SVG file would be:

<svg width="300px" height="300px">
< path d="M  0  112 L  20  124 L  40  129 L  60  126 L  80  120 L  100  111 L  120  104 L  140  101 L  164  106 L  170  103 L  173  80 L  178  60 L  185  39 L  200  30 L  220  30 L  240  40 L  260  61 L  280  69 L  290  68 L  288  77 L  272  85 L  250  85 L  230  85 L  215  88 L  211  95 L  215  110 L  228  120 L  241  130 L  251  149 L  252  164 L  242  181 L  221  189 L  200  191 L  180  193 L  160  192 L  140  190 L  120  190 L  100  188 L  80  182 L  61  179 L  42  171 L  30  159 L  13  140  z"/> 
<text x="100" y="250">A Duck</text>
</svg>
A Duck

Not the best looking duck and you are probably seeing it as a filled in black duck with a small title underneath but that will depend on how the defaults have been set. You would have added it to your html page by something like:

<object data="ukduck.svg" type="image/svg" width="300" height="300" ></object>

The svg element encloses the file. The path defines the outline as a set of lines by first Moving to the point (0,112) and then moving to the point (20,124) and so on until you get to the 'z' command which completes the curve by joining the last point (13,140) back to the initial point (0,112).

If you get a piece of graph paper and draw this duck you will probably see it coming out upside down and that is because SVG has made the rather odd decision to have the Y-axis increasing in value as you go down the page with the origin up in the top left corner. That is why with a Y-coordinate value of 250 the Title appears under the picture of the duck.

The path that you have constructed can be filled or stroked and control of these is achieved by styling the SVG path element using a style sheet or by attaching the style to the element itself. I will do the latter for ease of example although for complex diagrams you are more likely to use a style sheet just as you would in standard HTML pages. So we could change the file to:

< style="stroke:blue;fill:yellow" path d="M  0  112 L  20  124 . . . .  L  13  140  z"/> 
< style="font-size:24" text x="100" y="250">A Duck</text>
A Duck

SVG provides a range of ways for drawing lines and filling areas so that you have good control over the appearance.

SVGs are designed to be coded efficiently for transmission over the web so you can define the paths by relative rather than absolute positions. In this case you use lower case letters for the commands, Also, you can remove any surplus spaces. Thus our duck could have a path description:

<path  d="M 0 112l20 12l20 5l20-3l20-6l20-9l20-7l20-3l24 5l6-3l3-23l5-20l7-21l15-9l20  0l20 10l20 21l20 8l10-1l-2 9l-16 8l-22 0l-20 0l-15 3l-4 7l4 10l13 10l13 10l10 19l1 15l-10 17l-21 8l-21 2l-20 2l-20-1l -20-2l-20 0l-20-2l-20-6l-19-3l-19-8l-12-12l-17-19l-13-26 z"/>

SVG also allows curves to be defined using various forms such as the cubic bezier. This uses the end-point from the last curve, two control points and the next point on the curve. For smooth curves this is a more efficient representation. The top of our duck could be:

<path style="stroke:none;fill:lime" d="M  0  112 
C  40  139 100  91  145  101 
C  175  120  173  80  185  39 
C  230  10   240  65    290  68 
L  288  77 L  272  85 etc

This would smooth the top of the duck to:

Support is also provided for the more commonly used paths such as rectangle, circle and ellipse.

circle rect line polyline polygon ellipse

Quite complex graphics can be produced efficiently using SVG. Here is the W3C logo produced using a set of paths (no text) and the file size is smaller than the equivalent gif or png.

Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

SVG drawings can be interactive and dynamic. Animations can be defined and triggered either declaratively (by embedding SVG animation elements in SVG content) or via scripting. SVG's Document Object Model (DOM) provides access to all elements, attributes and properties. A set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object.

The SVG Working Group includes Adobe Systems, AOL/Netscape, Apple, Autodesk, Canon, Corel, CSIRO, Eastman Kodak, Excosoft, Hewlett-Packard, IBM, ILOG, IntraNet Systems, Macromedia, Microsoft, OASIS, Opera, Oxford Brookes University, Quark, Sun Microsystems, and Xerox.

There are already many open source and commercial SVG implementations available. The Candidate Recommendation phase is aimed at ensuring the whole of the SVG specification can be implemented, thus ensuring cross-vendor, cross-platform interoperability.

The Working Group has also been working on an SVG Test Suite, and this is being updated to match the Candidate Recommendation. It is hoped that the Test Suite will enable developers to make conformant and interoperable applications, which can then be used with confidence by the industry.

The Candidate Recommendation review period will end when at least one SVG implementation passes every Basic Effectivity (BE) test in the SVG Test Suite. As there are already good implementations of SVG, it is anticipated that this review period will take approximately one month.

Increasing numbers of drawing tools export to SVG, and SVG can now be viewed on many platforms.

Workshop on Web Device Independent Authoring

On 3-4 October at HP labs in Bristol, UK, a Workshop is planned on Web Device Independent Authoring.

The Workshop will explore how the diverse needs of content providers and consumers for delivery of content across many platforms can be met through the use of appropriate standards, notations, tools and guidelines. In particular it will discuss:

The aim is to get input from a wide range of groups which are listed in the Call. There will be a limit of 50 participants. The workshop is an open event but preference will be given firstly to members of W3C working groups and secondly experts in the field of device-independent authoring techniques.

The Web Content Accessibility Guidelines Working Group will meet immediately after the Workshop on 5-6 October. The plan is to address issues related to the 2.0 version of the Guidelines and incorporate any ideas resulting from the Device Independent Authoring Workshop.

WWW10 call for Participation

The Tenth International World Wide Web Conference (WWW10) will be held on May 1-5, 2001 in Hong Kong, the heart of the Asia-Pacific region. Leaders from industry, academia, and government will present the latest developments in Web technology, and discuss the issues and challenges facing the web community as it moves into the 21st century. The conference will consist of refereed paper sessions, poster sessions, panel sessions, a W3C track and four specialized tracks: E-commerce on the Web, the Web and Education, Web Internationalization, and the Web and Society. It will also feature presentations by keynote and invited speakers. The first day of the conference will be a day of tutorials and workshops, and the last day will be a developers' day. Subscribing to the Announcement List will ensure that you get regular updates of what is planned including submission dates etc.

MathML Conference in October

On 20-21 October, the MathML and Math on the Web Conference at the University of Illinois will provide a forum for presenting and discussing current research and applications in which the major emphasis is on MathML and technologies that ease the use of mathematical and scientific content on the Web. The conference embraces all areas of MathML technologies, including rendering, authoring, converting, and archiving. It is the aim of this conference to bring together those people involved in defining the future of math on the Web. Irene Vatton and Vincent Quint of W3C will be presenting 'Editing MathML on the Web with Amaya'.

Membership of W3C Continues to Rise

The total number of W3C Members has risen to 446. Recent new Members are:

⇑ Top of page
© Chilton Computing and UKRI Science and Technology Facilities Council webmaster@chilton-computing.org.uk
Our thanks to UKRI Science and Technology Facilities Council for hosting this site