EXPERTS (EDI/XML Procurement Enabling Real Trade Standards)   Table of contents   Indexes   Electronic health care record transfer
 

DrawML and SVG
 Jan Christian   Herlitz
  R&D Manager
  Excosoft AB  Electrum 420
Kista   S-164 40  Sweden
Phone: +46 8 703 91 90
Fax: +46 8 703 94 90
Email: jc.herlitz@excosoft.se Web: www.excosoft.se
 
Biographical notice:
 
Jan Christian Herlitz, M.Sc., is the founder of Excosoft. In the early 80's he worked for the Ericsson group where he developed software for literate programming, structured word processing and hyperlink systems. Today he is R&D manager at Excosoft.
 
ABSTRACT:
 
During the work with SVG, the vector graphics requirements were split into two parts; SVG0 and SVG1. SVG0 is the low level rendering capabilities such as drawing a line and writing text. SVG1 represents the higher level logical capabilities, such as adjusting the size of a rectangle to the text inside.
 
DrawML corresponds clearly to SVG1. DrawML specifies conventions and algorithms on a high, logical level to make a drawing as easy to create and update as possible.
 
In this paper I am suggesting SVG0 and SVG1 to be permanently split and DrawML to embody the SVG1 requirements.
 
The first chapter is a short presentation of the DrawML concept (an extract from the submission to W3C). The second chapter is an attempt to describe where SVG and DrawML fit into the picture and how they might interact.
 

The DrawML Concept
 

Introduction
 
DrawML is a 2D scalable graphics language designed to facilitate the creation of simple technical drawings. Furthermore (and most importantly), DrawML focuses on the process ofmaintaining andrefining a drawing. A drawing should be as easy to update as the document it resides in.
 
DrawML is based on the following requirements and criteria:
 
  •  It should be possible toembed drawings in SGML/XML documents in the same way as CALS tables are embedded.
  •  It should be possiblereuse elements from the parent DTD inside the embedded drawing.
  •  Whenstructure is added to drawings, it should be possible to define algorithms to handle the positioning and automatic resizing of visual elements.
  •  The typical drawing isnot WYSIWYG.
 
The reason for the focus on maintenance is the increased importance of intranets. Up to now internet technology has been used primarily for publishing. People working within an intranet expect to create and change documents on-the-fly.
 

Embedding
 
A DrawML drawing is embedded in the SGML/XML document. If required parent DTD elements can be embedded in the DrawML drawing. Compare to a CALS table, where the content model for a cell is declared in the main DTD. In DrawML it is possible to insert paragraphs, lists, images, tables, etc. inside a drawing.
 
There are several advantages accruing from a tight integration of the document and the drawings it contains.
 
  •  It is easy to cut and paste objects between a drawings and its surroundings.
  •  Simpler, unified interface for handling text.
  •  Text inside drawings is searchable, can be spell-checked, its case can be changed, etc.
  •  A drawing can contain complex SGML/XML text structure (paragraphs, lists, tables).
  •  There is no need for external entities.
  •  References (id/idref, XLink) can be made to and from drawings.
 
Thedrawml element introduces a drawing in a document. At this point the "rendering engine" enters the DrawML mode in which the elements inside the drawing are drawn in accordance with the rules set forth in this specification. Somewhere in the drawing we want to include othernon drawing elements. Thelmward element (drawml spelled backwards!) temporarily leaves the DrawML mode and enters the ordinary rendering mode.
 
In the following example a paragraph with an emphasized word is written inside a rectangular shape.
  
<drawml>
<shape type="rectangle">
<lmward>
<p>This is <em>my</em> text</p>
</lmward>
</shape>
</drawml>
 
 

Automatic Sizing
 
We expect a table cell to adjust to its content and a paragraph to adjust to the frame width and we should expect similar functionality in a drawing.
 
One of the important concepts underlying DrawML is that shapes adjust to their content by default (just like cells in a table). A DrawML shape may contain other shapes.
 
For instance a shape will expand if the text placed inside it does not fit.
  
<drawml>
<shape type="rectangle"></shape>
<shape type="rectangle" width="100">
<lmward>
<p>This is <em>my</em> text</p>
</lmward>
</shape>
</drawml>
 
 
In the above case the width of the rectangle was explicitly set, which forced the text in the paragraph to wrap.
 

Automatic Positions
 
