XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. T ...
-based
vector image format
Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...
for defining
two-dimensional
In mathematics, a plane is a Euclidean (flat), two-dimensional surface that extends indefinitely. A plane is the two-dimensional analogue of a point (zero dimensions), a line (one dimension) and three-dimensional space. Planes can arise as s ...
graphics, having support for interactivity and animation. The SVG specification is an
open standard
An open standard is a standard that is openly accessible and usable by anyone. It is also a prerequisite to use open license, non-discrimination and extensibility. Typically, anybody can participate in the development. There is no single definition ...
developed by the
World Wide Web Consortium
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...
since 1999.
SVG images are defined in a
vector graphics
Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...
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
''Scripted'' is the debut studio album by American rock band Icon for Hire. It was released on Tooth & Nail Records on August 23, 2011, and went on to break the label's new artist record for albums sold during the first week of release.
Backgr ...
, and compressed. The XML text files can be created and edited with
text editor
A text editor is a type of computer program that edits plain text. Such programs are sometimes known as "notepad" software (e.g. Windows Notepad). Text editors are provided with operating systems and software development packages, and can be us ...
s or
vector graphics editor
A vector graphics editor is a computer program that allows users to compose and edit vector graphics images interactively on a computer and save them in one of many popular vector graphics formats, such as EPS, PDF, WMF, SVG, or VML.
Vector ...
s, and are rendered by the most-used
web browser
A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
s.
Overview
SVG has been in development within the
World Wide Web Consortium
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...
(W3C) since 1999 after six competing proposals for vector graphics languages had been submitted to the consortium during 1998 (see below).
The early SVG Working Group decided not to develop any of the commercial submissions, but to create a new
markup language
Markup language refers to a text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts. Markup is often used to control the display of the document ...
that was informed by but not really based on any of them.
SVG allows three types of graphic objects:
vector graphic
Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...
shapes (such as paths consisting of straight lines and curves),
bitmap
In computing, a bitmap is a mapping from some domain (for example, a range of integers) to bits. It is also called a bit array
A bit array (also known as bitmask, bit map, bit set, bit string, or bit vector) is an array data structure that c ...
images, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations,
clipping path
A clipping path (or "deep etch") is a closed vector path, or shape, used to cut out a 2D image in image editing software. Anything inside the path will be included after the clipping path is applied; anything outside the path will be omitted fro ...
interactive
Across the many fields concerned with interactivity, including information science, computer science, human-computer interaction, communication, and industrial design, there is little agreement over the meaning of the term "interactivity", but mo ...
and can include
animation
Animation is a method by which image, still figures are manipulated to appear as Motion picture, moving images. In traditional animation, images are drawn or painted by hand on transparent cel, celluloid sheets to be photographed and exhibited ...
, defined in the SVG XML elements or via scripting that accesses the SVG
Document Object Model
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
(DOM). SVG uses
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
for styling and
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
for scripting. Text, including
internationalization and localization
In computing, internationalization and localization (American) or internationalisation and localisation (British English), often abbreviated i18n and L10n, are means of adapting computer software to different languages, regional peculiarities and ...
, appearing in plain text within the SVG DOM, enhances the
accessibility
Accessibility is the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities. The concept of accessible design and practice of accessible development ensures both "direct access" (i. ...
of SVG graphics.
The SVG specification was updated to version 1.1 in 2011. There are two 'Mobile SVG Profiles,' SVG Tiny and SVG Basic, meant for
mobile device
A mobile device (or handheld computer) is a computer small enough to hold and operate in the hand. Mobile devices typically have a flat LCD or OLED screen, a touchscreen interface, and digital or physical buttons. They may also have a physical ...
s with reduced computational and display capabilities. 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.
Printing
Though the SVG Specification primarily focuses on
vector graphics markup language
An Image file format is a file format for a digital image. There are many formats that can be used, such as JPEG, PNG, and GIF. Most formats up until 2022 were for storing 2D images, not 3D ones. The data stored in an image file format may be c ...
, its design includes the basic capabilities of a
page description language
In digital printing, a page description language (PDL) is a computer language that describes the appearance of a printed page in a higher level than an actual output bitmap (or generally raster graphics). An overlapping term is printer control la ...
like Adobe's
PDF
Portable Document Format (PDF), standardized as ISO 32000, is a file format developed by Adobe in 1992 to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems. ...
. It contains provisions for rich graphics, and is compatible with
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
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
A scripting language or script language is a programming language that is used to manipulate, customize, and automate the facilities of an existing system. Scripting languages are usually interpreted at runtime rather than compiled.
A scripting ...
(e.g.
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
). The W3C explicitly recommends SMIL as the standard for animation in SVG.
A rich set of
event handler
In programming and software design, an event is an action or occurrence recognized by software, often originating asynchronously from the external environment, that may be handled by the software. Computer events can be generated or triggered ...
s such as "''onmouseover"'' and "''onclick"'' can be assigned to any SVG graphical object to apply actions and events.
Compression
SVG images, being XML, contain many repeated fragments of text, so they are well suited for
lossless data compression
Lossless compression is a class of data compression that allows the original data to be perfectly reconstructed from the compressed data with no loss of information. Lossless compression is possible because most real-world data exhibits statistic ...
algorithms. When an SVG image has been compressed with the
gzip
gzip is a file format and a software application used for file compression and decompression. The program was created by Jean-loup Gailly and Mark Adler as a free software replacement for the compress program used in early Unix systems, and in ...
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.
Development history
SVG was developed by the W3C
SVG Working Group
The SVG Working Group is a working group created by the World Wide Web Consortium (W3C) to address the need for an alternative to the PostScript document format. The PostScript format was unable to create scalable fonts and objects without creati ...
starting in 1998, after six competing vector graphics submissions were received that year:
* Web Schematics, from CCLRC
*
PGML
Precision Graphics Markup Language (PGML) is an XML-based language for representing vector graphics. It was a World Wide Web Consortium (W3C) submission by Adobe Systems, IBM, Netscape, and Sun Microsystems, that was not adopted as a recommen ...
, from
Adobe Systems
Adobe Inc. ( ), originally called Adobe Systems Incorporated, is an American multinational computer software company incorporated in Delaware
and headquartered in San Jose, California. It has historically specialized in software for the crea ...
Netscape
Netscape Communications Corporation (originally Mosaic Communications Corporation) was an American independent computer services company with headquarters in Mountain View, California and then Dulles, Virginia. Its Netscape web browser was onc ...
and
Sun Microsystems
Sun Microsystems, Inc. (Sun for short) was an American technology company that sold computers, computer components, software, and information technology services and created the Java programming language, the Solaris operating system, ZFS, the ...
*
VML
Vector Markup Language (VML) is an obsolete XML-based file format for two-dimensional vector graphics. It was specified in Part 4 of the Office Open XML standards International Organization for Standardization, ISO/International Electrotechnica ...
, by
Autodesk
Autodesk, Inc. is an American multinational software corporation that makes software products and services for the architecture, engineering, construction, manufacturing, media, education, and entertainment industries. Autodesk is headquartered ...
,
Hewlett-Packard
The Hewlett-Packard Company, commonly shortened to Hewlett-Packard ( ) or HP, was an American multinational information technology company headquartered in Palo Alto, California. HP developed and provided a wide variety of hardware components ...
,
Macromedia
Macromedia, Inc., was an American graphics, multimedia, and web development software company (1992–2005) headquartered in San Francisco, California, that made products such as Flash and Dreamweaver. It was purchased by its rival Adobe Systems ...
,
Microsoft
Microsoft Corporation is an American multinational technology corporation producing computer software, consumer electronics, personal computers, and related services headquartered at the Microsoft Redmond campus located in Redmond, Washing ...
, and
Vision
Vision, Visions, or The Vision may refer to:
Perception Optical perception
* Visual perception, the sense of sight
* Visual system, the physical mechanism of eyesight
* Computer vision, a field dealing with how computers can be made to gain un ...
* Hyper Graphics Markup Language (HGML), by
Orange UK
Orange mobile UK was a mobile network operator and internet service provider in the United Kingdom, launched in 1994. It was once a constituent of the FTSE 100 Index but was purchased by France Télécom (now Orange S.A.) in 2000, which then a ...
Boeing
The Boeing Company () is an American multinational corporation that designs, manufactures, and sells airplanes, rotorcraft, rockets, satellites, telecommunications equipment, and missiles worldwide. The company also provides leasing and product ...
Xerox
Xerox Holdings Corporation (; also known simply as Xerox) is an American corporation that sells print and electronic document, digital document products and services in more than 160 countries. Xerox is headquartered in Norwalk, Connecticut (ha ...
* DrawML, from Excosoft AB
The working group was chaired at the time by Chris Lilley of the W3C.
Version 1.x
* SVG 1.0 became a
W3C Recommendation
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...
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
Scalable Vector Graphics (SVG) is an XML-based vector image 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 sin ...
and
SVG Basic
Scalable Vector Graphics (SVG) is an XML-based vector image 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 sinc ...
(the Mobile SVG Profiles) 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 (which has since been dropped in favor of SVG 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 July 29, 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
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...
and
Web Open Font Format
The Web Open Font Format (WOFF) is a font format for use in web pages.
WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added.
The two primary goals are first to distinguish font fi ...
:
* For example, SVG 2 removes several font elements such as glyph and altGlyph (replaced by the WOFF font format).
* The xml:space attribute is deprecated in favor of CSS.
* HTML5 features such as translate and data-* 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.
SVG 2 reached the Candidate Recommendation stage on 15 September 2016, and revised versions were published on 7 August 2018 and 4 October 2018. The latest draft was released on 21 March 2022.
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 agent
In computing, a user agent is any software, acting on behalf of a user, which "retrieves, renders and facilitates end-user interaction with Web content". A user agent is therefore a special kind of software agent.
Some prominent examples of us ...
s with limited capabilities. In particular, SVG Tiny was defined for highly restricted mobile devices such as
cellphone
A mobile phone, cellular phone, cell phone, cellphone, handphone, hand phone or pocket phone, sometimes shortened to simply mobile, cell, or just phone, is a portable telephone that can make and receive calls over a radio frequency link whil ...
s; it does not support styling or scripting. SVG Basic was defined for higher-level mobile devices, such as
smartphone
A smartphone is a portable computer device that combines mobile telephone and computing functions into one unit. They are distinguished from feature phones by their stronger hardware capabilities and extensive mobile operating systems, whic ...
s.
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
Multimedia Messaging Service (MMS) is a standard way to send messages that include multimedia content to and from a mobile phone over a cellular network. Users and providers may refer to such a message as a PXT, a picture message, or a multimedia ...
(MMS) and Packet-switched Streaming Service. It was later added as required format for vector graphics in 3GPP
IP Multimedia Subsystem
The IP Multimedia Subsystem or IP Multimedia Core Network Subsystem (IMS) is a standardised architectural framework for delivering IP multimedia services. Historically, mobile phones have provided voice call services over a circuit-switched-styl ...
(IMS).
Differences from non-mobile SVG
Neither mobile profile includes support for the full Document Object Model (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.
SVGT 1.2 adds a microDOM (μDOM), styling and scripting.
Related work
The
MPEG-4 Part 20
MPEG-4 Part 20, or MPEG-4 Lightweight Application Scene Representation (LASeR) is a rich media standard dedicated to the mobile, embedded and consumer electronics industries specified by the MPEG standardization group. LASeR is based on SVG Tiny ...
standard - ''Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF)'' is based on SVG Tiny. It was developed by
MPEG
The Moving Picture Experts Group (MPEG) is an alliance of working groups established jointly by International Organization for Standardization, ISO and International Electrotechnical Commission, IEC that sets standards for media coding, includ ...
(
ISO/IEC JTC 1
ISO/IEC JTC 1, entitled "Information technology", is a joint technical committee (JTC) of the International Organization for Standardization (ISO) and the International Electrotechnical Commission (IEC). Its purpose is to develop, maintain and pr ...
/SC29/WG11) and published as ISO/IEC 14496-20:2006. SVG capabilities are enhanced in MPEG-4 Part 20 with key features for mobile services, such as dynamic updates, binary encoding, state-of-art font representation. SVG was also accommodated in
MPEG-4 Part 11
MPEG-4 Part 11 ''Scene description and application engine'' was published as ISO/IEC 14496-11 in 2005. MPEG-4 Part 11 is also known as BIFS, XMT, MPEG-J. It defines:
* the coded representation of the spatio-temporal positioning of audio-visual obje ...
XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. T ...
.
Functionality
The SVG 1.1 specification defines 14 functional areas or feature sets:
;Paths
:Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a
clipping path
A clipping path (or "deep etch") is a closed vector path, or shape, used to cut out a 2D image in image editing software. Anything inside the path will be included after the clipping path is applied; anything outside the path will be omitted fro ...
. Paths have a compact coding.
:For example, M (for "move to") precedes initial numeric x and y
coordinates
In geometry, a coordinate system is a system that uses one or more numbers, or coordinates, to uniquely determine the position of the points or other geometric elements on a manifold such as Euclidean space. The order of the coordinates is sig ...
, and L (for "line to") precedes a point to which a line should be drawn. Further command letters (C, S, Q, T, and A) precede data that is used to draw various Bézier and
elliptical
Elliptical may mean:
* having the shape of an ellipse, or more broadly, any oval shape
** in botany, having an elliptic leaf shape
** of aircraft wings, having an elliptical planform
* characterised by ellipsis (the omission of words), or by conc ...
curves. Z is used to close a path.
:In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.
;Basic shapes
:Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles, and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.
;Text
:Unicode character text included in an SVG file is expressed as
XML
Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable. T ...
character data. Many visual effects are possible, and the SVG specification automatically handles bidirectional text (for composing a combination of English and Arabic text, for example), vertical text (as Chinese or Japanese may be written) and characters along a curved path (such as the text around the edge of the Great Seal of the United States).
;Painting
:SVG shapes can be filled and outlined (painted with a color, a gradient, or a pattern). Fills may be opaque, or have any degree of transparency.
:"Markers" are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.
;Color
:Colors can be applied to all visible SVG elements, either directly or via fill, stroke, and other properties. Colors are specified in the same way as in
CSS2
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
, i.e. using names like black or blue, in
hexadecimal
In mathematics and computing, the hexadecimal (also base-16 or simply hex) numeral system is a positional numeral system that represents numbers using a radix (base) of 16. Unlike the decimal system representing numbers using 10 symbols, hexa ...
such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).
;Gradients and patterns
:SVG shapes can be filled or outlined with solid colors as above, or with color gradients or with repeating patterns. Color gradients can be linear or radial (circular), and can involve any number of colors as well as repeats. Opacity gradients can also be specified. Patterns are based on predefined raster or vector graphic objects, which can be repeated in x and y directions. Gradients and patterns can be animated and scripted.
:Since 2008, there has been discussion among professional users of SVG that either
gradient
In vector calculus, the gradient of a scalar-valued differentiable function of several variables is the vector field (or vector-valued function) \nabla f whose value at a point p is the "direction and rate of fastest increase". If the gradi ...
meshes
A mesh is a barrier made of connected strands of metal, fiber, or other flexible or ductile materials. A mesh is similar to a web or a net in that it has many attached or woven strands.
Types
* A plastic mesh may be extruded, oriented, ex ...
or preferably
diffusion curve Diffusion curves are vector graphic primitives for creating smooth-shaded images. Each diffusion curve partitions the 2D graphics space through which it is drawn, defining different colors on either side. When rendered, these colors then spread i ...
s could usefully be added to the SVG specification. It is said that a "simple representation
sing diffusion curves
Singing is the act of creating musical sounds with the voice. A person who sings is called a singer, artist or vocalist (in jazz and/or popular music). Singers perform music (arias, recitatives, songs, etc.) that can be sung with or without ...
is capable of representing even very subtle shading effects" and that "Diffusion curve images are comparable both in quality and coding efficiency with gradient meshes, but are simpler to create (according to several artists who have used both tools), and can be captured from bitmaps fully automatically." The current draft of SVG 2 includes gradient meshes.
;Clipping, masking and compositing
:Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both ''inside'' and ''outside'' regions that can be painted (with colors, gradients and patterns) independently. Fully opaque ''clipping paths'' and semi-transparent ''masks'' are ''composited'' together to calculate the color and opacity of every pixel of the final image, using
alpha
Alpha (uppercase , lowercase ; grc, ἄλφα, ''álpha'', or ell, άλφα, álfa) is the first letter of the Greek alphabet. In the system of Greek numerals, it has a value of one. Alpha is derived from the Phoenician letter aleph , whic ...
blending.
;Filter effects
:
:A filter effect consists of a series of graphics operations that are applied to a given source vector graphic to produce a modified
bitmapped
upright=1, The Smiley, smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Enlarging further, each pixel can be analyzed, with their colors constructed through combination of the values for ...
result.
;Interactivity
:SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface
events
Event may refer to:
Gatherings of people
* Ceremony, an event of ritual significance, performed on a special occasion
* Convention (meeting), a gathering of individuals engaged in some common interest
* Event management, the organization of ev ...
such as changes in
focus
Focus, or its plural form foci may refer to:
Arts
* Focus or Focus Festival, former name of the Adelaide Fringe arts festival in South Australia Film
*''Focus'', a 1962 TV film starring James Whitmore
* ''Focus'' (2001 film), a 2001 film based ...
, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.
;Linking
:SVG images can contain hyperlinks to other documents, using
XLink
XML Linking Language, or XLink, is an XML markup language and W3C specification that provides methods for creating internal and external links within XML documents, and associating metadata with those links.
The XLink specification
XLink 1.1 is a ...
. Through the use of the element or a
fragment identifier
In computer hypertext, a URI fragment is a character string (computer science), string of character (computing), characters that refers to a resource (computer science), resource that is subordinate to another, primary resource. The primary resou ...
,
URL
A Uniform Resource Locator (URL), colloquially termed as a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL is a specific type of Uniform Resource Identifie ...
s can link to SVG files that change the visible area of the document. This allows for creating specific view states that are used to zoom in/out of a specific area or to limit the view to a specific element. This is helpful when creating sprites.
XLink
XML Linking Language, or XLink, is an XML markup language and W3C specification that provides methods for creating internal and external links within XML documents, and associating metadata with those links.
The XLink specification
XLink 1.1 is a ...
support in combination with the element also allow linking to and re-using internal and external elements. This allows coders to do more with less markup and makes for cleaner code.
;Scripting
:All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. The default scripting language is
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
and there are defined
Document Object Model
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
(DOM) objects for every SVG element and attribute. Scripts are enclosed in <script> elements. They can run in response to pointer events, keyboard events and document events as required.
;Animation
:
: SVG content can be animated using the built-in animation elements such as <animate>, <animateMotion> and <animateColor>. Content can be animated by manipulating the DOM using ECMAScript and the scripting language's built-in timers. SVG animation has been designed to be compatible with current and future versions of
Synchronized Multimedia Integration Language
Synchronized Multimedia Integration Language (SMIL ()) is a World Wide Web Consortium recommended Extensible Markup Language (XML) markup language to describe multimedia presentations. It defines markup for timing, layout, animations, visual t ...
(SMIL). Animations can be continuous, they can loop and repeat, and they can respond to user events, as mentioned above.
;Fonts
:As with HTML and CSS, text in SVG may reference external font files, such as system fonts. If the required font files do not exist on the machine where the SVG file is rendered, the text may not appear as intended. To overcome this limitation, text can be displayed in an ''SVG font'', where the required
glyph
A glyph () is any kind of purposeful mark. In typography, a glyph is "the specific shape, design, or representation of a character". It is a particular graphical representation, in a particular typeface, of an element of written language. A g ...
s are defined in SVG as a font that is then referenced from the <text> element.
;Metadata
:In accord with the
W3C
The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working to ...
's Semantic Web initiative, SVG allows authors to provide
metadata
Metadata is "data that provides information about other data", but not the content of the data, such as the text of a message or the image itself. There are many distinct types of metadata, including:
* Descriptive metadata – the descriptive ...
about SVG content. The main facility is the <metadata> element, where the document can be described using
Dublin Core
220px, Logo image of DCMI, which formulates Dublin Core
The Dublin Core, also known as the Dublin Core Metadata Element Set (DCMES), is a set of fifteen "core" elements (properties) for describing resources. This fifteen-element Dublin Core has ...
metadata properties (e.g. title, creator/author, subject, description, etc.). Other metadata schemas may also be used. In addition, SVG defines <title> and <desc> elements where authors may also provide plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means.
An SVG document can define components including shapes, gradients etc., and use them repeatedly. SVG images can also contain
raster graphics
upright=1, The Smiley, smiley face in the top left corner is a raster image. When enlarged, individual pixels appear as squares. Enlarging further, each pixel can be analyzed, with their colors constructed through combination of the values for ...
JPEG
JPEG ( ) is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and imag ...
images, and further SVG images.
Example
This code will produce the colored shapes shown in the image, excluding the grid and labels:
SVG on the web
The use of SVG on the web was limited by the lack of support in older versions of
Internet Explorer
Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...
(IE). Many websites that serve SVG images also provide the images in a raster format, either automatically by
HTTP
The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, ...
content negotiation
Content negotiation refers to mechanisms defined as a part of HTTP that make it possible to serve different versions of a document (or more generally, representations of a resource) at the same URI, so that user agents can specify which version fit ...
or by allowing the user directly to choose the file.
Google
Google LLC () is an American multinational technology company focusing on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics. ...
announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
, and that users would begin to see such content listed among their search results.
It was announced on 8 December 2010 that
Google Image Search
Google Images (previously Google Image Search) is a search engine owned by Google that allows users to search the World Wide Web for images. It was introduced on July 12, 2001 due to a demand for pictures of the green Versace dress of Jennifer ...
would also begin indexing SVG files. The site announced an option to restrict image searches to SVG files on 11 February 2011.
Native browser support
Konqueror
Konqueror is a free and open-source web browser and file manager that provides web access and file-viewer functionality for file systems (such as local files, files on a remote FTP server and files in a disk image). It forms a core part of ...
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 (e.g. versions between 1.5 and 3.6), as well as a smattering of 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 namespace
XML namespaces are used for providing uniquely named elements and attributes in an XML document. They are defined in a W3C recommendation. An XML instance may contain element or attribute names from more than one XML vocabulary. If each vocabulary ...
s.
Tim Berners-Lee
Sir Timothy John Berners-Lee (born 8 June 1955), also known as TimBL, is an English computer scientist best known as the inventor of the World Wide Web. He is a Professorial Fellow of Computer Science at the University of Oxford and a profess ...
, the inventor of the
World Wide Web
The World Wide Web (WWW), commonly known as the Web, is an information system enabling documents and other web resources to be accessed over the Internet.
Documents and downloadable media are made available to the network through web se ...
, was critical of early versions of Internet Explorer for its failure to support SVG.
*
Opera
Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a librett ...
(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. Opera 9.5 has partial SVG Tiny 1.2 support. It also supports SVGZ (compressed SVG).
* Browsers based on the
Gecko
Geckos are small, mostly carnivorous lizards that have a wide distribution, found on every continent except Antarctica. Belonging to the infraorder Gekkota, geckos are found in warm climates throughout the world. They range from .
Geckos ar ...
Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and ...
SeaMonkey
SeaMonkey is a free and open-source Internet suite. It is the continuation of the former Mozilla Application Suite, based on the same source code, which itself grew out of Netscape Communicator and formed the base of Netscape 6 and Netscape 7.
...
) 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
Mozilla Firefox 3.0 is a version of the Firefox web browser released on June 17, 2008, by the Mozilla Corporation.
Firefox 3.0 uses version 1.9 of the Gecko layout engine for displaying web pages. This version fixes many bugs, improves standar ...
, adds support for more of the SVG specification (including filters).
*
Pale Moon
Pale Moon is an open-source web browser with an emphasis on customization; its motto is "Your browser, Your way". There are official releases for Microsoft Windows and Linux, as well as contributed builds for various platforms.
Pale Moon origi ...
, which uses the
Goanna
A goanna is any one of several species of lizards of the genus '' Varanus'' found in Australia and Southeast Asia.
Around 70 species of ''Varanus'' are known, 25 of which are found in Australia. This varied group of carnivorous reptiles ranges ...
layout engine (a fork of the
Gecko
Geckos are small, mostly carnivorous lizards that have a wide distribution, found on every continent except Antarctica. Belonging to the infraorder Gekkota, geckos are found in warm climates throughout the world. They range from .
Geckos ar ...
engine), supports SVG.
* Browsers based on
WebKit
WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as on the iOS and iPadOS version of any web browser. WebKit is also used by the BlackBerry Browser, PlayStation consoles beginning from the PS ...
(such as
Apple
An apple is an edible fruit produced by an apple tree (''Malus domestica''). Apple fruit tree, trees are agriculture, cultivated worldwide and are the most widely grown species in the genus ''Malus''. The tree originated in Central Asia, wh ...
's
Safari
A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an importa ...
,
Google Chrome
Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS ...
, and
The Omni Group
The Omni Group is an American software company that develops software for the macOS, iOS, and watchOS platforms. The Omni Group was informally founded as a NEXTSTEP consulting company in 1989 by Wil Shipley, who immediately brought on Ken Case ...
's
OmniWeb
OmniWeb is a discontinued web browser that was developed and marketed by The Omni Group exclusively for Apple's macOS operating system. Though a stable version is no longer maintained, it is still available as a free download and unstable versions ...
) have had incomplete support for the SVG 1.1 Full specification since 2006.
* Amaya has partial SVG support.
*
Internet Explorer 8
Windows Internet Explorer 8 (IE8) is a web browser for Windows. It was released by Microsoft on March 19, 2009, as the eighth version of Internet Explorer and the successor to Internet Explorer 7. It was the default browser in Windows 7 (later def ...
and older versions do not support SVG. IE9 (released 14 March 2011) supports the basic SVG feature set. IE10 extended SVG support by adding SVG 1.1 filters.
*
Microsoft Edge
Microsoft Edge is a proprietary, cross-platform web browser created by Microsoft. It was first released in 2015 as part of Windows 10 and Xbox One and later ported to other platforms as a fork of Google's Chromium open-source project: Android ...
Legacy supports SVG 1.1.
* The Maxthon Cloud Browser also supports SVG.
There are several advantages to native and full support: plugins are not needed, SVG can be freely mixed with other content in a single document, and rendering and scripting become considerably more reliable.
Mobile support
SVG Tiny (SVGT) 1.1 and 1.2 are mobile profiles for SVG. SVGT 1.2 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.
Support for SVG may be limited to SVGT on older or more limited
smart phones
A smartphone is a portable computer device that combines mobile telephone and computing functions into one unit. They are distinguished from feature phones by their stronger hardware capabilities and extensive mobile operating systems, which ...
or may be primarily limited by their respective operating system.
Adobe Flash Lite
Adobe Flash Lite (formerly Macromedia Flash Lite) was a lightweight version of Adobe Flash Player, a software application published by Adobe Systems for viewing Flash content. Flash Lite operates on devices that Flash Player cannot, such as mob ...
has optionally supported SVG Tiny since version 1.1. At the SVG Open 2005 conference,
Sun
The Sun is the star at the center of the Solar System. It is a nearly perfect ball of hot plasma, heated to incandescence by nuclear fusion reactions in its core. The Sun radiates this energy mainly as light, ultraviolet, and infrared radi ...
demonstrated a mobile implementation of SVG Tiny 1.1 for the
Connected Limited Device Configuration The Connected Limited Device Configuration (CLDC) is a specification of a framework for Java ME applications describing the basic set of libraries and virtual-machine features that must be present in an implementation. The CLDC is combined with one ...
(CLDC) platform.
Mobiles that use
Opera Mobile
Opera Mobile is a mobile web browser for smartphones, tablets and PDAs developed by Opera.
History
The first devices to run a mobile edition of Opera were the Psion Series 5, Psion Series 5mx, Psion Series 7, and then Psion netBook. They ra ...
, as well as the iPhone's built in browser, also include SVG support. However, even though it used the
WebKit
WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as on the iOS and iPadOS version of any web browser. WebKit is also used by the BlackBerry Browser, PlayStation consoles beginning from the PS ...
engine, the Android built-in browser did not support SVG prior to v3.0 (Honeycomb). Prior to v3.0, Firefox Mobile 4.0b2 (beta) 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
The blackberry is an edible fruit produced by many species in the genus ''Rubus'' in the family Rosaceae, hybrids among these species within the subgenus ''Rubus'', and hybrids between the subgenera ''Rubus'' and ''Idaeobatus''. The taxonomy of ...
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
Nokia Corporation (natively Nokia Oyj, referred to as Nokia) is a Finnish multinational corporation, multinational telecommunications industry, telecommunications, technology company, information technology, and consumer electronics corporatio ...
's
S60 platform
The S60 Platform (formerly Series 60 User Interface) was a platform (computing), software platform for Mobile app, smartphones that runs on top of the Symbian operating system. It was created by Nokia based on the 'Pearl' user interface from S ...
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
An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software Interface (computing), interface, offering a service to other pieces of software. A document or standa ...
expert group that defines
Java ME
Java Platform, Micro Edition or Java ME is a computing platform for development and deployment of portable code for embedded and mobile devices (micro-controllers, sensors, gateways, mobile phones, personal digital assistants, TV set-top ...
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 (such as
Nokia 6280
Nokia Corporation (natively Nokia Oyj, referred to as Nokia) is a Finnish multinational telecommunications, information technology, and consumer electronics corporation, established in 1865. Nokia's main headquarters are in Espoo, Finland, i ...
).
Most
Sony Ericsson
Sony Mobile Communications Inc. ( ja, ソニーモバイルコミュニケーションズ株式会社) was a multinational telecommunications company founded on October 1, 2001, as a joint venture between Sony Group Corporation and Ericsson. I ...
phones beginning with K700 (by release date) support SVG Tiny 1.1. Phones beginning with
K750
The Sony Ericsson K750, introduced in June 2005, was a high-end mobile phone, the successor to the now discontinued Sony Ericsson K700, K700, and which was succeeded by the Sony Ericsson K800i, K800i in Q2 2006.
Before official release, K750 was ...
also support such features as opacity and gradients. Phones with Sony Ericsson Java Platform-8 have support for JSR 226.
Windows Phone
Windows Phone (WP) is a discontinued family of mobile operating systems developed by Microsoft for smartphones as the replacement successor to Windows Mobile and Zune. Windows Phone featured a new user interface derived from the Metro design la ...
has supported SVG since version 7.5.
SVG is also supported on various mobile devices from
Motorola
Motorola, Inc. () was an American Multinational corporation, multinational telecommunications company based in Schaumburg, Illinois, United States. After having lost $4.3 billion from 2007 to 2009, the company split into two independent p ...
,
Samsung
The Samsung Group (or simply Samsung) ( ko, 삼성 ) is a South Korean multinational manufacturing conglomerate headquartered in Samsung Town, Seoul, South Korea. It comprises numerous affiliated businesses, most of them united under the ...
Siemens mobile
Siemens Mobile was a German mobile phone manufacturer and a division of Siemens AG. Siemens sold Siemens Mobile to the Taiwan-based BenQ in 2005, subsequently becoming BenQ-Siemens and succeeded by Gigaset. The last Siemens-branded mobile phones, ...
/
BenQ-Siemens
BenQ Mobile GmbH & Co. OHG was the mobile communications subsidiary of Taiwanese BenQ Corporation, selling products under the BenQ-Siemens brand. The group, based in Munich, Germany, was formed out of BenQ's acquisition of the then struggl ...
. eSVG, an SVG rendering library mainly written for embedded devices, is available on some mobile platforms.
Application support
SVG images can be produced by the use of a
vector graphics editor
A vector graphics editor is a computer program that allows users to compose and edit vector graphics images interactively on a computer and save them in one of many popular vector graphics formats, such as EPS, PDF, WMF, SVG, or VML.
Vector ...
, such as
Inkscape
Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported.
Inkscape can render primitive vector shapes (e.g. rectang ...
,
Adobe Illustrator
Adobe Illustrator is a vector graphics editor and design program developed and marketed by Adobe Inc. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative Cloud (Adobe's shift to month ...
,
Adobe Flash Professional
Adobe Animate (formerly Adobe Flash Professional, Macromedia Flash, and FutureSplash Animator) is a multimedia authoring and computer animation program developed by Adobe Inc.
Animate is used to design vector graphics and animation for televi ...
, or
CorelDRAW
CorelDRAW is a vector graphics editor developed and marketed by Corel Corporation. It is also the name of the Corel graphics suite, which includes the bitmap-image editor Corel Photo-Paint as well as other graphics-related programs (see below). T ...
, and rendered to common
raster
Raster may refer to:
* Raster graphics, graphical techniques using arrays of pixel values
* Raster graphics editor, a computer program
* Raster scan, the pattern of image readout, transmission, storage, and reconstruction in television and compu ...
image formats such as PNG using the same software. Additionally, editors like
Inkscape
Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (SVG) format. Other formats can be imported and exported.
Inkscape can render primitive vector shapes (e.g. rectang ...
and Boxy SVG provide tools to trace raster images to
Bézier curve
A Bézier curve ( ) is a parametric curve used in computer graphics and related fields. A set of discrete "control points" defines a smooth, continuous curve by means of a formula. Usually the curve is intended to approximate a real-world shape t ...
s typically using
image tracing
In computer graphics, image tracing, raster-to-vector conversion or raster vectorization is the conversion of raster graphics into vector graphics.
Background
An image does not have any structure: it is just a collection of marks on paper, grain ...
back-ends like
potrace
Potrace is a cross-platform, open-source software which converts bitmapped images into vector graphics. It is written and maintained by Peter Selinger.
Properties
Various graphical frontends are available for the command-line application Potra ...
, autotrace, and imagetracerjs.
Software can be programmed to render SVG images by using a
library
A library is a collection of materials, books or media that are accessible for use and not just for display purposes. A library provides physical (hard copies) or digital access (soft copies) materials, and may be a physical location or a vir ...
such as
librsvg
librsvg is a free software SVG rendering library written as part of the GNOME project, intended to be lightweight and portable. The Linux command-line program rsvg-convert uses the library to turn SVG files into raster images.
Wikipedia and W ...
used by
GNOME
A gnome is a mythological creature and diminutive spirit in Renaissance magic and alchemy, first introduced by Paracelsus in the 16th century and later adopted by more recent authors including those of modern fantasy literature. Its characte ...
since 2000,
Batik
Batik is an Indonesian technique of wax-resist dyeing applied to the whole cloth. This technique originated from the island of Java, Indonesia. Batik is made either by drawing dots and lines of the resist with a spouted tool called a ''ca ...
or ThorVG since 2020 for the lightweight systems. SVG images can also be rendered to any desired popular image format by using
ImageMagick
ImageMagick, invoked from the command line as magick, is a free and open-source cross-platform software suite for displaying, creating, converting, modifying, and editing raster images. Created in 1987 by John Cristy, it can read and write ove ...
, a free command-line utility (which also uses librsvg under the hood).
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
A word is a basic element of language that carries an objective or practical meaning, can be used on its own, and is uninterruptible. Despite the fact that language speakers often have an intuitive grasp of what a word is, there is no consen ...
(e.g. with
LibreOffice
LibreOffice () is a free and open-source productivity software, office productivity software suite, a project of The Document Foundation (TDF). It was fork (software development), forked in 2010 from OpenOffice.org, an open-sourced version of t ...
) and
desktop publishing
Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online c ...
(e.g.
Scribus
Scribus () is free and open-source desktop publishing (DTP) software available for most desktop operating systems. It is designed for layout, typesetting, and preparation of files for professional-quality image-setting equipment. Scribus can a ...
gnuplot
gnuplot is a command-line and GUI program that can generate two- and three-dimensional plots of functions, data, and data fits. The program runs on all major computers and operating systems (Linux, Unix, Microsoft Windows, macOS, FreeDOS, an ...
), and importing paths (e.g. for use in
GIMP
GIMP ( ; GNU Image Manipulation Program) is a free and open-source raster graphics editor used for image manipulation (retouching) and image editing, free-form drawing, transcoding between different image file formats, and more specialized task ...
or
Blender
A blender (sometimes called a mixer or liquidiser in British English) is a kitchen appliance, kitchen and laboratory appliance used to mix, crush, purée or emulsion, emulsify food and other substances. A stationary blender consists of a blender ...
). The application services
Microsoft 365
Microsoft 365 is a product family of productivity software, collaboration and cloud-based services owned by Microsoft. It encompasses online services such as Outlook.com, OneDrive, Microsoft Teams, programs formerly marketed under the name Mic ...
and
Microsoft Office 2019
Microsoft Office 2019 (Second perpetual release of Office 16) is a version of Microsoft Office for both Windows and Mac. It replaces Office 2016 and was replaced by Office 2021 on October 5, 2021. It was unveiled on April 27, 2018 for Windows 1 ...
offer support for exporting, importing and editing SVG images. The
Uniform Type Identifier
A Uniform Type Identifier (UTI) is a text string used on software provided by Apple Inc. to uniquely identify a given class or type of item. Apple provides built-in UTIs to identify common system objects – document or image file types, folders a ...
for SVG used by Apple is public.svg-image and conforms to public.image and public.xml.
Security
It is common to see SVG described as an image format, but it is actually a document format, similar to HTML documents, and so can host script or CSS. The main security issues occur if SVG files are naively treated as image files because they can harbour malicious content. For instance, if they are deployed as a CSS background image, or a logo on some website, or in some image gallery then such content could be activated. At the very least, this could lock up the browser (the
Billion laughs attack
In computer security, a billion laughs attack is a type of denial-of-service attack, denial-of-service (DoS) attack which is aimed at parsers of XML documents.
It is also referred to as an XML bomb or as an exponential entity expansion attack.
D ...
cross-site scripting
Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may ...
attacks. The W3C therefore stipulate certain requirements when SVG is simply used for images: SVG Security.
However, 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.
See also
*
Canvas element
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.
While the HTML5 canvas off ...
*
Comparison of graphics file formats
This is a comparison of image file formats (graphics file formats). This comparison primarily features file formats for 2D images.
General
Ownership of the format and related information.
Technical details
See also
* List of codecs
Referen ...
*
Comparison of raster-to-vector conversion software
The following tables contain general and technical information about a number of raster-to-vector conversion software products. Please see the individual products' articles for further information.
General information
This table gives basic ...
*
Comparison of vector graphics editors
A number of vector graphics editors exist for various platforms. Potential users of these editors will make a comparison of vector graphics editors based on factors such as the availability for the user's platform, the software license, the feat ...
*
Computer graphics
Computer graphics deals with generating images with the aid of computers. Today, computer graphics is a core technology in digital photography, film, video games, cell phone and computer displays, and many specialized applications. A great de ...
*
Computer Graphics Metafile
Computer Graphics Metafile (CGM) is a free and open international standard file format for 2D vector graphics, raster graphics, and text, and is defined by ISO/IEC 8632.
Overview
All graphical elements can be specified in a textual source file t ...
*
Image file formats
An Image file format is a file format for a digital image. There are many formats that can be used, such as JPEG, PNG, and GIF. Most formats up until 2022 were for storing 2D images, not 3D ones. The data stored in an image file format may be c ...
*
Resolution independence
Resolution independence is where elements on a computer screen are rendered at sizes independent from the pixel grid, resulting in a graphical user interface that is displayed at a consistent physical size, regardless of the resolution of the scr ...