An In-depth Analysis of Scalable Vector Graphics

By Renee Payne,2014-06-15 17:21
13 views 0
An In-depth Analysis of Scalable Vector GraphicsAn,of,In

Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    An In-depth Analysis of Scalable Vector Graphics

    计算机科学技术系98 任品


    A new two-dimensional vector graphics standard named Scalable Vector Graphics (SVG) [1] is emerging. It is based on the XML and vector graphics technology and developed by the W3C organization and other major industry players. It promises to bring the fast and rich-content graphics to the web while overcoming the shortcomings of traditional raster graphics. SVG introduces a lot of exciting features to the web graphics world, and can be seamlessly integrated into other existing web technologies. This paper will give an in-depth analysis to this new graphics standard, focusing on its features, industrial implementation status, the related research fields and the future work. At last we use a demo to demonstrate the discussed features.

    Keywords: SVG, XML, graphics standard, vector graphics, web-based graphics


    SVGScalable Vector Graphics!是一种新的二维矢量图形标准,它基于







1 Introduction to the Scalable Vector Graphics

    One of the ultimate goals for web technologies is to be able to provide the web users with a clear and effective communication environment. To achieve this goal, fast, scalable and rich-content graphics is indispensable. However, the traditional raster graphics such as GIF and JPEG can only meet some of the criteria. They are big, slow, and resolution-fixed. SVG is designed to improve this situation. With this new graphics format, the complex graphics layouts, sophisticated geometric objects, resolution-scalable artworks and highly interactive animations with a reasonable small file size are all possible for the web pages and other applications.

    The SVG format is based on the XML [2] technology. XML is the universal format for structured documents and data on the Web and regarded as the key to


Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    the next generation Web. SVG uses the XML grammar to define the scalable vector-based 2D graphics and can be used as a XML Namespace [3] in the web, therefore it is able to cooperate easily with other XML-based web technologies. Being a XML Namespace, a SVG document is a born XML document, so it can enjoy all advantages the XML documents have. For example, it is able to be easily edited by the plain text editors and dynamically generated by the server side script languages such as PERL and PHP.

    SVG is an open standard technology. It is developed by the W3C. The W3C (World Wide Web Consortium) is an organization to develop interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. To make SVG more practical and vendor neutral, major industry companies in this field are invited to develop this standard together, including Microsoft, Adobe, Canon, Kodak, IBM, Sun and so on. The W3C has just released SVG 1.0 Specification [4] as a W3C Recommendation in this September. An official Test Suite [5] has also been issued by the W3C. All the tests are designed to guarantee the implementation of features defined in the specification and the conformance of various implementations to one specific feature.

    2 The features of SVG

    2.1 Overview

    As a graphics standard, 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. The feature set includes nested

    transformations, clipping paths, alpha masks, filter effects and template


    SVG drawings can be interactive and dynamic, animation are defined and

    triggered either declaratively (to use the same mechanism as the SMIL [6]) or

    via scripting.

    SVG is naturally ready for the web use. As a XML namespace, it is

    compatible with almost all the prevailing web technologies. Web graphics

    applications can benefit a lot from the small size of SVG files and the arresting

    expressiveness of SVG graphics.

    2.2 Basic features

     SVG uses specific tags to define basic vector graphics objects such as rect,

    circle, ellipse, polyline, polygon and so on. Complex graphics that cannot be

    described by the basic shapes are defined as Path. There are two kinds of

    SVGs Path, lines and curves, while arcs and Bezier curves are the major

    means to define curves.

     SVG graphics are rendered into a finite rectangular region, which is called

    viewport. A negotiation process between the SVG document fragment and its

    parent determines the size of the SVG viewport. After establishing a viewport,

    a new viewport and user coordinate system is implicitly formed. A new user

    space can be established at any place within a SVG document by specifying a

    transformation matrix, including rotation, skewing, scaling, and translation.


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

     SVG uses a Painters Model for rendering. All the paint operations are

    processed successively. The first element in the SVG document getting painted first, subsequent element are painted on top of previously painted elements. Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing. The following two rendering properties color-interpolation and color-rendering provide information

    about the color space to apply the compositing operation.

     All SVG colors are specified in the sRGB color space. Additionally, SVG content can specify an alternate color specification using an ICC (International Color Consortium) [7] profile. If ICC-based colors are provided and the SVG user agent supports ICC color, then the ICC-based color takes precedence over the sRGB color specification. The ICC profile is a standard for documenting the color characteristics of input and output devices. Using this standard, it is possible for SVG content to be correctly transformed and viewed on different devices.

     SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. Styling properties can be assigned either using SVGs

    presentation attributes or using CSS [8]. For each style property defined in SVG, there is a corresponding presentation attribute (XML attribute). To change the styling result, we can simply alter the value of the relevant presentation attributes. CSS is a widely implemented declarative language for assigning styling properties to HTML or XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many application of SVG. CSS rules can be neatly exploited in SVG document as external CSS style sheet, internal CSS style sheet or inline style. XSLT [9] is another useful tool for styling. XSLT defines how to transform XML content into something else, usually other XML. We can obtain totally different exterior styling results via applying proper XSL style sheets to one SVG document.

    2.3 Rich-content graphics

    The text capability in SVG is powerful. Text can be rendered in a horizontalvertical line or along a complex path. In SVG all the parameters for generating text can be declaratively specified, such as font family, font size, position, width etc. SVG also supports external font description files, which can be entirely embedded into a SVG document. SVG performs no automatic line breaking or word wrapping. Tag can be used to realize line breaking and layout arrangement. In SVG text in the graphics is searchable as plain text. This feature makes it much easier to search for specific graphics contents.

    SVG allows any painting operation limited to a sub-region of the viewport by clipping and masking. Clipping paths use any combination of paths, text and basic shapes to serve as the outline of a 1-bit mask, where everything on the "inside" of the outline is allowed to show through but


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    everything on the outside is masked out. Masks are container elements, which can contain graphical elements, or other container elements that define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background. One key distinction between a clipping path and a mask is that clipping paths are hard masks whereas masks consist of an image where each pixel value indicates the degree of transparency and opacity. In a mask, each pixel value can range from fully transparent to fully opaque.

    The most exciting rich-content feature is Filter. A filter effect consists of a series of graphics operations that are applied to a given source graphics to produce a modified graphical result. The result of the filter effect is rendered to the target device instead of the original source graphic. When combined with the 2D power of SVG, filter effects can describe much of the common artwork on the Web in such a way that client-side generation and alteration can be performed easily. So far there are 19 filter primitives in the SVG specification 1.0. Each filter primitive performs a single fundamental graphical operation. Filter primitives are usually combined to achieve a complex filter effect. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA image.

    2.4 Dynamic features

    Because the Web is a dynamic media, SVG supports the ability to change vector graphics over time. SVG provides two major animation means: using SVGs animation elements or using SVG DOM.

    SVGs animation elements are developed in collaboration with W3Cs

    SMIL [] working group. The animation elements support the time-based modification to the SVG documents elements. They share the same timing

    and animation mechanisms with SMIL. The animation defines a mapping of time to values for the target attributes. This mapping accounts for all aspects of timing, as well as animation-specific semantics. Various SVG elements can be animated, such as color value, position, filter parameters etc.

    The Document Object Model (DOM) [10] is a platform- and

    language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. SVG offer a set of additional DOM interfaces (ECMAScript and Java bindings) to support efficient animation via scripting. All the SVG elements and their attributes can be accessed by using DOM, so it is less limited and more powerful than the animation elements.

    SVG graphics can also be highly interactive. SVG supports many UI (user interface) events and pointing events. It provides a quick and effective mechanism to process these events. Moving or clicking the mouse over any graphics elements is able to generate immediate feedback, such as highlighting,


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    text tips, and real-time changes to the surrounding HTML text. Animations and scripts executions can also be triggered by this mechanism. With this interactive feature, SVG is capable in game making. Roid [11] made by Kevin Lindsey is a good start point.

    2.5 Enhanced features for web use

    The most important reason for developing SVG is to meet the needs in Web graphics. Benefiting from the introduction of vector graphics, SVG documents can be much smaller than the traditional raster graphics because it is unnecessary for them to record information of each pixel. Further more, SVG document is plain text, it can be easily compressed using GZIP [12] format.

    The rendering mechanism in SVG makes best use of the processing power at client-side. It uses the network bandwidth wisely and efficiently while easing the burden of the server-side.

    Being a XML namespace, SVG can readily cooperate with other XML-based technologies. For example, SVG uses existing standards XLink [13] and XPointer [14] to realize the hyperlink ability. Hyper links may be used to refer to other files, resources or some elements within a XML (including SVG) document. It is more convenient and powerful than the hyperlink ability supported by the current HTML.

    Metadata is structured data about data. It provides information about resources (document, data, graphics etc). In the computing industry, there are ongoing standardization efforts towards metadata with the goal of promoting industry interoperability and efficiency. SVG also supports metadata, which can be embedded into SVG documents to provide the information about the graphics contents to enable SVG to strongly support the automation, integration and reuse of data across various applications.

    3 Implementation status

    3.1 Overview

    To promote SVGs popularity, good industry implementations are the preconditions. All the implementations can be classified into four catalogs: viewing tools, authoring tools, developing tools, server-side generating and format converting tools. The detailed official list of implementations is on the W3Cs web site [15]. This paper will select one or two representative implementations of each catalog for in-depth probe.

    3.2 Viewing tools

    The most commonly used SVG viewing tool is the Adobe‟s SVG Viewer

    [16]. It is a plug-in that the web browsers use to render SVG. It works on the windows and Mac platforms. The latest version is 3.0 beta2. It not only supports almost all the SVG features listed in the specification, but also adds some new features such as mp3 sound. Just as Macromedias Flash [17]

    plug-in, the biggest problem of SVG viewer is that it is not very convenient


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    for the end users to install the plug-in especially in order to gain the SVG viewing ability. Both the latest Internet Explorer and Netscape Navigator dont

    support SVG at this moment. That is the key point.

    Besides SVG Viewer, other SVG viewing tools are standalone

    applications. Common people prefer easiest way to view SVG, the way just like viewing other graphics, so these SVG viewing applications are not so competent as SVG Viewer in the business market. Most of them are just experimental prototypes for research purpose, such as IBMs SVGView. [18]

    3.3 Authoring tools

    Many professional vector graphics authoring software are able to export graphics contents into SVG files. Because SVG is a vector graphics format itself, it is not too difficult for these tools to gain the exporting capability. Adobes Illustrator and Corels CorelDraw are examples in case.

    The current implementations of the exporting ability in the software are preliminary. For they must build the exporting ability onto the previous infrastructure, it is limited to fully exploit the expressive force of SVGs

    feature set. For instance, Illustrator can make many wonderful image-processing effects to the vector graphics, which can also be achieved by using SVG filters. When exporting to SVG files, Illustrator only simply saves the graphics with effect into a section of image data embedded into the SVG files, just because the two effect mechanisms are not corresponding. This compromise surely undermines the advantages of the exported SVG files. Another kind of SVG authoring tools is a standalone application wholly authoring SVG graphics. The most representative one is Jascs WebDraw [19],

    which was formerly known as Trajectory Pro. The WYSIWYG (What You See Is What You Get) visual editing of filters is a notable feature. It can edit the SVG source code directly for maximum control and flexibility with the automatic source code validation and error reporting. The drawback of WebDraw is its immaturity, for it is only in the preview stage. After all, it is a newly developed application without previous foundations.

    3.4 Developing tools

     In SVG world the most important developing tool is Batik [20], which is developed by Apache organization. It is a Java(tm) technology based toolkit for applications that intend to use images in the SVG format for various purposes, such as viewing, generation or manipulation. Batik is an open source project with the ambition to give developers a set of core modules, which can be used together, or individually to support specific SVG solutions. Example modules are SVG parsers, SVG generators and SVG DOM implementations. The current developer release version is batik-1_1rc2 in this September.

    Batik has implemented most of the static features of SVG specification, but hasnt done well enough in the dynamic features. Testing in the official test suites, Batik passed in 91 static tests (total 94), while only 5 in dynamic tests


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    (total 32). One important reason for this imbalance status lies in Batiks

    system infrastructure. The Batik modules are classified into three types: application modules, core modules, and low-level modules. The application modules represent independent SVG application tools. The core modules offer interfaces to the application level, while transforming the SVG feature set to the low-level modules feature set. All rendering processes are done in the low-level module GVT (Graphic Vector Toolkit), which is an existing open source toolkit. The rendering mechanism in GVT doesnt support the dynamic

    changes to graphical objects. This drawback ultimately results in the limited processing power in dynamic features for the all batik applications.

    Nonetheless, Batik is very important because it provides the developers a versatile groundwork in nearly all the aspects of SVG. It is much easier for developers to design their applications basing on batik toolkits. 3.5 Generating and converting tools

    Because SVG files are also XML files, the server-side tools can dynamically generate SVG contents just in the same way as XML contents are generated. The source for generating can be other XML data, data extracted from database or data in other file formats. The conversion tools can be rasterization tools or file format conversion tools, such as SVG to PDF, JPEG to SVG and so on.

    4 Related research and future work

    4.1 Constraint SVG

    A constraint is a relation that we would like to maintain. The key benefit of constraints is the separation of what relationships we desire from how we must go about maintaining. [21] Over the last thirty years, scientists have forced their way to introduce constraint into the interactive graphical applications. They are trying to find a good tradeoff between performance and expressiveness. Washington University has developed a sophisticated new constraint solving toolkit, Cassowary [22], which is based on the simplex algorithm.

    As an interactive graphics standard, SVG can also be extended to be CSVG (Constraints SVG) [23] with Cassowary algorithm.


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    Figure 4.1 the process of delivering a SVG image across the network.

    Figure 4.2 the process of delivering a CSVG image across the network.

    The constraint extension to SVG permits describing the authors layout

    intentions, and defers the actual positioning and sizing of the images elements

    until just before final display for the user (Figure 4.2), thus resulting in greater flexibility in dealing with varied viewing environments and user desires. For future improvements of CSVG, a good authoring environment is needed, which is expected to be able to preserve the authors intentions sufficiently

    well to generate CSVG at the appropriate level of abstraction. Another area for future work is to describe the semantics of the SVG by constraints and constraint hierarchy theory in a better way. So far CSVG can manage only linear constraints, this is a limitation derived from the Cassowary algorithm.


    Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    To overcome this limitation, we have to develop a new constraint simplex algorithm.

    Overall, CSVG is a successful extension to SVG. It provides a surprising amount of expressiveness at a minimal implementation complexity and a low performance cost.

