SVG
Scalable Vector Graphics is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.
SVG images are defined in a vector graphics format and stored in XML text files. SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed. The XML text files can be created and edited with text editors or vector graphics editors, and are rendered by most web browsers. SVG can include JavaScript, potentially leading to cross-site scripting.
History
SVG has been in development within the World Wide Web Consortium since 1999 after six competing proposals for vector graphics languages had been submitted to the consortium during 1998.The early SVG Working Group decided not to develop any of the commercial submissions, but to create a new markup language that was informed by but not really based on any of them.
SVG was developed by the W3C SVG Working Group starting in 1998, after six competing vector graphics submissions were received that year:
- Web Schematics, from CCLRC
- PGML, from Adobe Systems, IBM, Netscape and Sun Microsystems
- VML, by Autodesk, Hewlett-Packard, Macromedia, Microsoft, and Vision
- Hyper Graphics Markup Language, by Orange UK and PRP
- WebCGM, from Boeing, PTC, InterCAP Graphics Systems, Inso Corporation, CCLRC, and Xerox
- DrawML, from Excosoft AB
Early adoption was limited due to lack of support in older versions of Internet Explorer. However, as of 2011, all major desktop browsers began to support SVG. Native browser support offers various advantages, such as not requiring plugins, allowing SVG to be mixed with other content, and improving rendering and scripting reliability. Mobile support for SVG exists in various forms, with different devices and browsers supporting SVG Tiny 1.1 or 1.2. SVG can be produced using vector graphics editors and rendered into raster formats. In web-based applications, Inline SVG allows embedding SVG content within HTML documents.
The SVG specification was updated to version 1.1 in 2011. Scalable Vector Graphics 2 became a W3C Candidate Recommendation on 15 September 2016. SVG 2 incorporates several new features in addition to those of SVG 1.1 and SVG Tiny 1.2.
Version 1.x
- SVG 1.0 became a W3C Recommendation on 4 September 2001.
- SVG 1.1 became a W3C Recommendation on 14 January 2003. 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 became W3C Recommendations on 14 January 2003. These are described as profiles of SVG 1.1.
- SVG Tiny 1.2 became a W3C Recommendation on 22 December 2008. It was initially drafted as a profile of the planned SVG Full 1.2, but was later refactored as a standalone specification. It is generally poorly supported.
- SVG 1.1 Second Edition, which includes all the errata and clarifications, but no new features to the original SVG 1.1 was released on 16 August 2011.
- SVG Tiny 1.2 Portable/Secure, a more secure subset of the SVG Tiny 1.2 profile introduced as an IETF draft standard on 29 July 2020. Also known as SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure is a requirement of the BIMI draft standard.
Version 2
SVG 2 removes or deprecates some features of SVG 1.1 and incorporates new features from HTML5 and Web [Open Font Format] :- For example, SVG 2 removes several font elements such as
glyphandaltGlyph. - The
xml:spaceattribute is deprecated in favor of CSS. - HTML5 features such as
translateanddata-*attributes have been added. - Text handling features from SVG Tiny 1.2 are annotated as to be included, but not yet formalized in text. Some other 1.2 features are cherry picked in, but SVG 2 is not a superset of SVG tiny 1.2 in general.
Features
SVG supports interactivity, animation, and rich graphical capabilities, making it suitable for both web and print applications. SVG images can be compressed with the gzip algorithm, resulting in SVGZ files that are typically 20–50% smaller than the original. SVG also supports metadata, enabling better indexing, searching, and retrieval of SVG content.SVG allows three types of graphic objects: vector graphic shapes, bitmap images, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects. SVG drawings can be interactive and can include animation, defined in the SVG XML elements or via scripting that accesses the SVG Document Object Model.
SVG uses CSS for styling and JavaScript for scripting. Text, including internationalization and localization, appearing in plain text within the SVG DOM, enhances the accessibility of SVG graphics.
Printing
Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe's PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page.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. The W3C explicitly recommends SMIL as the standard for animation in SVG.A rich set of event handlers such as "onmouseover" and "onclick" can be assigned to any SVG graphical object to apply actions and events.
Mobile profiles
Because of industry demand, two mobile profiles were introduced with SVG 1.1: SVG Tiny and SVG Basic.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; it does not support styling or scripting. SVG Basic was defined for higher-level mobile devices, such as smartphones.
In 2003, the 3GPP, an international telecommunications standards group, adopted SVG Tiny as the mandatory vector graphics media format for next-generation phones. SVGT is the required vector graphics format and support of SVGB is optional for Multimedia Messaging Service and Packet-switched Streaming Service. It was later added as required format for vector graphics in 3GPP IP Multimedia Subsystem.
Neither mobile profile includes support for the full Document Object Model, 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.
SVGT 1.2 adds a microDOM, styling and scripting. SVGT 1.2 also includes some features not found in SVG 1.1, including non-scaling strokes, which are supported by some SVG 1.1 implementations, such as Opera, Firefox, and WebKit. As shared code bases between desktop and mobile browsers increased, the use of SVG 1.1 over SVGT 1.2 also increased.
Compression
SVG images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms. When an SVG image has been compressed with the gzip algorithm, it is referred to as an "SVGZ" image and uses the corresponding.svgz filename extension. Conforming SVG 1.1 viewers will display compressed images. An SVGZ file is typically 20 to 50 percent of the original size. W3C provides SVGZ files to test for conformance.Design
The SVG 1.1 specification defines 14 functional areas or feature sets:;Paths
;Basic shapes
;Text
;Painting
;Color
;Gradients and patterns
;Clipping, masking and compositing
;Filter effects
;Interactivity
;Linking
;Scripting
;Animation
;Fonts
;Metadata
An SVG document can define components including shapes, gradients etc., and use them repeatedly. SVG images can also contain raster graphics, such as PNG and JPEG images, and further SVG images.
This code will produce the colored shapes shown in the image, excluding the grid and labels:
Implementation
The use of SVG on the web was limited by the lack of support in older versions of Internet Explorer. Many websites that serve SVG images also provide the images in a raster format, either automatically by HTTP content negotiation or by allowing the user directly to choose the file.Web browsers
was the first browser to support SVG in release version 3.2 in February 2004. As of 2011, all major desktop browsers, and many minor ones, have some level of SVG support. Other browsers' implementations are not yet complete; see comparison of layout engines for further details.Some earlier versions of Firefox, as well as a few other, now outdated, web browsers capable of displaying SVG graphics, needed them embedded in
<object> or <iframe> elements to display them integrated as parts of an HTML webpage instead of using the standard way of integrating images with <img>. However, SVG images may be included in XHTML pages using XML namespaces.Tim Berners-Lee, the inventor of the World Wide Web, was critical of early versions of Internet Explorer for its failure to support SVG.
- Opera 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. Opera 9.5 has partial SVG Tiny 1.2 support. It also supports SVGZ.
- Browsers based on the Gecko layout engine all have had incomplete support for the SVG 1.1 Full specification since 2005. The Mozilla site has an overview of the modules which are supported in Firefox and of the modules which are in development. Gecko 1.9, included in Firefox 3.0, adds support for more of the SVG specification.
- Pale Moon, which uses the Goanna layout engine, supports SVG.
- Browsers based on WebKit have had incomplete support for the SVG 1.1 Full specification since 2006.
- Amaya has partial SVG support.
- Internet Explorer 8 and older versions do not support SVG. IE9 supports the basic SVG feature set. IE10 extended SVG support by adding SVG 1.1 filters.
- Microsoft Edge Legacy supports SVG 1.1.
- The Maxthon Cloud Browser also supports SVG.
Mobile devices
Support for SVG may be limited to SVGT on older or more limited smart phones or may be primarily limited by their respective operating system. Adobe Flash Lite has optionally supported SVG Tiny since version 1.1. At the SVG Open 2005 conference, Sun demonstrated a mobile implementation of SVG Tiny 1.1 for the Connected Limited Device Configuration platform.Mobiles that use Opera Mobile, as well as the iPhone's built in browser, also include SVG support. However, even though it used the WebKit engine, the Android built-in browser did not support SVG prior to v3.0. Prior to v3.0, Firefox Mobile 4.0b2 for Android was the first browser running under Android to support SVG by default.
The level of SVG Tiny support available varies from mobile to mobile, depending on the SVG engine installed. Many newer mobile products support additional features beyond SVG Tiny 1.1, like gradient and opacity; this is sometimes referred to as "SVGT 1.1+", though there is no such standard.
RIM's BlackBerry has built-in support for SVG Tiny 1.1 since version 5.0. Support continues for WebKit-based BlackBerry Torch browser in OS 6 and 7.
Nokia's S60 platform has built-in support for SVG. For example, icons are generally rendered using the platform's SVG engine. Nokia has also led the JSR 226: Scalable 2D Vector Graphics API expert group that defines Java ME API for SVG presentation and manipulation. This API has been implemented in S60 Platform 3rd Edition Feature Pack 1 and onward. Some Series 40 phones also support SVG.
Most Sony Ericsson phones beginning with K700 support SVG Tiny 1.1. Phones beginning with K750 also support such features as opacity and gradients. Phones with Sony Ericsson Java Platform-8 have support for JSR 226.
Windows Phone has supported SVG since version 7.5.
SVG is also supported on various mobile devices from Motorola, Samsung, LG, and Siemens mobile/BenQ-Siemens. eSVG, an SVG rendering library mainly written for embedded devices, is available on some mobile platforms.
Authoring
SVG images can be hand-coded or produced by the use of a vector graphics editor, such as Inkscape, Adobe Illustrator, Adobe Animate, or CorelDRAW, and rendered to common raster image formats such as PNG using the same software. Additionally, editors like Inkscape and Boxy SVG provide tools to trace raster images to Bézier curves typically using image tracing back-ends like potrace, autotrace, and imagetracerjs.Software can be programmed to render SVG images by using a library such as librsvg used by GNOME since 2000, Batik and ThorVG since 2020 for lightweight systems. SVG images can also be rendered to any desired popular image format by using ImageMagick, a free command-line utility.
For web-based applications, the mode of usage termed Inline SVG allows SVG content to be embedded within an HTML document using an
<svg> tag. Its graphical capabilities can then be employed to create sophisticated user interfaces as the SVG and HTML share context, event handling, and CSS.Other uses for SVG include embedding for use in word processing and desktop publishing, plotting graphs, and importing paths. The application services Microsoft 365 and Microsoft Office 2019 offer support for exporting, importing and editing SVG images. The Uniform Type Identifier for SVG used by Apple is
public.svg-image and conforms to public.image and public.xml.Security
As a document format, similar to HTML documents, SVG can host scripts or CSS. This is an issue when an attacker can upload a SVG file, such as a profile picture, to a website and the file is treated as a normal picture, but contains malicious content. For instance, if an SVG file is deployed as a CSS background image, or a logo on some website, or in some image gallery, then, when the image is loaded in a browser, it activates a script or other content. This could lock up the browser, but could also lead to HTML injection and cross-site scripting attacks. The W3C therefore stipulates certain requirements when SVG is simply used for images: SVG Security.The W3C says that Inline SVG is considered less of a security risk because the content is part of a greater document, and so scripting and CSS would not be unexpected.