Scalable Vector Graphics
From Wikipedia, the free encyclopedia
- For Wikipedia-related information, see SVG support on Meta.
Scalable Vector Graphics | |
---|---|
SVG example. [1] |
|
File extension: | .svg, .svgz |
MIME type: | image/svg+xml[2] |
Developed by: | World Wide Web Consortium |
Type of format: | vector image format |
Extended from: | XML |
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.[3] It is an open standard created by the World Wide Web Consortium.
Contents |
[edit] Overview
SVG allows three types of graphic objects:
- Vector graphic shapes (e.g., paths consisting of straight lines and curves, and areas bounded by them)
- Raster graphics images / digital images
- Text
Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. 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] Scripting and animation
SVG drawings can be dynamic and interactive. The Document Object Model (DOM) for SVG, which includes the full XML DOM, allows straightforward and efficient vector graphics animation via ECMAScript or SMIL. A rich set of event handlers such as onmouseover and onclick can be assigned to any SVG graphical object. Because of its compatibility and leveraging of other Web standards, features like scripting can be done on SVG elements and other XML elements from different namespaces simultaneously within the same web page. An extreme example of this is a complete Tetris clone game implemented as an SVG object.[4]
[edit] Compression
If storage space is an issue, SVG images (which are just text files) can be saved with gzip compression, in which case they may be called "SVGZ files". SVG files can also be compressed with any other compression algorithm, but those are not called SVGZ files. Because XML contains verbose text, it tends to compress very well and these files can be much smaller (often more than 50%[5]) than the original.
[edit] Impact on the World Wide Web
The widespread adoption of SVG clients, particularly those natively embedded in web browsers (as it is in Firefox versions 1.5 and 2.0[6], Safari 3.0 (currently in beta release) and Opera, [7] though the implementations are quite incomplete), may bring a significant new look and feel to the World Wide Web. A current trend is to build dynamic web sites that behave somewhat like desktop applications, utilizing JavaScript-driven Dynamic HTML, and in many cases, the Ajax technique to transfer data between the web server and users. SVG enhances the capabilities of Ajax, by providing a rich, graphical set of page elements, well beyond those specified by HTML/CSS. The SVG Terminal module for Firefox is an early example of this.[8] SVG is also beginning to give rise to painting, drawing, and other web-based interactive applications.
[edit] Development history
SVG |
---|
sXBL |
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.[9]
- SVG 1.1 became a W3C Recommendation on January 14, 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 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.[11][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. A similarly refactored draft for SVG 1.2 Full has not yet been released. A notable feature addition in the SVG Full 1.2 W3C Working Draft (absent from SVG Tiny 1.2) is syntax for multipage documents;[13] the semantics of multiple pages with respect to non-hardcopy rendering are however undefined.
[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.
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.[14]
[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.
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <!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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="520" height="520"> <style type="text/css"> <![CDATA[ text{font-size:362px;font-weight:bold;font-family:Times New Roman, serif} #P0 {fill:#d4a000;stroke:#000;stroke-width:9} #P1 {fill:url(#tl)} #P2 {fill:url(#bl)} #P3 {fill:url(#br)} #P4 {fill:url(#tr)} ]]> </style> <defs> <linearGradient id="dk"> <stop/> <stop style="stop-opacity:0" offset="1"/> </linearGradient> <linearGradient id="lt"> <stop style="stop-color:#ffe681"/> <stop style="stop-color:#ffe681;stop-opacity:0" offset="1"/> </linearGradient> <linearGradient x1="136.4" y1="136.4" x2="167.5" y2="167.5" id="tl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="136.4" y1="383.6" x2="167.5" y2="352.5" id="bl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="383.6" x2="352.5" y2="352.5" id="br" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="136.4" x2="352.5" y2="167.5" id="tr" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> </defs> <path id="P0" d="M260,6.3L 6.3,260L 260,513.7L 513.7,260L 260,6.3z"/> <text y="380" x="200">!</text> <path id="P1" d="M260,12.7L 260,75L 75,260L 12.7,260L 260,12.7z"/> <path id="P2" d="M260,507.3L 260,445L 75,260L 12.7,260L 260,507.3z"/> <path id="P3" d="M260,507.3L 260,445L 445,260L 507.3,260L 260,507.3z"/> <path id="P4" d="M260,12.7L 260,75L 445,260L 507.3,260L 260,12.7z"/> </svg>
[edit] Support for SVG in 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, but also browser support 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.
- Browsers based on the Gecko layout engine version 1.8 (such as Firefox, Netscape, Camino 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[15] and an overview of the modules which are in progress in the development version of Firefox.[16] Gecko 1.9 will be included in the upcoming Firefox 3.0 and will add support for more of the SVG specification (including some filters).[17]
- Apple's Safari browser ported KSVG2 into WebCore, initiating work on incorporating native support of SVG into Safari. Nightly builds of Safari and the Safari 3.0 beta include SVG support. The Safari beta's SVG support still is not perfect, though[18].
- The Omni Group's OmniWeb 5.5 browser, which is based on a later version of Apple's WebCore/WebKit than that used in the current public release of Safari, has partial support for SVG.
- KDE's Konqueror has a fairly complete 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.
- Amaya has partial SVG support.
[edit] Plugin support
In current versions of Internet Explorer a plugin is needed 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. (Adobe's SVG download page now says "Please note that Adobe has announced that it will discontinue support for Adobe SVG Viewer on January 1, 2008."[19]) A plugin was once offered from Corel.
Another plugin, called the Renesis Player [2], exists for Internet Explorer and the Win32 platform. Renesis aims to support full SVG 1.2 [3], as well as JavaScript interactivity capabilities. There are indications that a Firefox plugin may also be in the works [4]. The Renesis version 0.7 is available as of July 4, 2007.
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.
[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.
- Sodipodi is another free/open source SVG editing program, on which Inkscape is based.
- The Batik SVG Toolkit can be used by Java programs to render, generate, and manipulate SVG graphics.
- 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[20] to import SVG images into OOo documents.
- Adobe Illustrator supports both the import and export of SVG images.
- CorelDRAW has an SVG export and import filter.
- Sketsa is a cross-platform SVG drawing software.[21]
- 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
- EVE (Embedded Vector Editor) can import and export vector and svg graphics.
- IVEO Viewer a self-voicing tactile-audio system with native SVG support.
Some viewers are listed in External links below.
[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.
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).
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.
[edit] See also
- Vector graphics
- SVG tools, editors, converters and other tools for SVG.
- sXBL SVG's XML binding language
- Server-side SVG generation and translation of SVG on the server-side
- SMIL Synchronized Multimedia Integration Language
- Rich Internet application
- 2D computer graphics
- 3D computer graphics
- Raster to vector
- List of vector graphics markup languages
- Comparison of layout engines (SVG)
- Open Clip Art Library
- List of vector graphics editors
- Comparison of vector graphics editors
[edit] References
- ^ The image you are seeing has been rasterized for browsers that do not support SVG.
- ^ http://www.w3.org/TR/SVGMobile12/mimereg.html
- ^ Watt, Andrew; Chris Lilley, Daniel J. Ayers et al (2003). SVG Unleashed. Indianapolis: SAMS. ISBN 0-67232-429-6.
- ^ svgtetris (SVG). Croczilla.com. Retrieved on 2006-11-20.
- ^ http://www.adobe.com/svg/illustrator/compressedsvg.html
- ^ SVG in Firefox (html). Mozilla Developer Center. Retrieved on 2006-11-24.
- ^ SVG in Opera (html). Opera Software.
- ^ http://networkimprov.net/airwrx/awscene.html
- ^ http://www.w3.org/TR/SVG10/
- ^ http://www.w3.org/TR/SVG11/
- ^ http://www.w3.org/TR/2006/CR-SVGMobile12-20060810/
- ^ http://lists.w3.org/Archives/Public/www-svg/2006Aug/0036.html
- ^ http://www.w3.org/TR/2004/WD-SVG12-20041027/multipage.html
- ^ A listing of phones that support SVG can be found at the svg.org community web site
- ^ http://developer.mozilla.org/en/docs/SVG_in_Firefox_1.5
- ^ http://www.mozilla.org/projects/svg/status.html
- ^ http://weblogs.mozillazine.org/tor/archives/2006/12/gran_paradiso_alpha_1_and_svg.html
- ^ http://www.w3.org/Icons/valid-xhtml11-blue-v.svg
- ^ http://www.adobe.com/svg/viewer/install/
- ^ http://wiki.services.openoffice.org/wiki/SVG_Import_Filter
- ^ http://www.kiyut.com/products/sketsa/index.html
- ^ [1]
[edit] External links
[edit] News and reference
- W3C SVG page specifications, list of implementations.
- SVG Community news, wiki.
- SVG Implementations Directory
- Mozilla SVG project
- Using SVG
[edit] Applications
- Sketsa SVG Editor
- Adobe SVG viewer
- Inkscape, an open source SVG editor
[edit] Demos
- Croczilla SVG Demos
- RichDraw drawing demo using SVG or VML.
- Sample SVG files Created from popular programs
- Adobe SVG Demos (These examples are for Adobe's SVG variant, and require Adobe's plugin.)
- Rendering results - images of rendering result from various open source SVG backends
- National Assessment for Educational Progress Data Explorer The United States Department of Education uses SVG for some of its data charting.
- Mac-Slow Clock A Mac-Slow type clock using SVG and javascript.
[edit] Libraries
- Image_Canvas - PHP/Pear library for generating SVG and raster (GD) images.
- Super 2d/3d Graph Library - .NET library for drawing raster and vector (SVG) charts
- Batik SVG Toolkit - Java SVG player and renderer (Apache licence)
- SVG Salamander - another Java SVG player and renderer (LGPL)
- librsvg - SVG renderer for GNOME.
- SVG Perl module
- Trolltech's QtSvg module
- SVG Rendering engine Comparison pages - comparisons of several FOSS SVG libraries, with screenshots
- Openwave phone simulator.
- JUCE - cross-platform UI library which includes an SVG importer.
- SVGdraw - Python module for generating SVG documents
- Cairo - Open Source, Multiplatform vector graphics library
- JSR 226 - JSR 226: Scalable 2D Vector Graphics API for J2ME
- wxSVG - wxSVG and SVGUI : DOM SVG Rendrerer C++ classes generated from w3 standard (idl+dtd). Can be used in wxWidgets. Let create SVG based GUI.
[edit] Tutorials
- SVG tutorials from Dev Opera
- Pike's SVG Tutorial
- SVGBasics
- SVG Authoring Guidelines
- SVG Tutorial from W3Schools
[edit] Articles
[edit] Viewers, editors and converters
see List of vector graphics editors or the SVG Implementations Directory svgi.org
← | Vector Markup Language, PGML | → |
Categories: Articles actively undergoing a major edit | Wikipedia external links cleanup | Markup languages | XML-based standards | W3C standards | Graphics file formats | Computer file formats | Page description languages | Open formats | Vector graphics | Vector graphics markup languages | Scalable Vector Graphics