Scalable Vector Graphics

From Wikipedia, the free encyclopedia

Jump to: navigation, search
"SVG" redirects here. For other uses, see SVG (disambiguation).
Scalable Vector Graphics
Filename extension .svg, .svgz
Internet media type image/svg+xml[1]
Developed by World Wide Web Consortium
Initial release September 4, 2001 (2001-09-04)
Latest release 1.2T / August 10, 2006
Type of format vector image format
Extended from XML
Website w3.org/Graphics/SVG/
Scalable Vector Graphics
 This box: view • talk • edit 
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 XML-based file format for describing two-dimensional vector graphics, both static and dynamic (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.

SVG is also well-suited to small and mobile devices. The SVG Basic and SVG Tiny specifications were developed with just such uses in mind and many current mobile devices support them.

Since they are XML files, SVG images can be 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.[2] To view SVG files in Internet Explorer, users have to download and install a browser plugin.

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.

Contents

[edit] Overview

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 designing 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[3] that separate drawing order from document order for objects, which is different from 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.

[edit] Printing

While being primarily designated as a vector graphics markup language, the specification is also designed with the basic capabilities of a page description language, like Adobe's PDF. It contains provisions for rich graphics, and is also compatible with the CSS specification's properties for styling purposes; thus, unlike XHTML and XSL-FO which are layout-oriented languages, SVG is a fully presentational language.[4] A much more print-specialized subset of SVG (SVG Print, authored by Canon, HP, Adobe and Corel) is currently a W3C Working Draft.[5]

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

[edit] Compression

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

[edit] 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 September 4, 2001.[8]
  • SVG 1.1 became a W3C Recommendation on January 14, 2003.[9] 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 January 14, 2003. These are described as profiles of SVG 1.1.
  • SVG Tiny 1.2 became a W3C Recommendation on December 22, 2008.[10]
  • 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.

[edit] 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 required graphics format for next-generation phones and Multimedia Messaging Services (MMS).

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

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

[edit] Functionality

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

Paths
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.[12]
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.[13]
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 (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).[14]
Painting
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.[15]
Color
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%).[16]
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.[17]
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.[18]
Filter Effects[19]
Main article: SVG filter effects
Interactivity[20]
Linking[21]
Scripting[22]
Animation[23]
Fonts[24]
Metadata[25]

[edit] Portability

As with HTML and CSS, text in SVG may link to external font files, such as system fonts. If the needed font files do not exist on the machine where the SVG file is rendered, the resulting appearance of the text may not be as intended by the creator of the SVG file. To overcome this limitation, text which is intended to be displayed in a scalable font may be stored as an internal SVG Font, with the vector shapes which form the desired glyphs, and in the Adobe SVG implementation may be alternately embedded as a binary font.

[edit] Support for SVG in web browsers

The use of SVG on the web is in its infancy and browser support for it is still uneven. Web sites that serve SVG images, for example Wikipedia, typically also provide the images in a raster format, either automatically by HTTP content negotiation or allowing the user to directly choose the file. More recently, with the developments of HTML5, the SVG format may now have to contend with the <canvas> element,[26][27][28] which is already gaining momentum.

[edit] Native support

