Scalable Vector Graphics

Scalable Vector Graphics is a new technology for displaying Graphics on the Web. But being a new technology, it is very confusing to use. This paper compares it with the current technology and is also aimed at teaching the reader how to use this SVG technology. At the end of it the reader will be able to design basic Graphics in SVG format.


Introduction
Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML.SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.Graphical objects can be grouped, styled, transformed and composited into previously rendered objects.Text can be in any XML namespace suitable to the application, which enhances searchability and accessibility of the SVG graphics.The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.
According to The World Wide Web Consortium's SVG 1.0 Specification (The World Wide Web Consortium, 2001), SVG drawings can be dynamic and interactive.The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows for straightforward and efficient vector graphics animation via scripting.A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object.Because of its compatibility and leveraging of other Web standards, features like scripting can be done on SVG elements and other XML elements from different namespaces simultaneously within the same Web page.

SVG
SVG is a new web based technology developed by the World Wide Web Consortium (W3C).On the recommendations of W3C, SVG 1.0 is a web standard.This has been done to ensure that everyone can have simple and affordable access to the technology.

XML
XML is a markup language for documents containing structured information.
Structured information contains both content (words, pictures, etc.) and some indication of what role that content plays (for example, content in a section heading has a different meaning from content in a footnote, which means something different than content in a figure caption or content in a database table, etc.).Almost all documents have some structure.A markup language is a mechanism to identify structures in a document.The XML Specification (The World Wide Web Consortium, 2000) defines a standard way to add markup to documents.
"In order to appreciate XML, it is important to understand why it was created.XML was created so that richly structured documents could be used over the web.The only viable alternatives, HTML and SGML, are not practical for this purpose.
HTML comes bound with a set of semantics and does not provide arbitrary structure.SGML provides arbitrary structure, but is too difficult to implement just for a web browser.Full SGML systems solve large, complex problems that justify their expense.Viewing structured documents sent over the web rarely carries such justification."-What is XML (Walsh N., 1998).

Current Technology
Current Graphic formats are raster-only.They store information for every pixel in the graphic.Human eyes don't ordinarily see these pixels, but instead see a smooth, whole object.When a raster graphic is enlarged to more than 100%, however, we start to notice these pixels and the graphic looks distorted.
The screen resolution also affects the way we see the graphic.A high screen resolution means that a graphic's may only cover a small fraction of the area.Therefore the graphic looks very small, but if we enlarge it then it will be distorted.
Clearly, these raster graphics formats are not very practical.This is where Scalable Vector Graphics come into the picture.

What is SVG?
SVG is an application of XML and is therefore compatible with Extensible Markup Language (XML) 1.0.As the name suggests, SVGs are scalable meaning that they can be increased or decreased uniformly.Therefore they are not limited to a fixed size and can be displayed on any resolution properly.Also SVGs are vector based.They contain geometric objects such as lines and curves rather than pixels.This gives them greater flexibility compared to raster-only formats (such as PNG and JPEG), which have to store information for every pixel of the graphic.
According to Adobe (2002) The Document Type Definition for SVG is produced by The World Wide Web Consortium and is available at http://www.w3.org/TR/SVG/DTD/svg10.dtd.The purpose of a Document Type Definition is to define the legal building blocks of an XML document.It defines the document structure with a list of legal elements.
To view SVG content, a plugin for the browser has to be installed.This plugin is freely available from http://www.adobe.com/svg/viewer/install/.

The Graphic
To enable us to draw the Graphic, SVG defines some basic shapes.These are:

Rectangle
The 'rect' element defines a rectangle which is axis-aligned with the current user coordinate

Circle
The 'circle' element defines a circle based on a centre point and a radius.

Ellipse
The 'ellipse' element defines an ellipse based on a centre point and two radii.

Line
The 'line' element defines a line that starts at one point and ends at another.

Polyline
A 'polyline' element defines a set of connected straight line segments <polyline points"[x1,y1] [x2,y2] …… [xn,yn]" /> where points is a list of points that make up the polyline

Polygon
The 'polygon' element defines a closed shape consisting of a set of connected straight line segments <polygon points"[x1,y1] [x2,y2] …… [xn,yn]" /> where points is a list of points that make up the polygon

Text
The 'text' element is used to draw text on the SVG.

Styling
The text and shapes have further attributes that are set through the 'style' element.
style="options" the options can be one or more of the following: fill:[Color] -Fills the object with the specified color.

Transformations
SVG provides some transformations as well.Using the 'transform' element a SVG can be translated, scaled, rotated, skewed or a matrix transformation may be applied as well.transform="translation" the translation can be one or more of the following: matrix(<a> <b> <c> <d> <e> <f>) -specifies a transformation in the form of a skewX(<skew-angle>) -specifies a skew transformation along the x-axis.

Conclusion
A Raster Graphic can only be enlarged up to twice its size.They can only be viewed on a low resolution otherwise they appear very small or distorted.Scalable Vector Graphics on the other hand, can be scaled to any size and will still display the graphic clearly.Therefore it is quite obvious that this new technology is definitely the way forward.
You have also seen how to define basic shapes and text.With this information you will be able to design some basic SVGs.This is definitely not all that SVG can do.Using SVG, it is possible to design much more complicated graphics and even animations, but that is beyond the scope of this paper.The limitation with SVG is that at the moment you can only draw 2-dimensional graphics.
But since this is a new technology, it is very likely that it will be improved and that we might be able to design 3-dimensional graphics in the future.
It takes the form <text x="[No.]"y="[No.]"> [Text goes here] </text> where x & y are the x & y co-ordinates of the starting point of the text.
stroke:[Color] -colours the line/outline of the object stroke-width:[No.]-sets the line width font-family:[Font] -sets the font for the text font-size:[No.]-sets the font size for the text font-style:[style] -sets the style for the text e.g.italic, bold, etc.

Fig. 3 -
Fig. 3 -Screenshot of Transformation SVG , SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.With this powerful new technology, SVG developers can create a new generation of Web applications based on data-driven, interactive, and personalized graphics.