SVG

Jump to: navigation, search

Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional vector graphics, both static and animated (either declarative or scripted). It is an open standard created by the World Wide Web Consortium, which is also responsible for standards like HTML and XHTML.

Overview

SVG allows three types of graphic objects:

  1. vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them)
  2. raster graphics images / digital images
  3. text

Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. Text can be in any XML name space 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.

SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows straightforward and efficient vector graphics animation via ECMAScript or SMIL. 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 name spaces simultaneously within the same web page.

If storage space is an issue, SVG images are sometimes saved with gzip compression, in which case they may be called "SVGZ files". Because XML contains a lot of redundant data, XML tends to compress very well and these files can be much smaller. However, the uncompressed SVG file is usually much smaller than the compressed (jpg, png) rasterized data.

Potential

Widespread adoption of SVG clients, particularly when embedded natively into web browsers, may result in a revolution in the World Wide Web. The trend on the internet are web sites that behave like computer applications, utilizing a technique known as Ajax. SVG has the potential to vastly enhance the capabilities of Ajax by providing an mechanism for dynamically rendering page elements.

Small SVG subsets for embedded devices

Because of industry demand, two mobile profiles were introduced with SVG 1.1: SVG Tiny (SVGT) and SVG Basic (SVGB). These are subsets of the full SVG standard, mainly intended for user agents with limited capabilities. In particular, SVG Tiny was defined for highly restricted mobile devices such as cellphones, and SVG Basic was defined for higher level mobile devices, such as PDAs.

Neither mobile profile includes support for the full DOM, while only SVG Basic has optional support for scripting, but because they are fully compatible subsets of the full standard most SVG graphics can still be rendered by devices which only support the mobile profiles.

Application Support for SVG

Applications and Tools for creating SVG

  • OpenOffice.org Draw 1.1 and up can export SVG files, for Draw 2.0, there is an additional SVG import plugin.
  • Inkscape is an open-source multi-platform vector editor using SVG as its native format. Sodipodi is a predecessor of Inkscape, and is still under development independently.
  • Skencil is an open source vector editor with SVG import and export.
  • Apache Batik is a Java toolkit for applications or applets that want to use images in the SVG format for various purposes, such as viewing, generation or manipulation. Batik supplies a set of standard modules like SVG Parser, SVG Generator and SVG DOM; also includes an SVG viewer application.
  • The SVG Scene toolkit enables developers to create application views by constructing an SVG content model, or scene. A scene may be displayed simultaneously in multiple windows, possibly on separate clients. Rendering of the SVG is done via Cairo and Pango, which in turn support diverse targets, e.g. Windows, MacOS, PostScript, Xlib.
  • Scribus is a cross-platform open source page layout program with support for SVG

Support for viewing SVG in Web browsers

The use of SVG on the web is in its infancy. There is a great deal of inertia from the long-time use of completely raster formats and Macromedia Flash, but also browser support is patchy, with users of most browsers having to install a plugin. Web sites which serve SVG images typically also provide the images in a raster format, either automatically by HTTP content negotiation or allowing the user to directly choose the file. Alternative images are usually automatically rasterised using a library such as ImageMagick, which provides a quick but incomplete implementation of SVG.

There are several advantages to native support. For example there is no need for a plugin, SVG can be mixed with other formats in a single document, and scripting between different document formats is a lot more reliable.

External links

Official

Libraries

Tutorials

Articles

SVG clipart