Sustainability of Digital Formats: Planning for Library of Congress Collections

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.

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:

• Data-Driven SVG Apps: A Rapid Development Approach (2002) by Pramod Jain.
• As illustrated in Export Stata graphs in SVG format, some statistics software can generate graphs in SVG format. See also High-quality R graphics on the Web with SVG.
• In From Words to Diagrams: Visualization of Historical Bookbinding, Alberto Campagnolo shows how he uses structured data about binding structures of old books to generate diagrams that are easier to understand than descriptions based on very specialized controlled vocabulary.
• D3.js is a Javascript library for generating data-driven documents on the web using HTML, SVG, and CSS. For examples, see d3-geo and d3-shape.
• More specialized tools like SVGIS exist to turn a geospatial vector dataset (e.g., in GeoJSON or Esri Shapefile) into an SVG map.
• The tutorial SVG scripting example: an interactive map, by Peter Collingridge, maps some simple data onto an outline map of Africa in SVG format.
• A Web-Based Application for Real-Time GIS, which tested integration of real-time weather information into a system delivering weather maps on the web, concluded that the "SVG format is capable for producing and publishing real-time maps on the web."
• Use SVG Files to Effortlessly Mill Without Learning CAD and CAM and instructions to use numerical control carving devices to make a Simple Stand provide examples based on SVG for construction projects suitable for small businesses, individuals, classrooms, and public "makerspaces."

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 Born-digital file format standards 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.

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

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.

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.