Scalable Vector Graphics

From Wikipedia, the free encyclopedia

Scalable Vector Graphics (SVG) is an XML specification and file format for describing two-dimensional vector graphics, both static and animated. SVG can be purely declarative or may include scripting. Images can contain hyperlinks using outbound simple XLinks.^[2] It is an open standard created by the World Wide Web Consortium's SVG Working Group.

[edit] Overview

SVG was developed during the period 1999–2008 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:

• Vector graphics (see Outline image, at right)
• Raster graphics (see Bitmap image, at right)
• Text

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 a drawback with respect to 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

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%^[7] of the original size.

[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 Candidate Recommendation on August 10, 2006.^[10][11] 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 multipage 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.^[12]

      SVGT 1.2 adds a microdom (uDOM), allowing all mobile needs to be met with a single profile.

      [edit] Example

      SVG is an application of XML. An SVG file is therefore a simple text file, which can be viewed and edited as with any other markup.

      Image:Svg example3.svg

      How this SVG markup appears in a capable viewer

      <source lang="xml"> <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      

      <svg xmlns="http://www.w3.org/2000/svg"

      width="467" height="462">
       <rect x="80" y="60" width="250" height="250" rx="20"
           style="fill:#ff0000; stroke:#000000; stroke-width:2px;" />
       
       <rect x="140" y="120" width="250" height="250" rx="40"
           style="fill:#0000ff; stroke:#000000; stroke-width:2px;
           fill-opacity:0.7;" />
      

      </svg> </source>

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

      Filter effects are defined by filter elements. To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element. Each 'filter' element contains a set of filter primitives as its children. Each filter primitive performs a single fundamental graphical operation (e.g., a Gaussian blur or a lighting effect) on one or more inputs, producing a graphical result. Because most of the filter primitives represent some form of image processing, in most cases the output from a filter primitive is a single RGBA bitmap image (however, it will be regenerated if a higher resolution is called on).

      The original source graphic or the result from a filter primitive can be used as input into one or more other filter primitives. A common application is to use the source graphic multiple times. For example, a simple filter could replace one graphic by two by adding a black copy of original source graphic offset to create a drop shadow. In effect, there are now two layers of graphics, both with the same original source graphics.

      [edit] List of SVG filter primitives

      The following table lists the filter primitives available in SVG 1.0 and SVG 1.1. SVG Tiny does not support filter effects, while SVG Basic supports only those filter primitives indicated by SVGB.

      Name	Element	SVG Basic
      Blend	feBlend	SVGB
      Color matrix	feColorMatrix	SVGB
      Component transfer	feComponentTransfer	SVGB
      Composite	feComposite	SVGB
      Convolve matrix	feConvolveMatrix
      Diffuse lighting	feDiffuseLighting
      Displacement map	feDisplacementMap
      Flood	feFlood	SVGB
      Gaussian blur	feGaussianBlur	SVGB
      Image	feImage	SVGB
      Merge	feMerge	SVGB
      Morphology	feMorphology
      Offset	feOffset	SVGB
      Specular lighting	feSpecularLighting
      Tile	feTile	SVGB
      Turbulence	feTurbulence

      [edit] Framework for applying a filter

      <source lang="xml"> <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      

      <svg xmlns="http://www.w3.org/2000/svg"

      width="4in" height="3in">
       <defs>
         <filter id="AFilter">
         </filter>
       </defs>
       <text style="filter:url(#AFilter)">Text with a filter applied</text>
      

      </svg> </source>

      [edit] Support for SVG in web 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 Adobe Flash or Java applets, and browser support for SVG is still uneven. 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.

      [edit] 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, yet the implementations are lacking in consistency and completeness. 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. Since 9.5 alpha 1 Opera has partial SVG Tiny 1.2 support.
      • Browsers based on the Gecko layout engine version 1.8 (such as Firefox, Netscape, Camino, SeaMonkey and Epiphany), 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^[13] and an overview of the modules which are in progress in the development version of Firefox.^[14] Gecko 1.9 will be included in the upcoming Firefox 3.0 and will add support for more of the SVG specification (including filters).^[15]
        • KDE's Konqueror has a 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. KDE 4 will also feature system-wide support and use of SVG for graphics. Elsewhere in KDE the format is finding greater use, and from version 3.4 onwards SVG wallpapers are supported.
        • Apple's Safari browser ported KSVG2 into WebKit, initiating work on incorporating native support of SVG into Safari.^[16] Safari 3.0, included with Mac OS X v10.5 and Mac OS X v10.4.11, includes SVG support.
          • The Omni Group's OmniWeb 5.5 browser, which is based on a later version of Apple's WebKit than that used in the current public release of Safari, has partial support for SVG.
          • Amaya has partial SVG support.

          [edit] Plugin support

          As of 2008, Internet Explorer requires a plugin 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. However, Adobe will discontinue support for Adobe SVG Viewer on January 1, 2009.^[17][18] For Safari, the Adobe plugin supports only the PowerPC platform. For Safari on Intel machines, Safari must run under Rosetta for the Adobe plugin to work.

          Another plugin, called the Renesis Player, exists for Internet Explorer and the Win32 platform. Renesis aims to support full SVG 1.2 [1], as well as JavaScript interactivity capabilities. The Renesis version 0.7 is available as of July 4, 2007.

          The Corel SVG Viewer plugin was once offered from Corel. Its development has stopped.

          The SVG Map Consortium released a plugin on September 6, 2007 that runs in Internet Explorer for Windows.^[19][20]

          [edit] 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 but requires the Java Runtime Environment.

          • Inkscape is a free software/open source SVG drawing program for Linux, Windows and Mac OS.
          • The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics.
          • xfig allows import and export of SVG drawings.
          • 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^[21] to import SVG images into OOo documents.
            • Adobe Illustrator supports both the import and export of SVG images. Photoshop, however, does not support SVG import.
            • CorelDRAW has an SVG export and import filter.
            • Xara Xtreme has an SVG export and import filter in its free/open source Linux version.
            • KoolMoves has very weak SVG support.
            • Microsoft Visio can save files in the SVG format as well as the SVG compressed format. Graphs created in Microsoft Excel or figures from Microsoft Word can be cut and pasted into Microsoft Visio documents.

            Also some programming languages and scientific plotting programs can be used to create SVG plots:

            • MATLAB figures can be exported to SVG with help of plot2svg function available on MATLAB File Exchange
            • gnuplot can save plots to SVG. See examples at Commons:Category:Gnuplot diagrams
            • Mathematica Export[] function supports SVG versions 1.0 and 1.1

            [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 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, all icons are 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 ^[22]. 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. Рhones 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

            • sXBL SVG's XML binding language
            • Raster to vector
            • List of vector graphics markup languages
            • List of vector graphics editors, editors, converters and other tools for SVG.
            • Comparison of layout engines (SVG)
            • Vector Markup Language
            • Geographic information system
            • SWF, a competing proprietary file format from Adobe

            [edit] References

            1. ^ M Media Type registration for image/svg+xml
            2. ^ Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS, P. 77. ISBN 0-67232-429-6. 
            3. ^ SVG(W3C) § 4.2-Drawing Order
            4. ^ "SVG as a Page Description Language", presentation given at SVG.Open 2002, Zurich, 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. ^ W3C Recommendation, SVG 1.1 Specification (2003-01-14)
            10. ^ W3C Candidate Recommendation, SVG Tiny 1.2 Specification (2006-08-10)
            11. ^ SVG Tiny 1.2 is now a Candidate Recommendation
            12. ^ Listing of phones that support SVG
            13. ^ SVG in Firefox
            14. ^ Mozilla SVG Status
            15. ^ SVG improvements in Firefox 3
            16. ^ The official WebKit SVG status page
            17. ^ Adobe SVG Viewer download area
            18. ^ Adobe SVG Viewer End of Life announcement
            19. ^ http://www.g-contents.jp/2007/3prog.htm#003
            20. ^ SVG Map ToolKit Download
            21. ^ OpenOffice.org SVG Import Filter
            22. ^ S60 Product info

            
            

            [edit] External links

            Image:Wikibooks-logo-en.svg

            Wikibooks has a book on the topic of

            XML - Managing Data Exchange/SVG
            • An online converter that converts raster images to vector graphics
            • W3C SVG page specifications, list of implementations
            • SVG Community news, wiki
            • SVG Rendering engine Comparison pages Comparisons of several FOSS SVG libraries, with screenshots
            • SVG Tutorial from W3Schools
            • Using SVG Path Data in Flash article
            • Ted Gould: SVG, Inkscape, and Web Standards

            
            

            v • d • e Standards of the World Wide Web Consortium
            Recommendations	CDF · CGI · CSS · DOM · HTML · MathML · OWL · RDF · RDF Schema · SISR · SMIL · SOAP · SRGS · SSML · SVG · Timed Text · VoiceXML · WSDL · XACML · XForms · XHTML · XML · XML Base · XML Events · XML Information Set · XML Schema (W3C) · XML Signature · XPath · XPointer · XQuery · XSL Transformations · XSL-FO · XSL · XLink
            Notes	XHTML+SMIL · XAdES
            Working drafts	CCXML · CURIE · InkML · XFrames · XFDL · WICD  · XHTML+MathML+SVG

            als:Scalable Vector Graphics

            ar:SVG zh-min-nan:SVG bs:Scalable Vector Graphics ca:SVG cs:Scalable Vector Graphics da:Scalable Vector Graphics de:Scalable Vector Graphics es:Scalable Vector Graphics eo:Streka Vari-skala Grafiko eu:SVG fa:گرافیک برداری مقیاس‌پذیر fr:Scalable Vector Graphics gl:SVG zh-classical:可縮放矢量圖形 ko:SVG hr:SVG id:SVG it:Scalable Vector Graphics he:SVG ka:SVG lt:SVG hu:SVG nl:Scalable Vector Graphics ja:Scalable Vector Graphics no:Scalable Vector Graphics pl:SVG pt:SVG ru:SVG simple:Scalable Vector Graphics sk:Scalable Vector Graphics sl:Scalable Vector Graphics fi:SVG sv:SVG th:Scalable Vector Graphics vi:SVG tr:SVG uk:Scalable Vector Graphics bat-smg:SVG zh:SVG