By placing shapes inside other shapes it is possible to arrange and group intelligently. The parent shape can be invisible and thus be used for the sole purpose of grouping. By default, shapes are arranged horizontally.
  
<drawml>
<shape type="rectangle">
<shape type="rectangle">
<lmward>Hello</lmward>
</shape>
<shape type="rectangle">
<lmward>World</lmward>
</shape>
</shape>
</drawml>
 
 
DrawML drawings work with structures rather than coordinate positions. When the user adds a new shape in the structure the application will make room for the new shape automatically.
  
<drawml>
<shape type="rectangle">
<shape type="rectangle">
<lmward>Hello</lmward>
</shape>
<shape type="rectangle">
<lmward>new</lmward>
</shape>
<shape type="rectangle">
<lmward>World</lmward>
</shape>
</shape>
</drawml>
 
 
Shapes can also be arranged vertically.
  
<drawml>
<shape type="rectangle" arrange="vertical">
<shape type="rectangle">
<lmward>Hello</lmward>
</shape>
<shape type="oval"></shape>
<shape type="oval"></shape>
<shape type="rectangle">
<lmward>World</lmward>
</shape>
</shape>
</drawml>
 
 
A position can be explicitly defined using a coordinate. This coordinate is relative to its parent shape so when a parent is moved, its child is moved with it. Each shape defines a coordinate system for its children.
  
<drawml>
<shape type="rectangle">
<shape type="oval" x="100" y="20">
</shape>
</shape>
</drawml>
 
 

Automatic Connections
 
Drawing objects are often connected, e.g., an arrow points from one object to another, a group of objects are connected to a parent object in a hierarchical structure, etc. If objects are moved connections should adjust to the new layout. This effect is often referred to as the "rubber band" effect.
 
In DrawML shapes may have one or morehook positions. These positions are suitable connection points. Connections are defined with theline element. A connection consists of two or more positions (pos elements). Each position is either glued to a hook position in a shape or explicitly assigned a coordinate position.
 
A rectangle, for example, typically has four hook positions; W, N, E and S (west, north, east and south).
  
<drawml>
<shape type="rectangle" shape-id="d1">
<lmward>Hello</lmward>
</shape>
<shape type="rectangle" x="50" y="50" shape-id="d2">
<lmward>World</lmward>
</shape>
<line>
<pos attach-to="d1" attach-point="S"/>
<pos attach-to="d2" attach-point="N"/>
</line>
</drawml>
 
 
Sometimes we may want to connect to the nearest point on a shape. This point is defined with the reserved hook name$nearest .
  
<drawml>
<shape type="oval" shape-id="d1">
<lmward>Hello</lmward>
</shape>
<shape type="oval" x="50" y="50" shape-id="d2">
<lmward>World</lmward>
</shape>
<line>
<pos attach-to="d1" attach-point="$nearest"/>
<pos attach-to="d2" attach-point="$nearest"/>
</line>
</drawml>
 
 

Shapes in Java
 
The success of a standard often depends on its extendability. In DrawMLall shapes are defined using Java, including rectangles and circles. The power of a programming language such as Java gives shape developers the necessary flexibility.
 
The following example is a house shape.
  
<drawml>
<shape type="house">
</shape>
</drawml>
 
 
When child shapes are positioned inside the shape the house should be bigger. It is the shape that decides how the house should adapt to its children. Note that the roof is not getting any higher, ,just wider.
  
<drawml>
<shape type="house">
<lmward>A house</lmward>
</shape>
</drawml>
 
 
The Java shapes have aCalcSize() method that calculates each size. The renderer calls these routines when calculating the individual positions. The interesting point is that each shape asks the renderer for the size of the shape's children.
 
  
public void CalcSize()
{
SetW( 7 + 5 + GetWChild() + 5 + 7 );   // Set shape width
SetH( 10 + 5 + GetHChild() + 5 );      // Set shape height
}
 
After calculating positions the renderer then calls theDrawShape() routine for each shape. The Java class uses aPAINTER class to do the actual drawing.
 
The Java-code to draw the house is as follows:
  
