Svg

"SVG" redirects here. For other uses, see SVG (disambiguation).

Scalable Vector Graphics
Filename extension .svg, .svgz
Internet media type image/svg+xml[1][2]
Uniform Type Identifier public.svg-image
UTI conforms to public.image
Developed by World Wide Web Consortium
Initial release 4 September 2001 (2001-09-04)
Latest release 1.1 (Second Edition) / 16 August 2011; 2 years ago (2011-08-16)
Type of format Vector image format
Extended from XML
Open format? Yes
Website
Scalable Vector Graphics


Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.

All major modern web browsers—including Mozilla Firefox, Internet Explorer 9 and 10, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly.

Overview

SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobe's PostScript) and Vector Markup Language (VML, developed from Microsoft's RTF) were submitted to W3C in 1998. SVG drew on experience from the designs of both those formats.[3]

SVG allows three types of graphic objects: vector graphics, raster graphics, and text. Graphical objects, including PNG and JPEG raster images, can be grouped, styled, transformed, and composited into previously rendered objects. SVG does not directly support z-indices[4] that separate drawing order from document order for overlapping objects, unlike some other vector markup languages like VML. Text can be in any XML namespace suitable to the application, which enhances search ability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects, and extensibility.

Since 2001, the SVG specification has been updated to version 1.1. The SVG Mobile Recommendation introduced two simplified profiles of SVG 1.1, SVG Basic and SVG Tiny, meant for devices with reduced computational and display capabilities. An enhanced version of SVG Tiny, called SVG Tiny 1.2, later became an autonomous Recommendation. Work is currently in progress on SVG 2, which incorporates several new features in addition to those of SVG 1.1 and SVG Tiny 1.2.

Printing

Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language (PDL), like Adobe's PDF. It contains provisions for rich graphics, and is also compatible with CSS for styling purposes. It is unlike XHTML, whose primary purpose is communication of content, not presentation, and therefore specifies objects to be displayed but not where to place such objects. Conversely SVG is an ideal PDL for print-oriented uses, as it contains all the functionality required to place each glyph and image in a chosen location on the final page.[5] A much more print-specialized subset of SVG (SVG Print, authored by Canon, HP, Adobe and Corel) is currently a W3C Working Draft.[6]

Scripting and animation

Main article: SVG animation

SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in SMIL, or can be programmed in a scripting language (e.g., ECMAScript or JavaScript). The W3C explicitly recommends SMIL as the standard for animation in SVG.[7] A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object.

Compression

SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. When an SVG image has been compressed with the industry standard gzip algorithm, it is referred to as an "SVGZ" image and uses the corresponding .svgz filename extension. Conforming SVG 1.1 viewers will display compressed images.[8] An SVGZ file is typically 20 to 50 percent of the original size.[9] W3C provides SVGZ files to test for conformance.[10]

Development history

SVG was developed by the W3C SVG Working Group starting in 1998, after Macromedia and Microsoft introduced 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 4 September 2001.[11]
  • SVG 1.1 became a W3C Recommendation on 14 January 2003.[12] 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 14 January 2003. These are described as profiles of SVG 1.1.[13]
  • SVG Tiny 1.2 became a W3C Recommendation on 22 December 2008.[14] It was initially drafted as a profile of the planned SVG Full 1.2 (which has since been dropped in favor of SVG 2),[15] but was later refactored as a standalone specification.
  • SVG 1.1 Second Edition, which includes all the errata and clarifications, but no new features to the original SVG 1.1 was released on 16 August 2011.[16]
  • SVG 2 will completely rework draft 1.2 with more integration with new web features such as CSS, HTML5 and WOFF. It is scheduled as "recommendation" for August 2014.[17]

The MPEG-4 Part 20 standard - Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF) is based on SVG Tiny.[18] It was developed by MPEG (ISO/IEC JTC1/SC29/WG11) and published as ISO/IEC 14496-20:2006.[19] SVG capabilities are enhanced in MPEG-4 Part 20 with key features for mobile services, such as dynamic updates, binary encoding, state-of-art font representation.[20] SVG was also accommodated in MPEG-4 Part 11, in the Extensible MPEG-4 Textual (XMT) format - a textual representation of the MPEG-4 multimedia content using XML.[21]

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.

In 2003, the 3GPP, an international telecommunications standards group, adopted SVG Tiny as the mandatory vector graphics media format for next-generation phones. SVGT is the required vector graphics format and support of SVGB is optional for Multimedia Messaging Service (MMS) and Packet-switched Streaming Service (PSS).[22][23][24] It was later added as required format for vector graphics in 3GPP IP Multimedia Subsystem (IMS).[25] 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.[26]

SVGT 1.2 adds a microDOM (μDOM), allowing all mobile needs to be met with a single profile.

Functionality

The SVG 1.1 specification defines 14 functional areas or feature sets:[12]

Paths
Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path. Paths have a compact coding. For example M (for 'move to') precedes initial numeric x and y coordinates and L (line to) precedes a point to which a line should be drawn. Further command letters (C, S, Q, T and A) precede data that is used to draw various Bézier and elliptical curves. Z is used to close a path. In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.[27]
Basic shapes
Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.[28]
Text
Unicode character text included in an SVG file is expressed as XML character data. Many visual effects are possible, and the SVG specification automatically handles bidirectional text (for composing a combination of English and Arabic text, for example), vertical text (as Chinese was historically written) and characters along a curved path (such as the text around the edge of the Great Seal of the United States).[29]
Painting
SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. "Markers" are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.[30]
Color
Colors can be applied to all visible SVG elements, either directly or via 'fill', 'stroke,' and other properties. Colors are specified in the same way as in CSS2, i.e. using names like black or blue, in hexadecimal such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).[31]
Gradients and patterns
SVG shapes can be filled or outlined with solid colors as above, or with color gradients or with repeating patterns. Color gradients can be linear or radial (circular), and can involve any number of colors as well as repeats. Opacity gradients can also be specified. Patterns are based on predefined raster or vector graphic objects, which can be repeated in x and/or y directions. Gradients and patterns can be animated and scripted.[32]
Since 2008, there has been discussion[33][34] among professional users of SVG that either gradient meshes or preferably diffusion curves could usefully be added to the SVG specification. It is said that a "simple representation [using diffusion curves] is capable of representing even very subtle shading effects"[35] and that "Diffusion curve images are comparable both in quality and coding efficiency with gradient meshes, but are simpler to create (according to several artists who have used both tools), and can be captured from bitmaps fully automatically."[36] The current draft of SVG 2 includes gradient meshes.[37]
Clipping, masking and compositing
Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.[38]
Filter effects[39]
Main article: SVG filter effects
Interactivity
SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface events such as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.[40]
Linking
SVG images can contain hyperlinks to other documents, using XLink. URLs of SVG images can specify geometrical transforms in the fragment section.[41]
Scripting
All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. The default scripting language is ECMAScript (closely related to JavaScript) and there are defined Document Object Model (DOM) objects for every SVG element and attribute. Scripts are enclosed in