Sustainability of Digital Formats: Planning for Library of Congress Collections

Introduction | Sustainability Factors | Content Categories | Format Descriptions | Contact
Format Description Categories >> Browse Alphabetical List

Scalable Vector Graphics (SVG) File Format Family

>> Back
Table of Contents
Format Description Properties Explanation of format description terms

Identification and description Explanation of format description terms

Full name Scalable Vector Graphics (SVG) File Format Family
Description

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:

  • Filters: Filter Effects Module Level 1 from W3C. This specification describes graphics filters in a manner that allows them to be used in any content that can be styled by CSS, including HTML and SVG. For examples of uses of filters, see Notes, below.
  • Animation: Web Animations from W3C. The Web Animations model is intended to provide the features necessary for expressing CSS Transitions, CSS Animations, and animations as supported in SVG 1.1.
  • Clipping and masking: CSS Masking Module Level 1 from W3C. CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.
  • Color: CSS Color Module Level 3 from W3C. CSS uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document or graphic. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.

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"?>
<!--dimensions for the overall size of the image can be given in the mandatory root svg element-->
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg">
<!--within the image a rectangular (in this case, square) box is drawn as a border, stroked in black and filled with a very light gray.-->
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
<!--in the center, a smaller box is drawn, stroked in pink and filled with green-->
<rect x="25" y="25" width="200" height="200" fill="green" stroke-width="4" stroke="pink" />
<!--next comes a circle filled with orange-->
<circle cx="125" cy="125" r="75" fill="orange" />
<!--followed by a red path with three linear segments-->
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<!--and a blue line defined by its endpoints-->
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>

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:

  • if it can be parsed without error (other than network errors) by the appropriate parser for the document MIME type (i.e., "image/svg+xml" for an uncompressed SVG file) to form a conforming SVG DOM subtree, and
  • any CSS stylesheets included in the document conform to the core grammar of Cascading Style Sheets, level 2 revision 1.

A document is a conforming stand-alone SVG file if:

  • it is a well-formed XML document,
  • its root element is an ‘svg’ element,
  • the SVG document fragment rooted at the document element is a conforming XML-compatible SVG markup fragment, and
  • any other SVG document fragments within the document (such as those within a ‘foreignObject’) form a conforming XML-compatible SVG markup fragment.

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.

Local use Explanation of format description terms

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.

Sustainability factors Explanation of format description terms

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.
Adoption

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.

Support for SVG in applications and toolkits is primarily for SVG 1.1. The compilers of this resource would appreciate information about support for features added in SVG 2. Comments welcome. SVG is supported in several Adobe tools current as of early 2020 (Illustrator, Animate, Character Animator) and also in Fireworks, a product no longer being maintained. SVG is supported in Microsoft Visio for import and export. Bentley Microstaion can export design drawings as SVG. Corel Draw will open and export SVG files. ESRI ArcGIS supports import of SVG files as graphics in a map layout or as marker symbol layers and export for maps. The statistics application Stata can export graphs in SVG format. Bentley's Microstation, a 3D design application can export 2D visualizations as SVG. Among the open source applications and software libraries that can read and write SVG images are: Inkscape, a free, open-source vector graphics editor, aimed at professionals; librsvg, a toolkit for rendering/displaying SVG images; Snap.svg, a JavaScript SVG library, successor to Raphaël; and the Apache Batik project, which has modules for parsing, viewing, and generating SVG images in client and server applications. The self-reported status of SVG 1.1 implementation by Apache Batik appears almost complete apart from excluding support for external resources and foreign objects, as well as for some font-related markup (which may correspond to font-related markup deprecated for SVG 2). The Oxygen XML Editor provides SVG support using the Apache Batik toolkit. Altova's editor (XML Spy) has supported SVG for many years. See mention in SVG Unleashed by Andrew Watt, which was published in 2002.

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.
External dependencies None
Technical protection considerations None

Quality and functionality factors Explanation of format description terms

Still Image
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.

Color maintenance

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 4.3.0.0).

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.

File type signifiers and format identifiers Explanation of format description terms

Tag Value Note
Filename extension svg
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.
Tag Value Note
Filename extension svgz
Used as an alias for 'svg.gz', i.e. for octet streams of type image/svg+xml, subsequently compressed with gzip.
Pronom PUID x-fmt/109
For compressed SVG file with .svgz extension. See http://www.nationalarchives.gov.uk/pronom/x-fmt/109.

Notes Explanation of format description terms

General

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.

History

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.

SVG 1.0 became a W3C Recommendation in September 2001. SVG 1.1 became a W3C Recommendation in January 2003, with a second edition published in August 2011, sometimes referred to as SVG 1.1 Full.

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.


Format specifications Explanation of format description terms


Useful references

URLs


Last Updated: 09/11/2020