Jump to content

SVG

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Heycam (talk | contribs) at 23:37, 14 December 2006 (punc). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Scalable Vector Graphics
An SVG format image displaying transparency, gradients, various outlines and text.
Filename extension
.svg, .svgz
Internet media type
image/svg+xml
Developed byWorld Wide Web Consortium
Type of formatvector image format
Extended fromXML
SVG is also the IATA code for Stavanger Airport, Sola in Norway.
For Wikipedia-related information, see SVG support on Meta.

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

Overview

This image illustrates the difference between bitmap and vector images. The vector image can be scaled continuously, while the bitmap cannot.

SVG allows three types of graphic objects:

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.[1]

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 World Wide Web

The widespread adoption of SVG clients, particularly those natively embedded in web browsers (as it is in Firefox versions 1.5 and 2.0[2] 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.[3]

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.[4]
  • SVG 1.1 became a W3C Recommendation on 2003-01-14.[5] The SVG 1.1 specification is modularized in order to allow subsets to be defined as profiles. Apart from this, there is very little difference between SVG 1.1 and SVG 1.0.
    • 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 became a W3C Candidate Recommendation on 2006-08-10.[6][7] SVG Full 1.2 is a W3C Working Draft. 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. A similarly refactored draft for SVG 1.2 Full has not yet been released. A notable feature addition in the SVG Full 1.2 W3C Working Draft (absent from SVG Tiny 1.2) is syntax for multipage documents;[8] the semantics of multiple pages with respect to non-hardcopy rendering are however undefined.

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.[9]

Support for SVG in browsers

The use of SVG on the web is in its infancy. There is a great deal of inertia due to the long-time use of pure raster formats and other formats like Macromedia Flash or Java applets, but also browser support is still uneven, with native support in Opera and Firefox, but Safari and Internet Explorer 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.

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 while Opera 9 includes SVG 1.1 Basic support and some of SVG 1.1 Full.
  • Browsers based on the Gecko layout engine version 1.8 (such as Firefox, 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[10] and an overview of the modules which are in progress in the development version of Firefox [11]. The next version of Mozilla Firefox browser (3.0, codename Gran Paradiso) will support more of the SVG specification (including some filters). [12].
  • 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.
  • The Omni Group's OmniWeb 5.5 browser, which is based on a later version of Apple's WebCore/WebKit than that used in the current public release of Safari, has partial support for SVG.
  • 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.
  • Amaya has partial SVG support.

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 and supports most of SVG 1.0/1.1. (Adobe's SVG download page now says "Please note that Adobe has announced that it will discontinue support for Adobe SVG Viewer on January 1, 2008."[13]) A legacy plugin was once offered from Corel.

Support in applications

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 of SVG except for declarative animation but requires the Java Runtime Environment.

  • Inkscape is a free (open source) SVG drawing program for Linux, Windows, and Macintosh.
  • Sodipodi is another free open source SVG editing program, on which Inkscape is based.
  • The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics.
  • The GNOME project has had integrated SVG support throughout the desktop since 2000.
  • Images drawn in OpenOffice.org Draw can be exported as SVG. Import filters are available[14] to import SVG images into OOo documents.
  • Adobe Illustrator supports both the import and export of SVG images.
  • CorelDRAW X3 has an SVG export and import filter.
  • Sketsa is a cross-platform SVG drawing software.[15]
  • Xara Xtreme has an SVG export and import filter in its OpenSource Linux version.

Some viewers are listed in External links below.

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 SVG Open 2005 conference, Sun demonstrated a mobile implementation of SVG Tiny 1.1 for the CDLC platform. Mobile svg players from Ikivo and BitFlash come pre-installed i.e. manufacturer burn the SVG player code in their mobiles before shipping to the customers.

Level of SVG Tiny support varies from mobile to mobile depending on the manufacturer and version of the svg player installed. Many of the new mobiles support additional features beyond SVG Tiny 1.1, like gradient and opacity.

See also

References

  1. ^ "svgtetris" (SVG). Croczilla.com. Retrieved 2006-11-20.
  2. ^ "SVG in Firefox" (html). Mozilla Developer Center. Retrieved 2006-11-24.
  3. ^ http://networkimprov.net/airwrx/awscene.html
  4. ^ http://www.w3.org/TR/SVG10/
  5. ^ http://www.w3.org/TR/SVG11/
  6. ^ http://www.w3.org/TR/2006/CR-SVGMobile12-20060810/
  7. ^ http://lists.w3.org/Archives/Public/www-svg/2006Aug/0036.html
  8. ^ http://www.w3.org/TR/2004/WD-SVG12-20041027/multipage.html
  9. ^ A listing of phones that support SVG can be found at the svg.org community web site
  10. ^ http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5
  11. ^ http://www.mozilla.org/projects/svg/status.html
  12. ^ http://weblogs.mozillazine.org/tor/archives/2006/12/gran_paradiso_alpha_1_and_svg.html
  13. ^ http://www.adobe.com/svg/viewer/install/
  14. ^ http://wiki.services.openoffice.org/wiki/SVG_Import_Filter
  15. ^ http://www.kiyut.com/products/sketsa/index.html

News and reference

Application

Demos

Libraries

Tutorials

Articles

Viewers, editors and converters

see SVG Tools or the SVG Implementations Directory svgi.org

Template:Step

Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=SVG&oldid=94394793"