International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, Vol XXXV, Part B4. Istanbul 2004
that it is best displayed in the Adobe SVG viewer. If there is a
need for the origin to be maintained, for example if there is a
need for a mapping application and the user wishes to query the
location of objects, the original coordinates can be maintained
(Savage Software, 2004).
In some cases, certain files contain more than just polygons,
lines or points. Block data and attribute data is valuable
information. The converters turn that data into organized XML,
encapsulated in metadata tags. Then, with the use of standard
JavaScript techniques the data can be displayed. If there is no
metadata in the input document, there will be no metadata tags
in the output converted file.
2.1 An overview of Scalable Vector Graphics
Scalable Vector Graphics (SVG) is a new graphics file format
and Web development language based on XML. SVG enables
Web developers and designers to create dynamically high-
quality graphics from real-time data with precise structural and
visual control. With this powerful technology, SVG developers
can create a new generation of Web applications based on data-
driven, interactive, and personalized graphics. SVG looks and
feels very familiar, thanks to its roots in XML (W3C SVG,
2003).
SVG is text based, therefore encoding techniques can be learned
by leveraging the work of others. This drastically reduces the
overall learning curve. The JavaScript language and Document
Object Model (DOM) are familiar to those using DHTML.
Developers who use JSP, PHP, and ASP for HTML or text
content today will be able to create graphics in the same way.
Nowadays, there are software tools generating and handling
SVG graphics. Tricky constructs like rollovers and interactive
menus are easily created through such software programmes
like Adobe Illustrator. No compatibility problems occur while
working with SVG because is text based ind works seamlessly
with current Web technologies like Ili ^1L, Cascading Style
Sheets (CSS), Extensible Style Sheet Language, SMIL, ASP, -
JSP, and JavaScript and formats like GIF, JPEG, PNG. By
combining SVG with the existing Web technologies developers
can create extremely rich interactive graphics. Any SVG
graphic element can modify or control any other SVG or HTML
element or object. Sophisticated user interfaces or even full-
blown online applications can be created with SVG. And
because SVG is text based, the text inside graphics can be
translated for other geographies quickly (Adobe Systems,
2004).
Graphics created in SVG can be scaled without loss of quality
across various platforms and devices. SVG can be used on the
Web, in print and even on portable devices while retaining full
quality. Another notable aspect while using SVG, is the
reduction of maintenance cost. For example, a navigation button
that normally requires a minimum of two raster files can be
replaced by a single SVG file, rollover states and behaviours are
specified via easily scriptable attributes such as colour, shape,
size, text, or opacity. SVG can also reduce server loads by
allowing client platforms to perform the graphics rendering. If
the client platform has limited processing resources (i.c. PDAs
and cell phones), the server can pre-render and optimize content
before delivery. In both cases, the source content is the same.
The overall goal is to have a single source file, which
transforms gracefully in a wide variety of situations. Client-side
rendering can also dramatically improve the user experience.
For example, zooming in on an SVG-enabled map is extremely
fast and can instantly provide additional details such as streets
names, building addresses, and topographic information.
SVG has complete Unicode character support to display text in
many languages, vertically, horizontally and bi-directionally. A
148
content developer may easily embed an unusual font, enabling
text to be rendered as intended without making assumptions
about the user's available fonts. SVG works effectively with
style sheets to control presentation elements and attributes
separating page aesthetics from content. Cascading Style Sheets
(CSS) can be used not only for font characteristics (size, family
and colour) but also for properties of other SVG graphic
elements. SVG content can define colours using either an ICC
(International Colour Consortium) profile or an RGB
specification.
3. APPLICATION CONCEPT AND ARCHITECTURE
The basic concept for the implementation of this work follows
two axes. One is to use new xml graphic technologies within a
web environment combining traditional file formats and raster
images and the other is to prove that this system architecture is
easily implemented and gives the end user efficient web
application results.
Technologies and formats that are used and implemented in all
steps as shown in figure | are: html and SVG for web page
representations, jpg and SVG formats for graphic images and
JavaScript for user's interactions.
Initially the user selects a building as shown in a general
campus map. Selection is made by clicking the SVG element
that covers the building's surface. There is an on/off option for
the raster aerial photo that covers campus area which is the
background image of the first web page. In the next step the
user selects the floor by clicking on graphic SVG elements. The
background in this case is again a raster image showing
building's facade. This alteration from campus ground plan to
building's facade is necessary in order to enable the user to
select the desirable floor.
In the next window there are two SVG images, one showing
construct designed details and the second (hidden) gives to the
user the option to point on every area that 1s highlighted when
the mouse cursor is over it. The selection of an area is made on
a different.layer that contains only the outline of each room.
This approach was selected in order to assist to the easy editing
of the descriptive information of every room in a short coded
SVG file.
Step A StepB.
Campus Buildings
i
| StepD Step C I
' | Rooms information Room Selection
A
I
|
{
|
|
i
|
|
|
i
|
|
Web Browser Environment ;
Figure 1: Application’s concept and architecture
Intern
When
In a se
file.
31 |
As m
forma
source
and p
identic
to rer
«path:
graphi
This g
repeat
to be
becom
reason
50% SI
In this
there ¢
spots ii
At ste]
visit, f
pointin
(Figure
either |
above.
<embe
typez'
<objec
height-
Figure
The pic
selected
zoomed
viewer |
the moi
such as