There are several advantages to native support: plugins would not need to be installed, SVG could be freely mixed with other formats in a single document, and rendering scripting between different document formats would be considerably more reliable. All currently supported graphical browsers on Linux systems and the Macintosh have implemented some level of SVG support. At this time all major Windows browsers have committed to some level of SVG support except for Internet Explorer which will also not support SVG in the upcoming version IE8 [29][30]. Other browsers' implementations are not yet fully functional. See Comparison of layout engines for further details. As of 2008, only Opera and Safari support embedding via the <img> tag. Tim Berners-Lee, the inventor of the Web, has been critical of Internet Explorer for its failure to support SVG.[31]

  • Opera (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. Since 9.5 Opera has partial SVG Tiny 1.2 support.
  • Browsers based on the Gecko layout engine (such as Firefox, Flock, Netscape, Camino, SeaMonkey and Epiphany), all have incomplete support for the SVG 1.1 Full specification since 2005. The Mozilla site has an overview of the modules which are supported in Firefox[32] and an overview of the modules which are in progress in the development[33]. Gecko 1.9, included in Firefox 3.0, adds support for more of the SVG specification (including filters).[34]
  • Browsers based on WebKit (such as Apple's Safari, Google Chrome, and The Omni Group's OmniWeb) have incomplete support for the SVG 1.1 Full specification since 2006.[35] This includes Safari 3.0 and later (included with Mac OS X v10.5 and Mac OS X v10.4.11) as well as Mobile Safari as of iPhone OS 2.1.
  • Amaya has partial SVG support.

[edit] Plugin support

As of October 2008, Windows Internet Explorer (IE) is the only major browser not to provide native SVG support. IE requires a plugin to render SVG content.

Adobe Systems provided SVG Viewer, the most widely used SVG plugin, but discontinued support on January 1, 2009. SVG Viewer will remain available for download after this date[36][37]. The plugin supports most of SVG 1.0/1.1. Adobe SVG plugin support for pre-3.0 versions of Safari is for PowerPC only. Zooming and panning of the image is supported, to enable viewing of any area of the SVG lying outside the visible area of its containing window, though scrolling is not supported.

In April 2008, Examotion released version 1.0 of the RENESIS Internet Explorer Plugin which supports SVG 1.1 on IE 6.x and 7.x.

KDE's Konqueror SVG plugin release is KSVG. KSVG2 was rolled into KDE 4 core, making it native-rendering. (SVG finds increasing use on the KDE platform: this system-wide support for SVG graphics in version 4 follows early support for SVG wallpaper at version 3.4.)

[edit] Software & 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 nearly all of SVG 1.1 and much of SVG Tiny 1.2 but requires the Java Runtime Environment.

  • Inkscape is a free software SVG drawing program for Linux, Microsoft Windows and Mac OS X.
  • The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics.
  • xfig allows export of SVG drawings.
  • The GNOME project has had integrated SVG support throughout the desktop since 2000.
  • OpenOffice.org Draw can export SVG drawings. Import extensions are available to import SVG images into OpenOffice.org Draw.[38]
  • Go-oo Draw (OpenOffice.org variant) can open and export SVG files.[39]
  • OxygenOffice Draw (OpenOffice.org variant) can open and export SVG files.[40]
  • Adobe Illustrator supports both the import and export of SVG images. When writing SVG files is 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.
  • Altsoft Xml2PDF allows converting SVG files to PDF, PS, various GDI+ formats.
  • Ecava IntegraXor [41] created SAGE [42] (SCADA Animation Graphic Editor) which allows SVG graphic to be used in SCADA application.
  • Kiyut's Sketsa is a mature commercial SVG editor.

[edit] 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 Adobe 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 Connected Limited Device Configuration (CLDC) platform.

Mobile SVG players from Ikivo and BitFlash come pre-installed, i.e., the manufacturers burn the SVG player code in their mobiles before shipping to the customers. Mobiles also can include full web browsers (such as Opera Mini and the iPhone's Safari) which include SVG support.

The level of SVG Tiny support available varies from mobile to mobile, depending on the manufacturer and version of the SVG engine installed. Many of the new mobiles support additional features beyond SVG Tiny 1.1, like gradient and opacity; this standard is often referred as SVGT 1.1+.

Nokia's S60 platform has built-in support for SVG. For example, icons are generally rendered using the platform's SVG engine. Nokia has also led the JSR 226: Scalable 2D Vector Graphics API expert group which defines Java ME API for SVG presentation and manipulation. This API has been implemented in S60 Platform 3rd Edition Feature Pack 1 onward.[43] Some Series 40 phones also support SVG (such as 6280).

Most Sony Ericsson phones beginning with K700 (by release date) support SVG Tiny 1.1. Phones beginning with K750 also support such features as opacity and gradients. Phones with Java Platform-8 have support for JSR 226.

SVG is also supported by other models from Motorola, Samsung, LG, and Siemens.

[edit] See also

[edit] References

  1. ^ M Media Type registration for image/svg+xml
  2. ^ Svensson, Peter (2008-09-10). "Creator of Web spots a flaw in Internet Explorer". msnbc.msn.com. http://www.msnbc.msn.com/id/26646919/. Retrieved on 2008-11-16. 
  3. ^ SVG(W3C) § 4.2-Drawing Order
  4. ^ "SVG as a Page Description Language", presentation given at SVG.Open 2002, Zürich, Switzerland
  5. ^ SVG Print 1.2 Working Draft
  6. ^ Paul Festa (2003-01-09), W3C releases scripting standard, caveat, CNET.com
  7. ^ Saving compressed SVG (SVGZ)
  8. ^ W3C Recommendation, SVG 1.0 Specification (2001-09-04)
  9. ^ a b W3C Recommendation, SVG 1.1 Specification (2003-01-14)
  10. ^ Scalable Vector Graphics (SVG) Tiny 1.2 Specification
  11. ^ Listing of phones that support SVG
  12. ^ SVG specification, "Paths"
  13. ^ SVG specification, "Basic Shapes"
  14. ^ SVG specification, "Text"
  15. ^ SVG specification, "Painting: Filling, Stroking and Marker Symbols"
  16. ^ SVG specification, "Color"
  17. ^ SVG specification, "Gradients and Patterns"
  18. ^ SVG specification, "Clipping, Masking and Compositing"
  19. ^ SVG specification, "Filter Effects"
  20. ^ SVG specification, "Interactivity"
  21. ^ SVG specification, "Scripting"
  22. ^ SVG specification, "Animation"
  23. ^ SVG specification, "Fonts"
  24. ^ SVG specification, "Metadata"
  25. ^ http://people.mozilla.com/~vladimir/xtech2006/
  26. ^ http://www.borismus.com/canvas-vs-svg-performance/
  27. ^ http://www.forwhatitworths.com/posts/2007/08/the-canvas-element-and-me/
  28. ^ Windows Internet Explorer 8 Expert Zone Chat (June 19, 2008)
  29. ^ Schiller, Jeff (2008-09-03). "SVG Support". http://www.codedread.com/svg-support.php. Retrieved on 2008-11-16. 
  30. ^ "Creator of Web spots a flaw in Internet Explorer". Associated Press. 2008-09-10. http://www.msnbc.msn.com/id/26646919/. 
  31. ^ SVG in Firefox
  32. ^ Mozilla SVG Status
  33. ^ SVG improvements in Firefox 3
  34. ^ The official WebKit SVG status page
  35. ^ Adobe SVG Viewer download area
  36. ^ Adobe SVG Viewer End of Life announcement
  37. ^ SVG import extension for OpenOffice.org
  38. ^ SVG import filter in Go-OO
  39. ^ SVG import filter in OxygenOffice
  40. ^ Ecava IntegraXor
  41. ^ SAGE Documentation
  42. ^ S60 Product info

[edit] External links

Sister project Wikibooks has a book on the topic of


v • d • e
Standards of the World Wide Web Consortium
Recommendations
Canonical XML · CDF · CSS · DOM · HTML · MathML · OWL · P3P · PLS · RDF · RDF Schema · SISR · SMIL · SOAP · SRGS · SSML · SVG · SPARQL · Timed Text · VoiceXML · WSDL · XForms · XHTML · XLink · XML · XML Base · XML Encryption · XML Events · XML Information Set · XML Schema · XML Signature · XPath · XPointer · XQuery · XSL · XSL-FO · XSLT
Notes
Working Drafts
CCXML · CURIE · HTML 5 · InkML · WICD · XFDL · XFrames · XBL · XHTML+MathML+SVG · XProc  · OWL 2
Guidelines
deprecated
HDML · JSSS · PGML · VML
v • d • e
Vector graphics markup languages and file formats
By type
2D
3D
Xgl · IGES · VRML · STEP · DWF · COLLADA · XAML · X3D · xVRML · JT · 3DXML · IPA · PRC · .3D · 3DF · eDrawings · HSF · XVL · STL · U3D · Asymptote · 3DMLW
See also
Retrieved from "http://en.wikipedia.org/wiki/Scalable_Vector_Graphics"
Personal tools