Scalable Vector Graphics
From Free net encyclopedia
{{Infobox file format | name = Scalable Vector Graphics | extension = .svg | mime = image/svg+xml | owner = World Wide Web Consortium | creatorcode = | genre = vector image format | containerfor = | containedby = | extendedfrom = XML | extendedto = }} Image:Svg.svg
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.
Contents |
Overview
SVG allows three types of graphic objects:
- Vector graphic shapes (e.g. paths consisting of straight lines and curves, and areas bounded by them)
- Raster graphics images / digital images
- 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.
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 namespaces simultaneously within the same web page. An extreme example of this is a complete tetris game implemented as an SVG object, found here! (The link requires an SVG enabled browser.)
If storage space is an issue, SVG images can be saved with gzip compression, in which case they may be called "SVGZ files". Because XML contains verbose text, it tends to compress very well and these files can be much smaller. Often however the original vector-file (SVG) is already smaller than the rasterised version.
Impact on the Web
The widespread adoption of SVG clients, particularly those natively embedded in web browsers (as it is in Firefox and Opera), may bring a significant new look-and-feel to the World Wide Web. A current trend is to build dynamic web sites that behave somewhat like desktop applications, utilizing the Ajax technique. SVG enhances the capabilities of Ajax, by providing a rich, graphical set of page elements, well beyond those specified by HTML/CSS. The SVG Terminal module for Firefox is an early example of this.
Development history
SVG was developed by the W3C SVG Working Group starting in 1998, after Macromedia and Microsoft introduced Vector Markup Language (VML) whereas Adobe Systems and Sun Microsystems submitted a competing format known as PGML. The working group was chaired by Chris Lilley of the W3C.
- SVG 1.0 became a W3C Recommendation on 2001-09-04.
- SVG 1.1 became a W3C Recommendation on 2003-01-14.
- SVG Tiny and SVG Basic (the Mobile SVG Profiles) became W3C Recommendations on 2003-01-14. These are described as profiles of SVG 1.1.
- SVG Tiny 1.2 and SVG Full 1.2 are both currently W3C Working Drafts. SVG Tiny 1.2 was initially released as a profile, and later refactored to be a complete specification, including all needed parts of SVG 1.1 and SVG 1.2. As of 2005-12-07, SVG Tiny 1.2 is now in Last Call Working Draft. A similarly refactored draft for SVG 1.2 Full has not yet been released.
Mobile profiles
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.
Support for SVG in browsers and other applications
The use of SVG on the web is in its infancy. There is a great deal of inertia from the long-time use of pure raster formats and other formats like Macromedia Flash or Java applets, but also browser support is patchy, with most browsers requiring 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, or Batik, which implements all SVG except declarative animation but requires the Java Runtime Environment.
Some wikis have experimented with SVG support; it has been speculated that since SVG is a text-based format, a wiki might allow edits to SVG images in a fashion similar to editing a standard article. However, the benefits of editing images in this way are disputed. It is generally considered that even trivial editing is better achieved using a separate graphics package because it is difficult to visualise exactly how changes to the XML will appear on the final image. Current wikis mostly do not support either the display or editing of SVG images, partly because of the lack of full browser support, but also because rasterization using Batik is CPU-intensive and requires Sun's Java Runtime Environment, which is not free (as in freedom). In the spirit of being open, many wikis refuse to use non-free software; for example Jimbo Wales speaks about this in his weblog [1]. SVG support would be valuable to a wiki, especially for articles that require diagrams, so the situation may change in the future, when ImageMagick is expanded to cover more of the SVG standard, and work on allowing Batik to run on a completely free Java implementation is complete [2]. Wikipedia currently supports the SVG format.
Plugin support
In browsers such as Internet Explorer and Safari, a plugin is needed to view SVG content. The most widely available SVG plugin on the desktop is from Adobe Systems (the Adobe SVG Viewer) which supports most of SVG 1.0/1.1. The current version of Safari ships with the plugin, while Internet Explorer users must separately download it. A legacy plugin was once offered from Corel (the Corel SVG Viewer).
Native support
There are several advantages to native support, among which are no need for the installation of a plugin, the ability to freely mix SVG with other formats in a single document, and rendering scripting between different document formats considerably more reliable. At this time all major browsers have committed to some level of SVG support except for Internet Explorer. See Comparison of layout engines for further details.
- The Opera web browser (since 8.0) has support for the SVG 1.1 Tiny specification. Opera 9 will include SVG 1.1 Basic support.
- Browsers based on the Gecko layout engine version 1.8 (such as Firefox 1.5, Camino 1.0 and SeaMonkey internet suite 1.0), all have incomplete support for the SVG 1.1 Full specification. The Mozilla site has an overview of the modules which are supported in Firefox 1.5 and an overview of the modules which are in progress in the development version of Firefox.
- Apple's Safari browser, has also recently begun to port KSVG2 into WebCore, initiating work on incorporating native support of SVG into Safari. Nightly builds of Safari now include SVG support.
- KDE's Konqueror has a fairly complete SVG plugin called KSVG. KSVG2 is slated to be rolled into KDE 4 core which could make it native rendering for Konqueror some time in the future. Elsewhere in KDE the format is finding greater use, and from version 3.4 onwards SVG wallpapers are supported
- The Amaya web browser has partial SVG support
- The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics
- SVG Salamander is an open alternative to Batik for Java
- The Gnome project has had integrated SVG support throughout the desktop since 2000.
Mobile support
On mobile, the most popular implementations for mobile phones are by Ikivo and Bitflash, while for PDAs, Bitflash and Intesis have implementations. Flash Lite by Macromedia optionally supports SVG Tiny since version 1.1. At the SVGOpen 2005 conference, Sun demonstrated a mobile implementation of SVG Tiny 1.1 for the CDLC platform. The TinyLine SVG viewer, written in Java, is also targeted at mobile devices.
Tools
Graphics editors
- Inkscape and Sodipodi are open-source multi-platform vector editors using SVG as their native format.
- GLIPS Graffiti is an open source native SVG editor based on Batik toolkit (see below).
- Sketsa is a proprietary native SVG editor based on Batik toolkit.
- Most of the major commercial vector graphics editors including Adobe Illustrator and Corel Draw support SVG export and import.
- GIMP is an open-source multi-platform graphics editor with SVG import and export capabilities; however, the export function only applies to vector graphics produced or edited in the GIMP.
- Skencil is an open source vector editor with SVG import and export.
Other editors
- Dia is an open-source general-purpose diagram creation program supporting SVG.
- Microsoft Visio 2003 is a commercial diagram creation program supporting SVG.
- OpenOffice.org Draw 1.1 and up can export SVG files, for Draw 2.0, there is an additional SVG import plugin (latest status)
- Scribus is an open source desktop publishing application which supports SVG import and export.
- SVGmaker creates SVG from standard Windows programs including the ubiquitous Office suite.
- Ikivo Animator is an application for designing animated SVG content for mobile devices. It integrates with Adobe Creative Suite.
Programming Toolkits
- 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.
- Trolltech's Qt toolkit supports SVG rendering since version 4.1.
- IntuiKit is a commercial Perl/[[C++]] GUI toolkit with a native support for SVG graphics. Multi-platform real-time SVG rendering is done via TkZinc or Anti-Grain Geometry.
- The SVG Scene toolkit enables developers to create application views by constructing an SVG scene. A scene may be displayed simultaneously in multiple windows, possibly on separate clients.
- Together, JFreeChart, and Compuware's OptimalJ, use SVG.
- Beatware Mobile Designer is a SVG content creation tool for mobile developers.
See also
- Rich Internet Application
- Semantic Web
- 2D computer graphics
- 3D computer graphics
- Raster to vector
- List of vector graphics markup languages
- Comparison of layout engines (graphics)
- Open Clip Art Library
External links
News and Reference
- Official W3C SVG page
- SVG.org - Widely recognized SVG community website offering news and the SVG wiki
- SVG Startpagina - Broad range of SVG links
- SVGX - Contemporary links of interest to SVG developers
- GISWiki - A Wiki for geoinformatics with a special focus on SVG (German & English)
- SVG and tools
Demos
- Mozilla SVG Demos
- Can you put the moon into orbit? (simulation)
- SVG mapping examples, tutorials and shp2svg converter
- Sample SVG files created from popular programs
- SVG pad
- Adobe SVG Demos (These examples are for Adobe's SVG variant, and require Adobe's plugin)
Software
- Macromedia Flash (SWF) to SVG converter - A web-tool which converts SWF files to SVG
- Flame Project Open Source Flash GUI under development
- SVG converter - The unique tool to convert WMF to SVG
- Ikivo Animator - SVG Tiny animation and preview functionality
- The Gimp - The GNU Image Manipulation Program
- Inkscape - an open source SVG editor
- Adobe SVG Plugin
- Mozilla SVG
- ksvg SVG renderer for KDE/khtml
- GLIPS Graffiti SVG Editor - Open source, libre and extensible SVG graphics editor
- Sketsa - SVG Graphics Editor
- BitFlash - SVGT Player
- Convert files to SVG format
- SVGFactory, converts BMP and WMF to SVG
- Beatware Mobile Designer - WYSIWYG SVG animation
- Xfig - Interactive vector drawing program with export to SVG (Example)
- AutoTrace - converts bitmap to vector graphics
Libraries
- SVG Salamander - Java SVG player and renderer (LGPL)
- librsvg - SVG renderer for GNOME, and Mozilla/Firebird plugin
- SVG Perl module
- Trolltech's QtSvg module
- SVG Rendering engine Comparison pages - comparsions of several FOSS SVG libraries, with screenshots
Tutorials
- Introduction to Presenting Scientific and Medical Data on the Web using Scalable Vector Graphics
- Pike's SVG Tutorial
- SVGBasics
- SVG Authoring Guidelines
Articles
- Math Games: Vector vs Raster (maa.org) - A list of 31 SVG editors
- SVG Open, annual international conference on Scalable Vector Graphics
- Article "SVG: A Sure Bet"
- Article "SVG Is The Future"
- Descriptions from Webreference
- The future of SVG
- Magical pictures
- Open Source and SVG
- The story of two SVG libraries - open source SVG library comparisons
- Rendering results - images of rendering result from various open source SVG backends
- SVG and its Path into the Linux Desktop
- Discussion about free implementations
- The story of two SVG libraries - open source SVG library comparisons
SVG clipart
- Open Clip Art Library
- GNOME themes extras package
- Crystal Icons
- Gartoon Icons Theme
- BlueSphere Icon Theme
- SVG Document Templates created using Inkscape
Wikipedia
ar:SVG zh-min-nan:SVG ca:SVG cs:SVG da:Scalable Vector Graphics de:Scalable Vector Graphics es:Scalable Vector Graphics fa:گرافیک برداری مقیاسپذیر fr:Scalable Vector Graphics ko:SVG id:SVG it:Scalable Vector Graphics lt:SVG hu:SVG nl:Scalable Vector Graphics ja:Scalable Vector Graphics pl:SVG pt:SVG ru:SVG sk:Scalable Vector Graphics sl:SVG fi:SVG sv:SVG th:Scalable Vector Graphics vi:SVG zh:可缩放矢量图型