SVG - Wikipedia

Two-dimensional vector image file format For other uses, see SVG (disambiguation).For help about SVG images on Wikipedia, see Wikipedia:SVG help. SVGFilename extensions.svg, .svgzInternet media typeimage/svg+xml[1][2]Uniform Type Identifier (UTI)public.svg-imageDeveloped byW3CInitial release4 September (23 years ago) ( )Latest release1.1 (Second Edition)
16 August ; 13 years ago ( ) Type of formatVector graphicsExtended fromXMLStandardW3C SVGOpen format?YesWebsitewww.w3.org/Graphics/SVG/

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

For more information, please visit our website.

SVG images are defined in a vector graphics format and stored in XML text files. SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed. The XML text files can be created and edited with text editors or vector graphics editors, and are rendered by most web browsers. SVG can include JavaScript, potentially leading to cross-site scripting.

History

[edit]

SVG has been in development within the World Wide Web Consortium (W3C) since after six competing proposals for vector graphics languages had been submitted to the consortium during (see below).[3]

The early SVG Working Group decided not to develop any of the commercial submissions, but to create a new markup language that was informed by but not really based on any of them.[3]

SVG was developed by the W3C SVG Working Group starting in , after six competing vector graphics submissions were received that year:

• Web Schematics, from CCLRC[4]
• PGML, from Adobe Systems, IBM, Netscape and Sun Microsystems[5]
• VML, by Autodesk, Hewlett-Packard, Macromedia, Microsoft, and Vision[6]
• Hyper Graphics Markup Language (HGML), by Orange UK and PRP[7]
• WebCGM, from Boeing, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC, and Xerox[8]
• DrawML, from Excosoft AB[3]

The working group was chaired at the time by Chris Lilley of the W3C.

Early adoption was limited due to lack of support in older versions of Internet Explorer. However, as of , all major desktop browsers began to support SVG. Native browser support offers various advantages, such as not requiring plugins, allowing SVG to be mixed with other content, and improving rendering and scripting reliability. Mobile support for SVG exists in various forms, with different devices and browsers supporting SVG Tiny 1.1 or 1.2. SVG can be produced using vector graphics editors and rendered into raster formats. In web-based applications, Inline SVG allows embedding SVG content within HTML documents.

The SVG specification was updated to version 1.1 in . Scalable Vector Graphics 2 became a W3C Candidate Recommendation on 15 September . SVG 2 incorporates several new features in addition to those of SVG 1.1 and SVG Tiny 1.2.[9]

Version 1.x

[edit]

• SVG 1.0 became a W3C Recommendation on 4 September .[10]
• SVG 1.1 became a W3C Recommendation on 14 January .[11] 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 . These are described as profiles of SVG 1.1.[12]
• SVG Tiny 1.2 became a W3C Recommendation on 22 December .[13] It was initially drafted as a profile of the planned SVG Full 1.2 (which has since been dropped in favor of SVG 2),[14] but was later refactored as a standalone specification. It is generally poorly supported.
• 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 .[15]
• SVG Tiny 1.2 Portable/Secure, a more secure subset of the SVG Tiny 1.2 profile introduced as an IETF draft standard on 29 July .[16] Also known as SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure is a requirement of the BIMI draft standard.[17]

Version 2

[edit]

SVG 2 removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web Open Font Format (WOFF):[18]

• For example, SVG 2 removes several font elements such as glyph and altGlyph (replaced by the WOFF).
• The xml:space attribute is deprecated in favor of CSS.
• HTML5 features such as translate and data-* attributes have been added.
• Text handling features from SVG Tiny 1.2 are annotated as to be included, but not yet formalized in text.[19] Some other 1.2 features are cherry picked in,[18] but SVG 2 is not a superset of SVG tiny 1.2 in general.

SVG 2 reached the Candidate Recommendation stage on 15 September ,[20] and revised versions were published on 7 August and 4 October .[21] The latest draft was released on 08 March .[22]

Features

[edit]

SVG supports interactivity, animation, and rich graphical capabilities, making it suitable for both web and print applications. SVG images can be compressed with the gzip algorithm, resulting in SVGZ files that are typically 20–50% smaller than the original. SVG also supports metadata, enabling better indexing, searching, and retrieval of SVG content.

SVG allows three types of graphic objects: vector graphic shapes (such as paths consisting of straight lines and curves), bitmap 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 objects. SVG drawings can be interactive and can include animation, defined in the SVG XML elements or via scripting that accesses the SVG Document Object Model (DOM).

SVG uses CSS for styling and JavaScript for scripting. Text, including internationalization and localization, appearing in plain text within the SVG DOM, enhances the accessibility of SVG graphics.[15]

Printing

[edit]

Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe's PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page.[23]

Scripting and animation

[edit] 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. JavaScript). The W3C explicitly recommends SMIL as the standard for animation in SVG.[24]

A rich set of event handlers such as "onmouseover" and "onclick" can be assigned to any SVG graphical object to apply actions and events.

Mobile profiles

[edit]

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; it does not support styling or scripting.[25] SVG Basic was defined for higher-level mobile devices, such as smartphones.

In , 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.[26][27][28] It was later[when?] added as required format for vector graphics in 3GPP IP Multimedia Subsystem (IMS).[29]

Neither mobile profile includes support for the full Document Object Model (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.[30]

SVGT 1.2 adds a microDOM (μDOM), styling and scripting.[25] SVGT 1.2 also includes some features not found in SVG 1.1, including non-scaling strokes, which are supported by some SVG 1.1 implementations, such as Opera, Firefox, and WebKit. As shared code bases between desktop and mobile browsers increased, the use of SVG 1.1 over SVGT 1.2 also increased.

Compression

[edit]

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 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.[31] An SVGZ file is typically 20 to 50 percent of the original size.[32] W3C provides SVGZ files to test for conformance.[33]

Design

[edit]

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

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 (for "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.[34]

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

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 or Japanese may be written) and characters along a curved path (such as the text around the edge of the Great Seal of the United States).[36]

Painting

SVG shapes can be filled and outlined (painted with a color, a gradient, or a pattern). Fills may 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.[37]

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%).[38]

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 y directions. Gradients and patterns can be animated and scripted.[39]

Since , there has been discussion[40][41] 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"[42] 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."[43] The current draft of SVG 2 includes gradient meshes.[44]

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

Filter effects[46]

Main article: SVG filter effects

A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified bitmapped result.

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

Linking

SVG images can contain hyperlinks to other documents, using XLink. Through the use of the element or a fragment identifier, URLs can link to SVG files that change the visible area of the document. This allows for creating specific view states that are used to zoom in/out of a specific area or to limit the view to a specific element. This is helpful when creating sprites. XLink support in combination with the element also allow linking to and re-using internal and external elements. This allows coders to do more with less markup and makes for cleaner code.[48]

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 JavaScript and there are defined Document Object Model (DOM) objects for every SVG element and attribute. Scripts are enclosed in