|Introduction | Sustainability Factors | Content Categories | Format Descriptions | Contact|
|Full name||Scalable Vector Graphics (SVG) File Format Family|
The Scalable Vector Graphics (SVG) format family is a family of openly documented XML-based formats for two-dimensional vector graphics for use on the web, developed and maintained under the auspices of the World Wide Web Consortium (W3C) by the SVG Working Group. As stated in An SVG Primer for Today's Browsers, "The PostScript page description language developed by Adobe Systems Inc. during the 1980s had given the print-based community a way of describing images in ways which could be rescaled to adapt to the resolution of the display device, usually a printer. It was natural to seek a similar vector-based approach to web-based presentation." After an initial public draft in February 1999, the first version of SVG was approved as a W3C Recommendation in September 2001. The latest W3C Recommendation can be found at https://www.w3.org/TR/SVG/. As of April 2020, the latest version is a Candidate Recommendation for version 2. SVG 1.1 has been a W3C Recommendation since 2003 and is widely supported. For more details on the history of SVG, see Notes below.
The XML DTD for SVG (version 1.x) allows for incorporation of three types of graphic objects into a picture for display on the web as a free-standing image file or visual element in a web page: vector graphic shapes (e.g., paths consisting of straight lines and curves or basic shapes like circles), raster graphics (raster images), and text with visual effects. SVG includes markup for functional features that support the construction and management of the displayed picture. According to About SVG from Inkscape, "The features of SVG 1.1 include paths, basic shapes (like circles and polygons), text, fill, stroke and markers, color, gradients and patterns, clipping, masking and compositing, filter effects, interactivity, linking, scripting, animation, fonts and metadata." The Wikipedia entry for Scalable Vector Graphics provides informative annotations for these features. Using these features, graphical objects can be grouped, styled, transformed and composited into previously rendered objects. At this level of generality, the description in the Wikipedia page applies to what is expected in SVG 2. See latest Recommendation for SVG 2 (in Candidate status as of October 2018) and the latest Editor's Draft. The Editor's Draft is updated intermittently and includes comments as to whether proposed changes are "at risk" due to lack of implementation.
An important objective of SVG 2 is to improve compatibility with related standards as they are updated and implemented by browsers, (e.g., CSS, HTML, and the Web Open Font Format (WOFF), which is a container format or "wrapper" for font data in already-existing formats). As a result, chapters whose normative content in the SVG 1.1 specification has been moved to other specifications have been removed from the SVG 2 draft but the features are still supported in compliant documents. For example, new related specifications cover:
For many styling features, SVG 1.1 was closely related to CSS2. Since CSS2 was published in 2011, the CSS specification has been divided into modules. SVG 2 relies on more recent specifications for some CSS modules; see Normative references in SVG 2 (Editor's Draft) and see W3C home page for CSS for development status of various CSS modules.
An annotated example of the SVG markup for a simple static diagram follows. If you copy this markup and paste it into a text editor and save it with a .svg extension, you should be able to open the resulting file in a browser. This example is used in the Wikipedia article on SVG, where it is displayed over a grid.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
SVG may be used for animations; see Notes below.
SVG 1.1 and previous versions were defined using an XML DTD. SVG Tiny 1.2 was defined normatively using RelaxNG. Conformance with SVG 2 is defined in terms of a document object model (DOM), rather than a schema or DTD. The specifications for SVG 1.1 and SVG 2 each identify a number of different conformance criteria: see SVG 1.1 | Appendix G: Conformance Criteria and SVG 2 Recommendation | Chapter 2 : Conformance Criteria. A document or part of a document is a conforming SVG markup fragment if:
A document is a conforming stand-alone SVG file if:
The final clause was added in the SVG 2 specification.
|Production phase||Designed as a final-state (end-user delivery) format for vector graphics on the web. For printing or sharing (e.g., by email), free-standing SVG files are often converted at a fixed scale to PDF or a raster image format such as PNG or JPEG (JFIF).|
|Relationship to other formats|
|Subtype of||XML, XML (EXtensible Markup Language)|
|Has subtype||Scalable Vector Graphics (SVG), Version 1.0 (2001), not described at this Web site.|
|Has subtype||SVG_1_1, Scalable Vector Graphics (SVG), Version 1.1. Initially published as a W3C Recommendation in 2003 and still the current standard as of early 2020.|
|Has subtype||Two reduced profiles of SVG 1.1 for mobile devices: SVG Basic 1.1 and SVG Tiny 1.1, not described separately at this website.|
|Has subtype||SVG_Tiny_1_2, Scalable Vector Graphics (SVG) Tiny, Version 1.2. SVG Profile, released in December 2008, intended for implementation on a range of devices, including cellphones and PDAs as well as laptops and personal computers.|
|Has subtype||SVG_2, Scalable Vector Graphics (SVG), Version 2.. This update is under development as of April 2020. A W3C Candidate Recommendation, issued October 4, 2018, is available at http://www.w3.org/TR/SVG2/. The most recent editor's draft can be found at https://svgwg.org/svg2-draft/.|
|Used by||EPUB_2, EPUB, Electronic Publication, Version 2. EPUB_2 readers are required to recognize and display embedded graphics in SVG 1.1.|
|Used by||EPUB_3, Electronic Publication, Version 3. EPUB_3 uses a restricted subset of SVG 1.1 to represent inline vector graphics in documents based on XHTML and in standalone SVG-based EPUBs.|
|Used by||ODF_family, OpenDocument Format (ODF) Family, OASIS and ISO/IEC 26300. ODF uses the svg: prefix for elements and attributes compatible with SVG 1.1.|
|Used by||HTML_5, HyperText Markup Language (HTML) 5. SVG 1.1 was supported for embedding within HTML through HTML 5.2. See HTML 5.2: 4.7.18. SVG. As of April 2020, HTML Living Standard: 4.8.17 SVG refers to SVG 2.|
|LC experience or existing holdings||The Library of Congress uses SVG 1.1 for some logos used on its website and the format has been used in some demonstration projects, such as that described in https://blogs.loc.gov/thesignal/2018/05/building-a-southern-mosaic/. The Library of Congress has a small volume of files with the .svg extension in its digital collection storage, probably graphics on archived web pages.|
|LC preference||The Library of Congress Recommended Formats Statement (RFS) includes SVG as a preferred vector graphics image format for other graphic images in digital form and 2D and 3D Computer Aided Design vector images. The RFS does not specify a version of SVG.|
|Disclosure||Open standard from W3C.|
|Documentation||Scalable Vector Graphics (SVG) is a hub for SVG resources at W3C. It provides links to all versions of SVG that have reached Recommendation status and to a number of drafts. As of April 2020, this page is not actively maintained. Other sources of documentation are the W3C SVG Working Group Wiki and SVG Working Group document repository. The latter has several drafts, but as of early 2020, it is not clear to the compilers of this resource which documents other than the SVG2, Editor's Draft are being worked on actively. Comments welcome.|
Over the years, SVG has generated bursts of enthusiasm for its capabilities, not only for its scalability but also for the ability to create graphics programmatically from data. Several websites with instructional materials and demonstrations of creative uses have been established and later fallen into disuse. In particular, see Useful References below for svg.org and LearnSVG.
Examples of uses that take advantage of the ability to convert a structured model with measurements or other data into SVG include:
Prior to early 2011, browser support for SVG images was variable, with many complaints about lack of support by Internet Explorer. An infographic from late 2014 indicated that, by that time, support was full in Safari, Firefox, Chrome, and Opera; support in IE started with IE 9 and support in Android with version 4. A more detailed presentation of SVG feature support is available from caniuse.com, which is updated when browsers are updated. In particular, see CanIUse: SVG (basic support), CanIUse: SVG filters, CanIUse: Inline SVG in HTML5, CanIUse: SVG in HTML img element, and CanIUse: SVG element: foreignObject. Using a totally different testing approach, Testing SVG support across browser engines explored support by the engines used in various browsers on a test SVG file. By the time of the 2019 run of this test, there were very few problems in mainstream browser engines with its test image.
Some design projects can make good use of 2D patterns, for example for laser cutting. Several free or open-source CAD software applications support SVG. LibreCAD supports import and export of SVG drawings, with a special SVG subtype for MakerCAM or EleksCAM. Tinkercad can export an SVG file; on export, 2D vectors are generated where the 3D model intersects the default workplane. QCAD claims to support export of precise CAD drawings to SVG for inclusion in publications or for further processing in a SVG-capable vector graphics editor. FreeCAD has a module for opening, importing, and exporting SVG files. SolveSpace supports SVG, EPS, PDF, DXF and HPGL as export formats. Blender has an add-on for importing and exporting SVG.
Guides to Good Practice from the UK Archaeology Data Service lists SVG as "suitable for preservation." SVG is listed in Recommended Data Formats for Preservation Purposes in the Florida Digital Archive in the column for formats for which the archive has high confidence level for preservation. SVG is listed as a preferred format for vector images in Long-term file formats from the National Archives of Australia.
The October 2011 EPUB_3 specification for Electronic Publications uses a restricted subset of SVG_1_1 as a content document format for graphics, including use as a top-level format for comics and graphic novels. Not supported in EPUB_3 are animations and embedding of "foreign objects" in forms other than XHTML.
|Licensing and patents||No special issues. As of January 2004, the SVG Working Group was not aware of any royalty-bearing patents they believe to be essential to SVG.|
|Transparency||Based on XML, hence inherently transparent. elements and attributes have names that indicate their functions.|
|Self-documentation||Includes <metadata> element designed to hold elements from other XML namespaces. Hence an SVG file can contain rich descriptive or administrative metadata using any other XML schema or DTD.|
|Technical protection considerations||None|
|Normal rendering||Good support.|
|Clarity (high image resolution)||
The intent of SVG is for images to be inherently scalable. The specification supports optional settings for rendering hints: crispEdges and geometricPrecision.
SVG colors are usually specified in the sRGB color space. Color properties in SVG 1.1 and earlier are based on colors in CSS2. For more detail and an extension of the list of named colors in CSS2, see SVG _1_1.
Colors in SVG 2 are based on CSS Color Module Level 3.
According to 12.3 Color profile descriptions in the SVG 1.1 specification, an SVG graphic may employ an alternate color specification using a profile as defined by the International Color Consortium (ICC). If ICC-based colors are provided and the SVG user agent supports ICC color, then the ICC-based color takes precedence over the sRGB color specification. The SVG 1.1 specification lists ICC Profile Format Specification. ICC.1:2004-10 as a normative reference. However, this capability has been deprecated by developer.mozilla.org for use on web pages, because it is not supported by browsers. See SVG: Scalable Vector Graphics | SVG element reference | <color-profile> and SVG: Scalable Vector Graphics | SVG Attribute reference | color-profile from MDN Web Docs.
Colors in SVG 2 are based on CSS Color Module Level 3; support in CSS for ICC profiles has been deferred to a future CSS Color Module Level 4. The SVG 2 specification provides an informative reference to Specification ICC.1:2010 (Profile version 220.127.116.11).
|Support for vector graphics, including graphic effects and typography||Rich support. See Description above.|
|Support for multispectral bands||Not applicable.|
|Functionality beyond normal rendering||Support for animations. Text in alternate languages for labels, etc.|
||In addition, the extension .svgz is used as an alias for 'svg.gz', i.e. for octet streams of type image/svg+xml, subsequently compressed with gzip.|
|Internet Media Type||image/svg+xml
||Proposed in standards documentation.|
|Internet Media Type||image/svg-xml
||Found in practice, particularly from some files created by tools published prior to 2001, when IETF published RFC 3023: XML Media Types. See Build Flexible, Lightweight XML-Based Images for ASP.NET Using Scalable Vector Graphics from Microsoft's MSDN Magazine, July 2003, which uses this media type in examples.|
|XML namespace declaration||xmlns="http://www.w3.org/2000/svg"
||This namespace declaration occurs in the mandatory <svg> element that serves as the root of a free-standing SVG file. The same namespace is used by all versions of SVG. See https://www.w3.org/2000/svg, which states that "The SVG namespace is mutable; names may be added over time by the W3C SVG Working Group."|
|Pronom PUID||See note.||As of April 2020, PRONOM has no entry that covers all versions of SVG. See Useful References below for PUIDs for versions of SVG.|
|Wikidata Title ID||Q2078
||No version declared. See https://www.wikidata.org/wiki/Q2078.|
||Used as an alias for 'svg.gz', i.e. for octet streams of type image/svg+xml, subsequently compressed with gzip.|
||For compressed SVG file with .svgz extension. See http://www.nationalarchives.gov.uk/pronom/x-fmt/109.|
Filters and graphic effects in SVG: SVG markup can be used to add effects to shapes. Andy Woodruff prepared two examples for the 2019 conference of the North American Cartographic Information Society (NACIS). SVG Cartography (NACIS 2019), part one illustrates a typical way to draw some GeoJSON to SVG for rendering on the web as a map, using a D3.js map projection and path generator to translate GeoJSON data into SVG path data. SVG Cartography (NACIS 2019), part two adds fancier design effects to the map. SVG supports many filter effects, such as feDropShadow, feGaussianBlur, feeSpotlight. See SVG Filter Effects: Creating Texture with <feTurbulence> for some examples of the use of one particular effect.
Animations in SVG: SVG markup can be used to present animations on the web in several ways: including using SVG's animation elements, using CSS, or by scripting. The Wikipedia entry for SVG animation offers a number of examples using different approaches.
In 2013, most web sites presented simple animations as GIF_89a files and more complex animations and interactives as Flash SWF_7 or SWF_8 files (or later versions). Commentators with an interest in animation, including advocates for SVG as a publicly disclosed format, compared SVG and SWF but noted that the powerful authoring software available for Flash gave SWF the edge. Since then, the Flash plugin has been recognized as a persistent security risk and HTML 5 has provided other means for embedding video in web pages. See Thoughts on Flash from Wikipedia entry for HTML5. In early 2020, animated GIFs are still very popular on the web, including for advertising. The compilers of this resource have not attempted to determine whether SVG animations are used more widely now that most browsers support them. Comments welcome.
SVG was originally developed through a process that began in 1996, with a call for responses to W3C Scalable Graphics Requirements. According to Secret Origin of SVG, there were six proposals submitted by 1998, and SVG was particularly influenced by VML (Vector Markup Language), already deployed in Microsoft products, and PGML, a proposal from a partnership led by Adobe and using the same imaging model as in Postscript and PDF.
Work had begun on SVG 1.2 Full, but was not pursued beyond a Working Draft (dated 13 April 2005). Instead, an SVG profile SVG Tiny 1.2 intended for implementation on a range of devices, including cellphones and laptops. SVG Tiny 1.2 includes a subset of the features included in SVG 1.1 Full, along with new features to extend the capabilities of SVG.
Version 2 of SVG has been under development for several years. As of April 2020, a W3C Candidate Recommendation, issued October 4, 2018, is available at http://www.w3.org/TR/SVG2/. The most recent editor's draft can be found at https://svgwg.org/svg2-draft/. See also SVG2 Requirements Input.