4.2 Mobile SVG

    SVG graphics is not limited to normal PCs. There is an increasing demand for graphics applications on various small devices, including PDA and mobile phone. The SVG working group is defining a Mobile SVG profile [24] for this purpose. The future Mobile SVG will be widely used in many fields such as location-based service, mapping and positioning, animated picture message, entertainment and etc. The rendering model of Mobile SVG must be a true subset of the SVG rendering model. Mobile SVG must consider constraints of handheld devices, particularly low-power CPU, small display, limited interaction and small memory. Because SVG is vector graphics, different display resolutions of various devices cannot really be an obstacle for SVG graphics to be correctly rendered. The true difficulty remains in the limited graphics process power on the handheld devices, for CPU interprets and processes all the rendering of SVG graphics. To overcome this obstacle, a welled defined feature subset of SVG and the improvement of hardware environment are the preconditions. BitFlash Inc. provides a mobile SVG implementation on several handheld devices [25]. It can be a good start point of the future Mobile SVG.

    5 A Demo

    The following demo is a simple seat information and reservation system for a Boeing airplane. It uses SVG to work out the representative level, uses JavaScript for client-side interactivity, PHP and MySQL for server-side database.

    The seats are classified into three types by price. Different colors are used to identify them. The detailed information of all the seats is saved in the server-side database. Users can point to the seats they prefer for further information. The SVG text is changed with the moving of mouse pointer. You can click to perform a seat reservation, and press the Buy button for final certification. After that, the sold seat are recorded into the database, and grayed out in the graphics to avoid repeated sale.


Series of Selected Papers from Chun-Thsung Scholars, Peking University(2001)

    Figure 5.1 screenshot of the demo

    This demo is just a prototype to demonstrate SVG s rich-content feature,

    interaction ability and the cooperating power with other technologies.

6 Conclusions

    SVG is a powerful XML syntax for rich, dynamic 2D graphics. It enables portable graphics data for a wide array of applications especially in the web environment. The industry implementation efforts and the related research progress will surely promote this new graphics standard to be a major format of graphics data.












Report this document

For any questions or suggestions please email