public void DrawShape()
{
Painter.NewPath();                          // Clear painter
Painter.MoveTo( 0, 10 );
Painter.LineTo( MyW()/2, 0 );
Painter.LineTo( MyW(), 10 );
Painter.ClosePath();
Painter.Stroke();                           // Draw roof
Painter.NewPath();
Painter.MoveTo( 7, 10 );
Painter.LineTo( MyW() - 7, 10 );
Painter.LineTo( MyW() - 7, MyH() );
Painter.LineTo( 7, MyH() );
Painter.ClosePath();
Painter.Stroke();                           // Draw front
}
 

Separating DrawML and SVG
 

The Rendering Task
 
The following figure is an attempt to divide the rendering task into steps. It shows how information is transferred from an XML document through a rendering engine and finally presented.
 
 
The XML document is parsed and read into a tree structure in which DOM code can operate.
 
XSL and CSS style can beinline , e.g. an element might have a CSS CLASS attribute giving it a "hard coded" font size.
 
The document can have SVGinline drawings. These drawings are rather "fixed". They probably shouldn't change when, for instance, the default font is changed since there is no intelligence in the drawing that can handle this.
 
Style is applied with the help of CSS and/or XSL. An element might be styled as a paragraph in which lines of text are indented and wrapped. Another element might be styled as a table which forces the child elements to be handled as rows and columns. The cells in the table are automatically sized according to their content.
 
I put DrawML on this level, i.e. the same level as tables, lists, etc. They are all on the logical layout level where different algorithms are applied to position and render the information. A table cell or a CSS box is no different from a rectangle in a DrawML drawing as I see it.
 
The challenge with DrawML is the number of different types of shapes people will want to use. How can a shape designer add new intelligent shapes to a document? I will discuss this problem in the next section.
 
The logical level produces SVG code and sends it to an SVG driver. The SVG driver does all the tricky pixel manipulation.
 
In this model SVG is the interface between an application and the screen. An SVG driver might use OpenGL, DirectX, Windows GDI or X11 to perform the low level drawing. In the future there might be optimized drivers doing this job themselves.
 
SVG will be for your screen what Postscript is for your printer!
 
SVG will thus be used in many more situations than just in drawings.
 

Creating New Shapes
 
Shapes in DrawML must be "intelligent". They must be able to adjust their size according to their content. They must also tell the renderer where content should be positioned. To support rubber bands, they should define suitable hook points. To achieve all this we need some sort of a language to do computations.
 
The following figure illustrates the intelligence needed by a shape. If the content of the house is increased the house should be bigger but the roof should not be higher (the example is taken from the DrawML specification).
 
 
The renderer asks the shape for its total size (CalcSize). The shape computes the size by asking the renderer for the total size of its children and then add its own contribution to this size.
 
The renderer then tells the shape to draw itself (DrawShape). The shape uses predefined functions that the renderer supplies.
 
In DrawML we picked Java as a shape definition language. In a prototype we have been able to test and verify the concept. But Java is of course not a requirement. Any language that has computational capabilities will do.
 

How to use SVG in DrawML
 
The intelligent shapes in the current DrawML specification use a Java painter class to do the actual painting. Another design would be to instead generate SVG code. Lets assume we have a language inside XML that can compute. We could then skip Java and go for XML as follows.
  
<book>
<head>
<shape-definition type="house">
<CalcSize>
SetW(GetWChild()+24);
SetH(GetHChild()+20);
</CalcSize>
<DrawShape>
sprintf(com,
"<p d='M %d %d,L %d %d,L %d %d z' />",
0,10, MyW()/2,0, MyW(),10);
SVG(com);
</DrawShape>
</shape-definition>
</head>
<body>
...
<drawml>
<shape type="house">
<lmward>
A house
</lmward>
</shape>
</drawml>
...
</body>
</book>
 
Instead of defining a shape in a Java class, a shape is defined by a shape-definition element. The CalcSize and DrawShape methods in the Java class are replaced by elements.
 
An "SVG" command last in the DrawShape element sends SVG code to the renderer.
 
The commands used are just for illustration; it all depends on the of language available. Could ECMA be the language?
 

Is DrawML a Formatting Object?
 
XSL has the concept offormatting objects (or flow objects), e.g. ablock is used for formatting paragraphs and headlines. A block "knows" about word wrapping, preceding and subsequent separation, first line indent, etc.
 
DrawML "knows" about positioning, sizing and hooking of shapes. Maybe the natural place for specifying DrawML behavior would be under XSL?!
EXPERTS (EDI/XML Procurement Enabling Real Trade Standards)   Table of contents   Indexes   Electronic health care record transfer