Scalable Vector Graphics

From Seo Wiki - Search Engine Optimization and Programming Languages

Jump to: navigation, search
Scalable Vector Graphics
Filename extension .svg, .svgz
Internet media type image/svg+xml[1][2]
Developed by World Wide Web Consortium
Initial release Template:Start-date
Latest release Tiny 1.2 / December 22, 2008; 4417 day(s) ago
Type of format vector image format
Extended from XML
Free file format? Yes


File:Bitmap VS SVG.svg
This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of dots, while the vector image is composed of a fixed set of shapes. In the picture, scaling the bitmap reveals the dots and scaling the vector image preserves the shapes.

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).

The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviours are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available.

All major modern web browsers except Microsoft Internet Explorer support and render SVG markup directly.[3]



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

SVG allows three types of graphic objects:

Graphical objects 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 searchability 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 (current Recommendation) and 1.2 (still a Working Draft). 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. SVG Tiny later became an autonomous Recommendation (current version 1.2) and the basis for SVG 1.2. In addition to these variants and profiles, the SVG Print specification (still a Working Draft) contains guidelines for printable SVG 1.2 and SVG Tiny 1.2 documents.

The Canvas element in HTML5 provides a somewhat different approach to rendering dynamic graphics in HTML. But it doesn't allow for static rendering, and drawn elements are not identifiable in a DOM-like way.


While being primarily designated as a vector graphics markup language, the specification is also designed with 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 and XSL-FO, whose primary purpose is communication of content, not presentation, and so which specify objects to be displayed but not where to place such objects. Conversely SVG is an ideal PDL for print-orientated 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

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] however it is more common to find SVG animated with ECMAScript because it is a language that many developers already understand, and it is more compatible with existing renderers. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object.


SVG images, being XML, contain many repeated fragments of text and are thus particularly suited to compression by gzip, though other compression methods may be used effectively. Once an SVG image has been compressed by gzip it may be referred to as an "SVGZ" image, with the corresponding filename extension. The resulting file may be as small as 20% of the original size.[8]

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 4 September 2001.[9]
  • SVG 1.1 became a W3C Recommendation on 14 January 2003.[10] 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.[11]
  • SVG Tiny 1.2 became a W3C Recommendation on 22 December 2008.[12]
  • 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. SVG 1.2 Full adds modules onto the SVGT 1.2 core.
  • SVG Print adds syntax for multi-page documents and mandatory color management support.

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 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 MMS (Multimedia Messaging Service) and PSS (Packet-Switched Streaming Service).[13][14][15] It was later added as required format for vector graphics in 3GPP IP Multimedia Subsystem (IMS).[16]

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

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


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

Simple or compound shape outlines drawn with curved or straight lines can be filled in or outlined (or used as a clipping path) and are expressed in a highly compact coding in which, for example, M (from 'move to') precedes the initial numeric X and Y coordinates and L (line to) will precede a subsequent 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.[18]
Basic Shapes
Straight-line paths or 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 other standard elements.[19]
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 (as when 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 edges of the Great Seal of the United States).[20]
SVG shapes can be filled and/or outlined (painted with a color, a gradient or a pattern). Fills can be opaque or have various degrees of transparency. "Markers" are end-of-line features, such as arrowheads, or symbols which can appear at the vertices of a polygon.[21]
Colors can be applied to all visible SVG elements, either directly or via the '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%).[22]
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.[23]
Since 2008, there has been discussion[24][25] 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"[26] 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."[27]
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 simple alpha blending.[28]
Filter Effects[29]
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 to trigger events representing 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 and trigger any other scripts in response to these events.[30]
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 <script> elements. They can run in response to pointer events, keyboard events and document events as required.[32]
SVG content can be animated using the built-in animation elements such as <animate>, <animateMotion> and <animateColor>. Animation is also possible by manipulating the DOM using ECMAScript, using the scripting language's built-in timers. SVG animation has been designed to be compatible with current and future versions of Synchronized Multimedia Integration Language (SMIL). Animations can be continuous, they can loop and repeat and they can respond to user events, as mentioned above.[33]
As with HTML and CSS, text in SVG may reference external font files, such as system fonts. If the required font files do not exist on the machine where the SVG file is rendered, the text may not appear as intended. To overcome this limitation, text can be displayed in an 'SVG font', where the required glyphs are defined in SVG as a font that is then referenced from the <text> element.[34]
In accord with the W3C's Semantic Web initiative, SVG allows authors to provide metadata about SVG images. The main facility is the <metadata> element, where the document can be described using Dublin Core metadata properties (e.g., title, creator/author, subject, description, etc). Other metadata schemas may also be used. In addition, SVG defines <title> and <desc> elements where authors can provide further plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means.[35]

Support for SVG in web browsers

The use of SVG on the web is still limited by the lack of support in Microsoft Internet Explorer. Many web sites that serve SVG images, for example Wikipedia, also choose to provide the images in a raster format, either automatically by HTTP content negotiation or by allowing the user directly to choose the file.

Native support

As of 2009, all major desktop browsers, and many minor browsers, have some level of SVG support, except for Internet Explorer even as of version 8.[36][37] Other browsers' implementations are not yet complete; see Comparison of layout engines for further details. As of 2008, only Opera and Safari supported embedding via the <img> HTML element. Firefox and some other browsers that can display SVG graphics currently need them embedding in <object> or <iframe> elements to display them integrated as parts of an HTML webpage.[38] However, SVG images may be included in XHTML pages using XML namespaces.[39]

