CI PA 2003 XIX th International Symposium, 30 September - 04 October, 2003, Antalya, Turkey
308
4 SVG DATA STRUCTURE
The following content partly explains the SVG data structure
and tags with respect to representation of architectural drawings
or maps that should be distributed via the Internet. The data
source is a DWG or DXF file converted with a conversion tool
into SVG. The focus here is on structuring the graphic, setting
attributes and linking to other references.
The SVG specification is separated into graphic elements, con
tainer elements, graphic referencing elements and text content
elements.
The file starts with the XML prologue as parsing information:
<?xml version="l.0" standalone="0">
The root tag for a SVG document is <svg>. The attributes
width and height define the visible area for the document start
ing in the lower left corner of the frame. The attributes viewbox
and preserveAspectRatio define the area of the graphic scaled
to the width and height values. The concept is well known from
basic graphic programming libraries. Identification of name
space for xml is referenced by the xmlns attribute.
<svg xmls=http://www.w3.org/2000/svg width
= "400" height="300" viewBox="0.0 0.0
1024.0 764.0"
preserveAspectRatio="xMinYMax meet">
The following tags are structure elements:
<g>
<defs>
<desc>
<title>
<symbo!>
grouping of graphic elements
for definitions referenced later in the code
element description
labelling elements
grouping references
Continuing the above example needs the following statements:
<title>South Façade of Building</title>
<desc>Converted from DWG to</desc>
<g>
<!-- the graphic content is embedded here -
->
</g>
</svg>
The tags <title> and <desc> are used for descriptions and are
ignored by the render engine. Tag <g> is for grouping graphic
elements. Transformations or attributes defined for a group will
affect all the child elements of this group. The SVG graphic
format can be embedded in HTML or XML document for
example or can be addressed as an independent file.
4.1 Graphic Tags
The graphic content consists of predefined primitives like rec
tangle <rect>, circles <circle>, ellipses <ellipse>, lines <Iine>,
polylines <poly!ine> or polygons <polygon>. Appearance of
the objects is defined by style-attributes like fill or stroke, which
can be set by style sheets or as particular shape properties.
Arbitrary lines are constructed from the definition given in the
<path> tag. The notation is similar to Postscript. A list of points
starts with the letter d followed by a string including the co-
• ordinates with a letter in front. The letter indicates the character
istic. M stands for move to, L for line to, C stands for curve and
so on. A z at the end of the list indicates a closed path.
The co-ordinate pairs are separated by blanks. The following
code shows a path with two straight lines rendered in black
colour.
<path d="M499.93 340.11L499.91 340.06
499.88 340.00 "
fill="none" stroke="black" stroke-
width="0.2"/>
4.2 Interactivity
SVG provides sophisticated facilities for animation and interac
tivity. Here we focus on interactivity by hyperlinks and demon
strate a mouse over event for opacity of an image.
A link sets the connection between two documents while an
anchor points to a reference in the same document. SVG treats
Xlink as an own namespace. This namespace is referenced with
xmlnsdink.
The elements providing a link are covered with the tag
<a xlink.href="document.svg"
target="_blank">
<g> graphic elements </g>
</a>
Where document.svg is a sourcefile providing code like HTML,
VRML or SVG. Target points to the target window where the
new document has to be rendered.
Code that is not included in the XML or SVG specification like
JavaScript or CSS, must be terminated between
<! [C DATA[
<!- - script code or CSS code -- >
] ]>
The code image { opacity: 0.5; } defines a value
for opacity of an image.
Following is the complete definition for the initial opacity style
of an SVG document:
<defs>
<style type="text/css">
<![CDATA[
image {
opacity: 0.5;
}
] ]>
</style>
</defs>