Tim Berners-Lee, the inventor of the Web, has been critical of Internet Explorer for its failure to support SVG.[40] All currently supported graphical browsers on Linux systems and the Macintosh have implemented some level of SVG support.

There are several advantages to native and full support: plugins are not needed, SVG can be freely mixed with other content in a single document, and rendering and scripting become considerably more reliable.

SVG and Microsoft Internet Explorer

As of 19 March 2009 (2009 -03-19), Internet Explorer 8, the latest release of Windows Internet Explorer, is the only current major browser not to provide native SVG support. Internet Explorer requires a plug-in to render SVG content. There are a number of plug-ins available to assist including:

  • Adobe SVG Viewer from Adobe Systems plugin supports most of SVG 1.0/1.1. Zooming and panning of the image are also supported to enable viewing of any area of the SVG lying outside the visible area of its containing window, but scrolling is not supported. Adobe SVG Viewer is available for download from Adobe Systems free of charge.[45] However, on 1 January 2009, Adobe Systems discontinued support for Adobe SVG Viewer.[46]
  • Google Chrome Frame from Google can support all web elements supported by Webkit, including SVG 1.0 and partially SVG 1.1.
  • RENESIS Player 1.0 for Internet Explorer from examotion GmbH, first released on April 2008, supports SVG 1.1 on IE 6.x and 7.x and is available for download free of charge.[47]
  • Ssrc SVG Plugin from Savarese Software Research Corporation is a plug-in for rendering SVG in Microsoft Internet Explorer (MSIE) versions 6, 7, and 8 on Windows XP, Server 2003, Vista, and Server 2008. In addition, the plug-in enables Internet Explorer to load Mozilla XUL applications.[48]
  • Corel SVG Viewer[49]
  • Batik, a widely deployed Java plugin[50]
  • Bitflash, an SVG viewer intended for mobile devices, which can be installed as an IE plugin
  • Ikivo, an SVG viewer intended for mobile devices, which can be installed as an IE plugin
  • GPAC, targets SVGT 1.2[51]

SVG Web[52] is a JavaScript library for Web developers, targeted at Internet Explorer and dependent on the presence of an installed Adobe Flash plugin on the client machine. SVG Web provides partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting.[53]

On January 5, 2010, a senior manager of the Internet Explorer team at Microsoft announced on his official blog that Microsoft had just requested to join the SVG Working Group of the W3C in order to "take part in ensuring future versions of the SVG spec will meet the needs of developers and end users," although no plans for SVG support in Internet Explorer were mentioned.[54]

Software and support in applications

Images can be rasterised using a library such as ImageMagick, which provides a quick but incomplete implementation of SVG, or Batik, which implements nearly all of SVG 1.1 and much of SVG Tiny 1.2 but requires the Java Runtime Environment.

  • Inkscape is a free software vector graphics program for Linux, Microsoft Windows and Mac OS X that uses SVG as its native image format.
  • 3dpaintbrush can export 3D scenes/objects to SVG files.
  • The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics.
  • xfig and gnuplot allow export of SVG drawings.
  • The GNOME project has had integrated SVG support throughout the desktop since 2000.
  • Draw can export SVG drawings. Import extensions are available to import SVG images into Draw.[55]
  • Go-oo Draw ( variant) can open and export SVG files.[56]
  • OxygenOffice Draw ( variant) can open and export SVG files.[57]
  • sK1 is a free software vector graphics program for Linux, supports both the import and export of SVG images.
  • Adobe Illustrator supports both the import and export of SVG images. When writing SVG files it has the option to embed a copy of the associated proprietary Illustrator format for later editing. This often results in changes being lost if another editor is used then the file is reopened in Illustrator because it ignores everything but the embedded Illustrator file.
  • CorelDRAW has an SVG export and import filter.
  • Xara Xtreme has an SVG export and import filter in both its free/open-source and pay versions.
  • Microsoft Visio can save files in the SVG format as well as the SVG compressed format.
  • The GIMP allows SVG images to be imported as paths or rendered bitmaps.
  • Blender will import SVG graphics as paths.
  • Cairo is a vector graphics based library which can generate SVG. It has bindings for many programming languages including Haskell, Java, Perl, Python, Scheme, Smalltalk and several others.
  • Universal Converter is a virtual printer that allows conversion of files to SVG format and also converts SVG files to other file formats.
  • Scribus can export separate pages in SVG.
  • Altsoft Xml2PDF allows converting SVG files to PDF, PS, various GDI+ formats.
  • Ecava IntegraXor [58] created SAGE [59] (SCADA Animation Graphic Editor) which allows SVG graphic to be used in SCADA application.
  • Kiyut's Sketsa is a mature commercial SVG editor.
  • Mappetizer is a commercial converter for spatial data to SVG.
  • Examotion's RENESIS Player is a free SVG browser for windows. Its Windows Thumbnail Plugin allows the generation of thumbnail previews in any Windows Explorer window.
  • Svg-Edit is a lightweight, web-based, Javascript-driven SVG editor that works in any modern browser.
  • The Processing programming language has native support for the SVG format.
  • SVG Pony is a commercial converter from SVG to SVG Tiny.[60]
  • GNU LilyPond can export musical scores to SVG.
  • ItsNat is a Java based web framework with built-in suport of native SVG, Adobe SVG Viewer, Renesis, Savarese Ssrc, Batik applet and SVGWeb plugins.

Mobile support

Personal tools

Served in 2.764 secs.