View source for SVG

{{short description|Open standard for two-dimensional vector graphics}}
{{other uses}}{{for|help about SVG images on Wikipedia|Wikipedia:SVG help|selfref=true}}
{{Infobox file format
| name                   = SVG
| icon                   = SVG Logo.svg
| icon_size              = 100px
| iconcaption            =
| screenshot             =
| caption                =
| _noextcode             = on
| extensions             = <code>.svg</code>, <code>.svgz</code>
| _nomimecode            = on
| mime                   = <code>image/svg+xml</code><ref>{{cite web |title=Media Type Registration for image/svg+xml |url=http://www.w3.org/TR/SVG/mimereg.html |publisher=[[World Wide Web Consortium|W3C]] |access-date=5 February 2014 |archive-date=19 February 2014 |archive-url=https://web.archive.org/web/20140219180154/http://www.w3.org/TR/SVG/mimereg.html |url-status=live }}</ref>{{ref RFC|3023|section=8.19}}
| type_code              = <!-- {{hlist |"svg" |"svgz"}} -->
| uniform_type           = <code>public.svg-image</code>
| conforms_to            = <!--<code>public.image</code><br /><code>public.xml</code>-->
| magic                  =
| developer              = [[World Wide Web Consortium|W3C]]
| released               = {{start date and age|df=yes|paren=yes|2001|09|04}}
| latest_release_version = 1.1 (Second Edition)
| latest_release_date    = {{start date and age|2011|08|16|df=yes}}
| genre                  = [[Vector graphics]]
| container_for          =
| contained_by           =
| extended_from          = [[XML]]
| extended_to            =
| standard               = {{URL|https://www.w3.org/TR/SVG/|W3C SVG}}
| open                   = Yes
| url                    = {{URL|https://www.w3.org/Graphics/SVG/}}
}}
'''Scalable Vector Graphics''' ('''SVG''') is an [[XML]]-based [[Vector graphics|vector image format]] for defining [[Plane (mathematics)|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 [[Scale (ratio)|scaled]] in size without loss of quality, and SVG files can be [[search algorithm|searched]], [[subject indexing|indexed]], [[scripting language|scripted]], and [[data compression|compressed]]. The XML text files can be created and edited with [[text editor]]s or [[vector graphics editor]]s, and are rendered by most [[web browser]]s. If used for images, SVG can host scripts or CSS, potentially leading to cross-site scripting attacks or other security vulnerabilities.
== History ==
SVG has been in development within the [[World Wide Web Consortium]] (W3C) since 1999 after six competing proposals for vector graphics languages had been submitted to the consortium during 1998 (see below).<ref name="secretOrigin" />
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.<ref name="secretOrigin">{{cite web |url=http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG |title=Secret Origin of SVG |date=21 December 2007 |publisher=[[World Wide Web Consortium]] |access-date=1 January 2011 |archive-date=24 December 2020 |archive-url=https://web.archive.org/web/20201224201644/https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG |url-status=live }}</ref>
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 [[Council for the Central Laboratory of the Research Councils|CCLRC]]<ref>{{Cite web |url=https://www.w3.org/TR/1998/NOTE-WebSchematics-19980331/Overview.html |title=Schematic Graphics |website=W3C |access-date=19 July 2019 |archive-date=31 January 2022 |archive-url=https://web.archive.org/web/20220131092629/https://www.w3.org/TR/1998/NOTE-WebSchematics-19980331/Overview.html |url-status=live }}</ref>
* [[PGML]], from [[Adobe Systems]], [[IBM]], [[Netscape]] and [[Sun Microsystems]]<ref>{{cite web |url=http://www.w3.org/TR/1998/NOTE-PGML-19980410 |title=Precision Graphics Markup Language (PGML) |last=Al-Shamma |first=Nabeel |author2=Robert Ayers |author3=Richard Cohn |author4=Jon Ferraiolo |author5=Martin Newell |author6=Roger K. de Bry |author7=Kevin McCluskey |author8=Jerry Evans |date=10 April 1998 |publisher=[[W3C]] |access-date=2009-05-08 |archive-date=16 December 2021 |archive-url=https://web.archive.org/web/20211216103314/http://www.w3.org/TR/1998/NOTE-PGML-19980410 |url-status=live }}</ref>
* [[Vector Markup Language|VML]], by [[Autodesk]], [[Hewlett-Packard]], [[Macromedia]], [[Microsoft]], and [[Vision Corporation|Vision]]<ref>{{cite web |url=http://www.w3.org/TR/1998/NOTE-VML-19980513 |title=Vector Markup Language (VML) |last=Mathews |first=Brian |author2=Brian Dister |author3=John Bowler |author4=Howard Cooper stein |author5=Ajay Jindal |author6=Tuan Nguyen |author7=Peter Wu |author8=Troy Sandal |date=13 May 1998 |publisher=[[W3C]] |access-date=2009-05-08 |archive-date=6 November 2021 |archive-url=https://web.archive.org/web/20211106095422/http://www.w3.org/TR/1998/NOTE-VML-19980513 |url-status=live }}</ref>
* Hyper Graphics Markup Language (HGML), by [[Orange UK]] and [[University of Plymouth|PRP]]<ref>{{Cite web |url=https://www.w3.org/TR/NOTE-HGML.html |title=Hyper Graphics Markup Language (HGML) |website=W3C |access-date=19 July 2019 |archive-date=7 April 2022 |archive-url=https://web.archive.org/web/20220407205727/https://www.w3.org/TR/NOTE-HGML.html |url-status=live }}</ref>
* [[Computer Graphics Metafile|WebCGM]], from [[Boeing]], [[PTC (software company)|PTC]], InterCAP Graphics Systems, [[Stellent|Inso Corporation]], [[Council for the Central Laboratory of the Research Councils|CCLRC]], and [[Xerox]]<ref>{{Cite web |url=http://xml.coverpages.org/NOTE-WebCGM-19981104.html |title=WebCGM Profile |website=xml.coverpages.org |access-date=4 March 2019 |archive-date=14 August 2022 |archive-url=https://web.archive.org/web/20220814185152/http://xml.coverpages.org/NOTE-WebCGM-19981104.html |url-status=live }}</ref>
* DrawML, from Excosoft AB<ref name="secretOrigin"/>
The working group was chaired at the time by [[Chris Lilley (W3C)|Chris Lilley]] of the W3C.
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 [[World Wide Web Consortium#Specification maturation|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.<ref>{{cite web |title=Scalable Vector Graphics (SVG) 2 |url=https://www.w3.org/TR/SVG2/ |publisher=W3C |access-date=28 January 2017 |archive-date=27 January 2017 |archive-url=https://web.archive.org/web/20170127080912/http://www.w3.org/TR/SVG2/ |url-status=live }}</ref>
=== Version 1.x ===
* SVG 1.0 became a [[W3C Recommendation]] on 4 September 2001.<ref>{{cite web |url=http://www.w3.org/TR/SVG10/ |title=Scalable Vector Graphics (SVG) 1.0 Specification |last=Ferraiolo |first=Jon |date=4 September 2001 |publisher=World Wide Web Consortium |access-date=24 February 2010 |archive-date=11 May 2008 |archive-url=https://web.archive.org/web/20080511173619/http://www.w3.org/TR/SVG10/ |url-status=live }}</ref>
* SVG 1.1 became a W3C Recommendation on 14 January 2003.<ref name="svg11">{{cite web |url=http://www.w3.org/TR/SVG11/ |title=Scalable Vector Graphics (SVG) 1.1 Specification |last=Ferraiolo |first=Jon |date=16 August 2011 |publisher=World Wide Web Consortium |access-date=14 April 2016 |archive-date=16 September 2012 |archive-url=https://web.archive.org/web/20120916044214/http://www.w3.org/TR/SVG11/ |url-status=live }}</ref> 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]] (the Mobile SVG Profiles) became W3C Recommendations on 14 January 2003. These are described as profiles of SVG 1.1.<ref>{{cite web |url=http://www.w3.org/TR/2003/REC-SVGMobile-20030114/ |title=Mobile SVG Profiles: SVG Tiny and SVG Basic |publisher=World Wide Web Consortium |last=Capin |first=Tolga |date=15 June 2009 |access-date=24 October 2010 |archive-date=9 October 2010 |archive-url=https://web.archive.org/web/20101009122051/http://www.w3.org/TR/2003/REC-SVGMobile-20030114/ |url-status=live }}</ref>
* SVG Tiny 1.2 became a W3C Recommendation on 22 December 2008.<ref>{{cite web |url=http://www.w3.org/TR/SVGTiny12/ |title=Scalable Vector Graphics (SVG) Tiny 1.2 Specification |publisher=World Wide Web Consortium |date=22 December 2008 |first=Ola |last=Andersson |access-date=24 February 2010 |archive-date=7 December 2020 |archive-url=https://web.archive.org/web/20201207093148/https://www.w3.org/TR/SVGTiny12/ |url-status=live }}</ref> It was initially drafted as a profile of the planned SVG Full 1.2 (which has since been dropped in favor of SVG 2),<ref name="ieblog">{{cite web |url=https://blogs.msdn.microsoft.com/ie/2010/06/08/getting-to-svg-2-0-a-report-from-the-svg-working-group-face-to-face-may-24th-june-1st-2010/ |title=Getting to SVG 2.0: A report from the SVG Working Group Face-to-Face (May 24th – June 1st 2010) |last=Dengler |first=Patrick |date=8 July 2010 |work=[[Microsoft Developer Network]] |publisher=[[Microsoft]] |access-date=26 August 2010 |archive-date=12 May 2016 |archive-url=https://web.archive.org/web/20160512161807/https://blogs.msdn.microsoft.com/ie/2010/06/08/getting-to-svg-2-0-a-report-from-the-svg-working-group-face-to-face-may-24th-june-1st-2010/ |url-status=live }}</ref> 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.<ref name="SVG1.1-2E">{{cite web |url=http://www.w3.org/TR/2011/REC-SVG11-20110816/ |title=Scalable Vector Graphics (SVG) 1.1 (Second Edition) |publisher=W3C |access-date=29 August 2011 |archive-date=24 September 2011 |archive-url=https://web.archive.org/web/20110924162435/http://www.w3.org/TR/2011/REC-SVG11-20110816/ |url-status=live }}</ref>
* 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.<ref>{{cite journal |title=SVG Tiny Portable/Secure |url=https://tools.ietf.org/html/draft-svg-tiny-ps-abrotman-00.html |newspaper=Ietf Datatracker |access-date=9 February 2021 |last1=Brotman |first1=Alex |last2=Adams |first2=J. Trent |archive-date=14 February 2021 |archive-url=https://web.archive.org/web/20210214140805/https://tools.ietf.org/html/draft-svg-tiny-ps-abrotman-00.html |url-status=live }}</ref> Also known as SVG Tiny P/S. SVG Tiny 1.2 Portable/Secure is a requirement of the [[Brand Indicators for Message Identification|BIMI]] draft standard.<ref>{{cite news |title=Implementation Guide |url=https://bimigroup.org/implementation-guide/ |website=BIMI Group |access-date=9 February 2021 |archive-date=28 February 2021 |archive-url=https://web.archive.org/web/20210228000226/https://bimigroup.org/implementation-guide/ |url-status=live }}</ref>
=== Version 2 ===
SVG 2 removes or deprecates some features of SVG 1.1 and incorporates new features from [[HTML5]] and [[Web Open Font Format]]:<ref name=diff/>
* For example, SVG 2 removes several font elements such as <code>glyph</code> and <code>altGlyph</code> (replaced by the WOFF font format).
* The <code>xml:space</code> attribute is deprecated in favor of CSS.
* HTML5 features such as <code>translate</code> and <code>data-*</code> attributes have been added.
* Text handling features from SVG Tiny 1.2 are annotated as to be included, but not yet formalized in text.<ref>{{cite web |url=https://svgwg.org/svg2-draft/text.html |title=Chapter 11: Text |date=2020-05-26 |publisher=World Wide Web Consortium |access-date=31 December 2020 |archive-date=21 April 2021 |archive-url=https://web.archive.org/web/20210421072120/https://svgwg.org/svg2-draft/text.html |url-status=live }}</ref> Some other 1.2 features are cherry picked in,<ref name=diff>{{cite web |url=https://svgwg.org/svg2-draft/changes.html |title=Appendix K: Changes from SVG 1.1 |date=2020-05-26 |publisher=World Wide Web Consortium |access-date=31 December 2020 |archive-date=4 February 2021 |archive-url=https://web.archive.org/web/20210204140232/https://svgwg.org/svg2-draft/changes.html |url-status=live }}</ref> 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,<ref>{{cite web |url=https://www.w3.org/TR/2016/CR-SVG2-20160915/ |title=Scalable Vector Graphics (SVG) 2 |date=2016-09-15 |publisher=World Wide Web Consortium |access-date=2021-08-17 |archive-date=9 September 2021 |archive-url=https://web.archive.org/web/20210909075553/https://www.w3.org/TR/2016/CR-SVG2-20160915/ |url-status=live }}</ref> and revised versions were published on 7 August 2018 and 4 October 2018.<ref>{{cite web |url=https://www.w3.org/TR/2018/CR-SVG2-20181004/ |title=Scalable Vector Graphics (SVG) 2 |date=2018-10-04 |publisher=World Wide Web Consortium |access-date=2021-08-17 |archive-date=19 July 2021 |archive-url=https://web.archive.org/web/20210719223202/https://www.w3.org/TR/2018/CR-SVG2-20181004/ |url-status=live }}</ref> The latest draft was released on 08 March 2023.<ref>{{cite web |url=https://svgwg.org/svg2-draft/ |title=Scalable Vector Graphics (SVG) 2 |date=2023-03-08 |publisher=World Wide Web Consortium |access-date=2024-01-07 |archive-date=10 February 2021 |archive-url=https://web.archive.org/web/20210210184527/https://svgwg.org/svg2-draft/ |url-status=live }}</ref>
== Features ==
[[File:Bitmap VS SVG.svg|thumb|This image illustrates the difference between bitmap and vector images. The bitmap image is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In the picture, [[image scaling|scaling]] the bitmap reveals the pixels while scaling the vector image preserves the shapes.]]
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 (such as paths consisting of straight lines and curves), [[bitmap]] images, and text. Graphical objects can be grouped, styled, transformed and composited into previously [[rendering (computer graphics)|rendered]] objects. The feature set includes nested [[transformation (geometry)|transformations]], [[clipping path]]s, [[alpha compositing|alpha masks]], [[SVG filter effect|filter effects]] and template objects. SVG drawings can be [[Interactivity|interactive]] and can include [[animation]], defined in the SVG XML elements or via [[Scripting language|scripting]] that accesses the SVG [[Document Object Model]] (DOM).
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#Web accessibility|accessibility]] of SVG graphics.<ref name="SVG1.1-2E"/>
=== 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 [[Cascading Style Sheets|CSS]] for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page.<ref>{{cite web |url=http://www.svgopen.org/2002/papers/danilo_fujisawa__svg_as_page_description_language/index.html |title=SVG as a Page Description Language |last1=Alex |first1=Danilo |first2=Jun |last2=Fujisawa |year=2002 |publisher=svgopen.org |access-date=24 February 2010 |archive-date=29 May 2010 |archive-url=https://web.archive.org/web/20100529185137/http://www.svgopen.org/2002/papers/danilo_fujisawa__svg_as_page_description_language/index.html |url-status=live }}</ref>
=== Scripting and animation ===
{{Main|SVG animation}}
SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in [[Synchronized Multimedia Integration Language|SMIL]], or can be programmed in a [[scripting language]] (e.g. [[JavaScript]]). The W3C explicitly recommends SMIL as the standard for animation in SVG.<ref>{{cite web |url=http://news.cnet.com/2100-1023-979976.html |title=W3C releases scripting standard, caveat |last=Paul |first=Festa |date=9 January 2003 |publisher=[[CNET Networks|CNet]] |access-date=24 February 2010 |archive-date=17 May 2011 |archive-url=https://web.archive.org/web/20110517151500/http://news.cnet.com/2100-1023-979976.html |url-status=live }}</ref>
A rich set of [[event handler]]s 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'' (SVGT) and ''SVG Basic'' (SVGB).
These are subsets of the full SVG standard, mainly intended for [[user agent]]s with limited capabilities. In particular, SVG Tiny was defined for highly restricted mobile devices such as [[cellphone]]s; it does not support styling or scripting.<ref name="tiny1.x">{{cite web |title=SVG Tiny 1.2 |url=http://www.w3.org/TR/SVGTiny12/intro.html#SVGTiny12 |work=Scalable Vector Graphics (SVG) Tiny 1.2 Specification |publisher=[[World Wide Web Consortium|W3C]] |date=2008-12-22 |access-date=2014-03-05 |archive-date=30 January 2014 |archive-url=https://web.archive.org/web/20140130110734/http://www.w3.org/TR/SVGTiny12/intro.html#SVGTiny12 |url-status=live }}</ref> SVG Basic was defined for higher-level mobile devices, such as [[smartphone]]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]] (MMS) and Packet-switched Streaming Service.<ref>{{cite web |url=http://www.svgopen.org/2003/paperAbstracts/svgmms.htm |title=SVG in 3GPP Multimedia Messaging and Streaming Services (version March 2003) |publisher=SVG Open |year=2003 |access-date=19 October 2009 |archive-date=26 June 2009 |archive-url=https://web.archive.org/web/20090626135254/http://www.svgopen.org/2003/paperAbstracts/svgmms.htm |url-status=live }}</ref><ref>{{cite web |url=https://www.3gpp.org/ftp/Specs/archive/26_series/26.140/26140-520.zip |title=3GPP Multimedia Messaging Service (MMS); Media formats and codecs (Release 5); 3GPP TS 26.140 V5.2.0 (2002-12); Technical Specification |date=2 January 2003 |format=[[ZIP (file format)|zipped]] doc |publisher=[[3GPP]] |access-date=25 February 2010 |df=dmy-all |archive-date=8 February 2007 |archive-url=https://web.archive.org/web/20070208102602/http://www.3gpp.org/ftp/Specs/archive/26_series/26.140/26140-520.zip |url-status=live }}</ref><ref>{{cite web |url=https://www.3gpp.org/ftp/Specs/archive/26_series/26.234/26234-540.zip |title=3rd Generation Partnership Project; Technical Specification Group Services and System Aspects; Multimedia Messaging Service (MMS); Media formats and codecs (Release 5) |work=3GPP TS 26.140 V5.2.0 (2002-12) |date=March 2003 |publisher=[[3GPP]] |format=[[ZIP (file format)|zipped]] doc |access-date=24 February 2010 |df=dmy-all |archive-date=12 February 2007 |archive-url=https://web.archive.org/web/20070212231732/http://www.3gpp.org/ftp/Specs/archive/26_series/26.234/26234-540.zip |url-status=live }}</ref> It was later{{When|date=October 2017}} added as required format for vector graphics in 3GPP [[IP Multimedia Subsystem]] (IMS).<ref>{{cite web |url=http://www.3gpp.org/ftp/Specs/html-info/26141.htm |title=3GPP Specification detail - 3GPP TS 26.141: IP Multimedia System (IMS) Messaging and Presence; Media formats and codecs |date=10 December 2009 |publisher=[[3GPP]] |access-date=24 February 2010 |archive-date=7 October 2008 |archive-url=https://web.archive.org/web/20081007213730/http://www.3gpp.org/ftp/Specs/html-info/26141.htm |url-status=live }}</ref><ref>{{cite web |url=https://www.intelegain.com/ |title=Building Interactive Websites using Scalable Vector Graphics (SVG) – [With Examples] |publisher=intelegain.com |access-date=21 November 2018 |archive-url=https://web.archive.org/web/20181129134308/https://www.intelegain.com/ |archive-date=29 November 2018 |url-status=bot: unknown }}</ref>
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.<ref>{{cite web |url=http://svg.org/special/svg_phones |title=Listing of phones that support SVG |publisher=Svg.org |access-date=24 October 2010 |archive-url=http://webarchive.loc.gov/all/20100108141222/http://www.svg.org/special/svg_phones |archive-date=8 January 2010}}</ref>
SVGT 1.2 adds a microDOM (μDOM), styling and scripting.<ref name="tiny1.x" /> 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 [[Data compression#Lossless|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 <code>.svgz</code> filename extension. Conforming SVG 1.1 viewers will display compressed images.<ref>See {{URL|http://www.w3.org/TR/SVG11/conform.html#ConformingSVGViewers}} which states, "SVG implementations must correctly support gzip-encoded [{{IETF RFC|1952}}] and deflate-encoded [{{IETF RFC|1951}}] data streams, for any content type (including SVG, script files, images)."</ref> An SVGZ file is typically 20 to 50 percent of the original size.<ref>{{cite web |date=14 July 2009 |title=Saving compressed SVG (SVGZ) |url=https://www.adobe.com/svg/illustrator/compressedsvg.html |archive-url=https://web.archive.org/web/20100601125817/https://www.adobe.com/svg/illustrator/compressedsvg.html |archive-date=1 June 2010 |access-date=24 February 2010 |work=SVG Zone |publisher=[[Adobe Systems]]}}</ref> W3C provides SVGZ files to test for conformance.<ref>For example, {{URL|http://dev.w3.org/SVG/profiles/1.1F2/test/harness/htmlObject/conform-viewers-01-t.html}}</ref>
== Design ==
The SVG 1.1 specification defines 14 functional areas or feature sets:<ref name="svg11" />
;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]]. Paths have a compact coding.
:For example, <dfn><code>M</code></dfn> (for "move to") precedes initial numeric <var>x</var> and <var>y</var> [[Cartesian coordinate system|coordinates]], and <dfn><code>L</code></dfn> (for "line to") precedes a point to which a line should be drawn. Further command letters (<code>C</code>, <code>S</code>, <code>Q</code>, <code>T</code>, and <code>A</code>) precede data that is used to draw various [[Bézier curve|Bézier]] and [[Ellipse|elliptical]] curves. <code>Z</code> 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.<ref name="path">{{cite web |url=http://www.w3.org/TR/SVG11/paths.html |title=SVG specification, "Paths" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=21 June 2012 |archive-url=https://web.archive.org/web/20120621180208/http://www.w3.org/TR/SVG11/paths.html |url-status=live }}</ref>
;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.<ref name="shap">{{cite web |url=http://www.w3.org/TR/SVG11/shapes.html |title=SVG specification, "Basic Shapes" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=2 October 2009 |archive-url=https://web.archive.org/web/20091002090639/http://www.w3.org/TR/SVG11/shapes.html |url-status=live }}</ref>
;Text
:Unicode character text included in an SVG file is expressed as [[XML]] 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]]).<ref name="text">{{cite web |url=http://www.w3.org/TR/SVG11/text.html |title=SVG specification, "Text" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=6 October 2009 |archive-url=https://web.archive.org/web/20091006232436/http://www.w3.org/TR/SVG11/text.html |url-status=live }}</ref>
;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.<ref name="pntg">{{cite web |url=http://www.w3.org/TR/SVG11/painting.html |title=SVG specification, "Painting: Filling, Stroking and Marker Symbols" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=17 September 2009 |archive-url=https://web.archive.org/web/20090917005550/http://www.w3.org/TR/SVG11/painting.html |url-status=live }}</ref>
;Color
:Colors can be applied to all visible SVG elements, either directly or via <code>fill</code>, <code>stroke</code>, and other properties. Colors are specified in the same way as in [[Cascading Style Sheets|CSS2]], i.e. using names like <code>black</code> or <code>blue</code>, in [[hexadecimal]] such as <code>#2f0</code> or <code>#22ff00</code>, in decimal like <code>rgb(255,255,127)</code>, or as percentages of the form <code>rgb(100%,100%,50%)</code>.<ref name="colr">{{cite web |url=http://www.w3.org/TR/SVG11/color.html |title=SVG specification, "Color" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=7 September 2009 |archive-url=https://web.archive.org/web/20090907075028/http://www.w3.org/TR/SVG11/color.html |url-status=live }}</ref>
;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 <code>x</code> and <code>y</code> directions. Gradients and patterns can be animated and scripted.<ref name="patt">{{cite web |url=http://www.w3.org/TR/SVG11/pservers.html |title=SVG specification, "Gradients and Patterns" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=21 September 2009 |archive-url=https://web.archive.org/web/20090921131039/http://www.w3.org/TR/SVG11/pservers.html |url-status=live }}</ref>
:Since 2008, there has been discussion<ref>{{cite web |url=http://www.w3.org/2008/11/17-svg-irc |title=IRC log of svg on 2008-11-17 |quote=DS: Priorities should be layout, diffusion curves, 2.5D and make sure we work well with CSS on that |publisher=W3C |year=2008 |access-date=25 May 2009 |archive-date=10 October 2016 |archive-url=https://web.archive.org/web/20161010221754/http://www.w3.org/2008/11/17-svg-irc |url-status=live }}</ref><ref>{{cite web |url=http://lists.w3.org/Archives/Public/www-svg/2009Mar/0084.html |title=Propositions for the next SVG spec |quote=Indeed, we do plan to add new gradient capabilities to SVG in the next version, and we are looking into diffusion curves, which I think will meet your needs ... *Diffusion curves* seems really a great idea. |publisher=W3C |date=16 March 2009 |access-date=25 May 2009 |archive-date=14 May 2011 |archive-url=https://web.archive.org/web/20110514142427/http://lists.w3.org/Archives/Public/www-svg/2009Mar/0084.html |url-status=live }}</ref> among professional users of SVG that either [[Image gradient|gradient]] [[Color gradient#gradient mesh|meshes]] or preferably [[diffusion curve]]s could usefully be added to the SVG specification. It is said that a "simple representation [using diffusion curves] is capable of representing even very subtle shading effects"<ref>{{cite web |url=http://www.svgopen.org/2008/papers/104-SVG_in_KDE/ |title=SVG in KDE: Freedom of Beauty |last=Rusin |first=Zack |publisher=SVG Open |year=2008 |access-date=25 May 2009 |archive-date=22 July 2009 |archive-url=https://web.archive.org/web/20090722104615/http://www.svgopen.org/2008/papers/104-SVG_in_KDE/ |url-status=live }}</ref> 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."<ref>{{cite journal |title=Diffusion Curves: A Vector Representation for Smooth-Shaded Images |url=http://artis.imag.fr/Publications/2008/OBWBTS08/diffusion_curves.pdf |last1=Orzan |first1=Alexandrina |last2=Bousseau |first2=Adrien |last3=Winnemöller |first3=Holger |last4=Barla |first4=Pascal |last5=Thollot |first5=Joëlle |last6=Salesin |first6=David |journal=ACM Transactions on Graphics |volume=27 |year=2008 |doi=10.1145/1360612.1360691 |access-date=25 May 2009 |archive-date=18 June 2009 |archive-url=https://web.archive.org/web/20090618135148/http://artis.imag.fr/Publications/2008/OBWBTS08/diffusion_curves.pdf |url-status=live }}</ref> The current draft of SVG 2 includes gradient meshes.<ref>{{Cite web |url=https://svgwg.org/svg2-draft/pservers.html#MeshGradients |title=Scalable Vector Graphics (SVG) 2, W3C Editor's Draft 13 June 2013 |publisher=SVG WG |year=2013 |access-date=17 September 2013 |archive-date=4 December 2013 |archive-url=https://web.archive.org/web/20131204080742/https://svgwg.org/svg2-draft/pservers.html#MeshGradients |url-status=live }}</ref>
;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 compositing|alpha]] blending.<ref name="mask">{{cite web |url=http://www.w3.org/TR/SVG11/masking.html |title=SVG specification, "Clipping, Masking and Compositing" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=1 December 2009 |archive-url=https://web.archive.org/web/20091201051847/http://www.w3.org/TR/SVG11/masking.html |url-status=live }}</ref>
;Filter effects<ref name="filt">{{cite web |url=http://www.w3.org/TR/SVG11/filters.html |title=SVG specification, "Filter Effects" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=28 August 2006 |archive-url=https://web.archive.org/web/20060828082930/http://www.w3.org/TR/SVG11/filters.html |url-status=live }}</ref>
:{{Main|SVG 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]] 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 [[event (computing)|events]] such as changes in [[focus (computing)|focus]], 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.<ref name="intr">{{cite web |url=http://www.w3.org/TR/SVG11/interact.html |title=SVG specification, "Interactivity" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=5 July 2019 |archive-url=https://web.archive.org/web/20190705134714/http://www.w3.org/TR/SVG11/interact.html |url-status=live }}</ref>
;Linking
:SVG images can contain hyperlinks to other documents, using [[XLink]]. Through the use of the <code><nowiki><view></nowiki></code> element or a [[fragment identifier]], [[URL]]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 [[Sprite (computer graphics)|sprites]]. [[XLink]] support in combination with the <code><nowiki><use></nowiki></code> 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.<ref name="link">{{cite web |url=http://www.w3.org/TR/SVG11/linking.html |title=SVG specification, "Linking" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=25 June 2019 |archive-url=https://web.archive.org/web/20190625090707/http://www.w3.org/TR/SVG11/linking.html |url-status=live }}</ref>
;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]] and there are defined [[Document Object Model]] (DOM) objects for every SVG element and attribute. Scripts are enclosed in <code>&lt;script&gt;</code> elements. They can run in response to pointer events, keyboard events and document events as required.<ref name="scrp">{{cite web |url=http://www.w3.org/TR/SVG11/script.html |title=SVG specification, "Scripting" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=1 October 2009 |archive-url=https://web.archive.org/web/20091001032605/http://www.w3.org/TR/SVG11/script.html |url-status=live }}</ref>
;Animation
:{{Main|SVG animation}}
: SVG content can be animated using the built-in animation elements such as <code>&lt;animate&gt;</code>, <code>&lt;animateMotion&gt;</code> and <code>&lt;animateColor&gt;</code>. 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]] (SMIL). Animations can be continuous, they can loop and repeat, and they can respond to user events, as mentioned above.<ref name="anim">{{cite web |url=http://www.w3.org/TR/SVG11/animate.html |title=SVG specification, "Animation" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=27 August 2006 |archive-url=https://web.archive.org/web/20060827230920/http://www.w3.org/TR/SVG11/animate.html |url-status=live }}</ref>
;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]]s are defined in SVG as a font that is then referenced from the <code>&lt;text&gt;</code> element.<ref name="font">{{cite web |url=http://www.w3.org/TR/SVG11/fonts.html |title=SVG specification, "Fonts" |publisher=World Wide Web Consortium |date=14 January 2003 |access-date=19 October 2009 |archive-date=26 September 2009 |archive-url=https://web.archive.org/web/20090926061922/http://www.w3.org/TR/SVG11/fonts.html |url-status=live }}</ref>
;Metadata
:In accord with the [[W3C]]'s [[Semantic Web]] initiative, SVG allows authors to provide [[metadata]] about SVG content. The main facility is the <code>&lt;metadata&gt;</code> element, where the document can be described using [[Dublin Core]] metadata properties (e.g. title, creator/author, subject, description, etc.). Other metadata schemas may also be used. In addition, SVG defines <code>&lt;title&gt;</code> and <code>&lt;desc&gt;</code> 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.<ref name="meta">{{cite web |url=http://www.w3.org/TR/SVG11/metadata.html |title=SVG specification, "Metadata" |publisher=World Wide Web Consortium |access-date=19 October 2009 |archive-date=3 May 2009 |archive-url=https://web.archive.org/web/20090503082252/http://www.w3.org/TR/SVG11/metadata.html |url-status=live }}</ref>
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.
[[File:SVG example markup grid.svg]]
<!--
***********************************
READ THIS: Please do not edit the SVG markup below! The SVG image included in the article is a static image which will not be updated if this code is modified. Please use https://en.wikipedia.org/wiki/Wikipedia:Sandbox for any test edits you wish to make.
***********************************
-->
This code will produce the colored shapes shown in the image, excluding the grid and labels:
<syntaxhighlight lang="xml"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg></syntaxhighlight>
== Implementation ==
The use of SVG on the web was limited by the lack of support in older versions of [[Internet Explorer]] (IE). Many websites that serve SVG images also provide the images in a [[Raster graphics|raster format]], either automatically by [[HTTP]] [[content negotiation]] or by allowing the user directly to choose the file.
=== Web browsers ===
[[Konqueror]] was the first browser to support SVG in release version 3.2 in February 2004.<ref>{{Cite web |url=http://dot.kde.org/2003/09/16/kde-conquers-vectors-ksvg |title=KDE Conquers the Vectors with KSVG |last=Streichardt |first=Andreas |date=16 September 2003 |work=KDE News |access-date=11 February 2012 |archive-date=30 June 2023 |archive-url=https://web.archive.org/web/20230630145144/https://dot.kde.org/2003/09/16/kde-conquers-vectors-ksvg |url-status=live }}</ref> 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<ref>{{Cite web |url=https://bugzilla.mozilla.org/show_bug.cgi?id=276431 |title=Bug 276431 - external SVG not loaded from img tag |publisher=Mozilla |access-date=9 November 2011 |archive-date=24 October 2012 |archive-url=https://web.archive.org/web/20121024142532/https://bugzilla.mozilla.org/show_bug.cgi?id=276431 |url-status=live }}{{inconsistent cite|date=February 2023}}</ref>), as well as a few other, now outdated, web browsers capable of displaying SVG graphics, needed them embedded in <code>&lt;object&gt;</code> or <code>&lt;iframe&gt;</code> [[HTML element|elements]] to display them integrated as parts of an HTML webpage instead of using the standard way of integrating images with <code>&lt;img&gt;</code>.<ref>{{cite web |url=http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/75f14ac7244b0fa5/a6ccf7261c5110b7?lnk=raot |title=SVG image not shown by Firefox |work=mozilla.dev.tech.svg |publisher=[[Google Groups]] |date=25 February 2009 |access-date=25 February 2010 |author=Lusotec |archive-date=14 May 2011 |archive-url=https://web.archive.org/web/20110514102136/http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/75f14ac7244b0fa5/a6ccf7261c5110b7?lnk=raot |url-status=live }}</ref> However, SVG images may be included in XHTML pages using [[XML namespace]]s.<ref>{{cite web |url=https://developer.mozilla.org/en/SVG_In_HTML_Introduction |title=SVG In HTML Introduction |publisher=[[Mozilla]] |date=25 August 2008 |work=Mozilla Developer Center |author=Brettz9 |access-date=25 February 2010 |archive-date=5 December 2008 |archive-url=https://web.archive.org/web/20081205022530/https://developer.mozilla.org/en/SVG_In_HTML_Introduction |url-status=dead}}</ref>
[[Tim Berners-Lee]], the inventor of the [[World Wide Web]], was critical of early versions of Internet Explorer for its failure to support SVG.<ref>{{cite news |url=https://www.nbcnews.com/id/wbna26646919 |title=Creator of Web spots a flaw in Internet Explorer |agency=Associated Press |date=10 September 2008 |first=Peter |last=Svensson |access-date=25 February 2010 |publisher=[[NBC News]] |archive-date=9 November 2013 |archive-url=https://web.archive.org/web/20131109083320/http://www.nbcnews.com/id/26646919/ |url-status=live }}</ref>
* [[Opera (web browser)|Opera]] (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 (software)|Gecko]] [[Browser engine|layout engine]] (such as [[Firefox]], [[Flock (web browser)|Flock]], [[Camino (web browser)|Camino]], and [[SeaMonkey]]) 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<ref>{{cite web |url=https://developer.mozilla.org/en/docs/SVG_in_Firefox |title=SVG in Firefox |work=Mozilla Developer Center |publisher=[[Mozilla]] |date=23 October 2009 |access-date=25 February 2010 |archive-date=23 June 2008 |archive-url=https://web.archive.org/web/20080623225744/http://developer.mozilla.org/en/docs/SVG_in_Firefox |url-status=dead }}</ref> and of the modules which are <!-- This phrase is confusing. Does it mean what modules are in development or or which are not implemented at all? -->in development.<ref>{{cite web |url=https://www.mozilla.org/projects/svg/status.html |title=Mozilla SVG Status |publisher=[[Mozilla]] |access-date=25 February 2010 |archive-date=5 March 2010 |archive-url=https://web.archive.org/web/20100305220410/http://www.mozilla.org/projects/svg/status.html |url-status=live }}</ref> Gecko 1.9, included in [[Mozilla Firefox 3|Firefox 3.0]], adds support for more of the SVG specification (including filters).<ref>{{cite web |url=https://developer.mozilla.org/en/docs/SVG_improvements_in_Firefox_3 |title=SVG improvements in Firefox 3 |publisher=[[Mozilla]] |work=Mozilla Developer Center |date=15 January 2008 |author=Mgjbot |access-date=25 February 2010 |archive-date=9 February 2014 |archive-url=https://web.archive.org/web/20140209072611/https://developer.mozilla.org/en/docs/SVG_improvements_in_Firefox_3 |url-status=live }}</ref>
* [[Pale Moon (web browser)|Pale Moon]], which uses the [[Goanna (software)|Goanna]] layout engine (a fork of the [[Gecko (software)|Gecko]] engine), supports SVG.
* Browsers based on [[WebKit]] (such as [[Apple Inc.|Apple]]'s [[Safari (web browser)|Safari]], [[Google Chrome]], and [[The Omni Group]]'s [[OmniWeb]]) have had incomplete support for the SVG 1.1 Full specification since 2006.<ref>{{cite web |url=http://webkit.org/projects/svg/status.xml |title=WebKit SVG Status |publisher=[[WebKit]] |date=5 January 2010 |access-date=25 February 2010 |archive-date=10 February 2010 |archive-url=https://web.archive.org/web/20100210024246/http://webkit.org/projects/svg/status.xml |url-status=live }}</ref>
* [[Amaya (web browser)|Amaya]] has partial SVG support.
* [[Internet Explorer 8]] and older versions do not support SVG.<ref>{{cite web |url=http://www.microsoft.com/windowsxp/expertzone/chats/transcripts/08_0619_ez_ie8.mspx |title=Windows Internet Explorer 8 Expert Zone Chat (19 June 2008) |publisher=Microsoft |date=19 June 2008 |access-date=24 October 2010 |archive-date=17 March 2010 |archive-url=https://web.archive.org/web/20100317095519/http://www.microsoft.com/windowsxp/expertzone/chats/transcripts/08_0619_ez_ie8.mspx |url-status=live }}</ref><ref>{{cite web |url=http://www.codedread.com/svg-support.php |title=SVG Support |last=Schiller |first=Jeff |date=13 February 2010 |access-date=25 February 2010 |archive-date=16 February 2009 |archive-url=https://web.archive.org/web/20090216041528/http://www.codedread.com/svg-support.php |url-status=live }}</ref> IE9 (released 14 March 2011) supports the basic SVG feature set.<ref name="IE9">{{cite web |url=http://msdn.microsoft.com/en-us/library/ff974378(VS.85).aspx |title=What's New in Internet Explorer 9 |date=22 March 2011 |work=[[Microsoft Developer Network]] |publisher=[[Microsoft]] |access-date=22 March 2011 |archive-date=5 April 2011 |archive-url=https://web.archive.org/web/20110405103423/http://msdn.microsoft.com/en-us/library/ff974378(VS.85).aspx |url-status=live }}</ref> IE10 extended SVG support by adding SVG 1.1 filters.<ref>{{cite web |title=SVG (Windows) |url=https://msdn.microsoft.com/en-us/library/ie/hh673562(v=vs.85).aspx |website=Internet Explorer Dev Center |publisher=[[Microsoft]] |access-date=27 August 2014 |archive-date=20 March 2014 |archive-url=https://web.archive.org/web/20140320183804/http://msdn.microsoft.com/en-us/library/ie/hh673562(v=vs.85).aspx |url-status=live }}</ref>
* [[Microsoft Edge]] Legacy supports <!-- How much does it support? Basic, tiny, or full? 1.1? --> SVG 1.1.<ref>{{cite web |url=https://developer.microsoft.com/en-us/microsoft-edge/platform/status/ |title=Microsoft Edge web platform features status and roadmap - Microsoft Edge Development |website=developer.microsoft.com |access-date=19 April 2018 |archive-date=15 April 2018 |archive-url=https://web.archive.org/web/20180415170845/https://developer.microsoft.com/en-us/microsoft-edge/platform/status/ |url-status=live }}</ref>
* The [[Maxthon|Maxthon Cloud Browser]] also supports SVG.{{citation needed|reason=Not mentioned on the Maxthon page|date=March 2015}}
There are several advantages to native and full support: [[Plug-in (computing)|plugins]] are not needed, SVG can be freely mixed with other content in a single document, and rendering and scripting become considerably more reliable.<ref>{{cite web |url=https://msdn.microsoft.com/en-us/library/ie/hh968248.aspx |publisher=[[Microsoft Developer Network|MSDN]] |title=Get ready for plug-in free browsing |year=2014 |access-date=2014-03-05 |archive-date=31 December 2014 |archive-url=https://web.archive.org/web/20141231082113/http://msdn.microsoft.com/en-us/library/ie/hh968248.aspx |url-status=live }}</ref>
=== Mobile devices ===
Support for SVG may be limited to SVGT on older or more limited [[Smart Phone|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 Microsystems|Sun]] demonstrated a mobile implementation of SVG Tiny 1.1 for the [[Connected Limited Device Configuration]] (CLDC) platform.<ref>{{cite web |title=SVG Open 2005 Conference and Exhibition - Proceedings - Cartoon Oriented User Interfaces |url=http://www.svgopen.org/2005/proceedings.html#paper108 |publisher=svgopen.org |access-date=29 August 2010 |archive-date=3 December 2010 |archive-url=https://web.archive.org/web/20101203234229/http://www.svgopen.org/2005/proceedings.html#paper108 |url-status=live }}</ref>
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 (operating system)|Android]] built-in browser did not support SVG prior to v3.0 (Honeycomb).<ref>{{cite web |title=Browser doesn't render SVG images |url=https://code.google.com/p/android/issues/detail?id=1376 |access-date=1 January 2011 |archive-date=20 May 2011 |archive-url=https://web.archive.org/web/20110520231037/http://code.google.com/p/android/issues/detail?id=1376 |url-status=live }}</ref> Prior to v3.0, Firefox Mobile 4.0b2 (beta) for Android was the first browser running under Android to support SVG by default.<ref>{{cite web |title=Firefox Mobile 4.0b2 (beta) for Android supports SVG images |url=https://code.google.com/p/android/issues/detail?id=1376#c30 |date=2010-12-16 |work=[[Android (operating system)|Android]] Issue 1376 |access-date=2014-01-29 |archive-date=21 August 2014 |archive-url=https://web.archive.org/web/20140821133935/https://code.google.com/p/android/issues/detail?id=1376#c30 |url-status=live }}</ref>
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.
[[Research In Motion|RIM]]'s [[BlackBerry]] has built-in support for SVG Tiny 1.1 since version 5.0.<ref>{{cite web |title=Support for SVG |url=http://docs.blackberry.com/en/developers/deliverables/11844/Native_SVG_support_887737_11.jsp |publisher=RIM |access-date=6 October 2011 |archive-date=10 October 2011 |archive-url=https://web.archive.org/web/20111010104311/http://docs.blackberry.com/en/developers/deliverables/11844/Native_SVG_support_887737_11.jsp |url-status=dead }}</ref> Support continues for WebKit-based BlackBerry Torch browser in OS 6 and 7.<ref>{{cite web |title=BlackBerry Torch The HTML5 Developer Scorecard |url=http://www.sencha.com/blog/blackberry-torch-the-html5-developer-scorecard |publisher=[[Sencha]] |access-date=6 October 2011 |archive-date=5 March 2014 |archive-url=https://web.archive.org/web/20140305165051/http://www.sencha.com/blog/blackberry-torch-the-html5-developer-scorecard |url-status=live }}</ref>
[[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 [[Application programming interface|API]] expert group that defines [[Java Platform, Micro Edition|Java ME]] API for SVG presentation and manipulation. This API has been implemented in S60 Platform 3rd Edition Feature Pack 1 and onward.<ref>{{cite web |url=http://www.s60.com/business/productinfo/applicationsandtechnologies/java/supportedfeaturesin3rdedition |title=S60 Product info |archive-url=https://web.archive.org/web/20071013152026/http://www.s60.com/business/productinfo/applicationsandtechnologies/java/supportedfeaturesin3rdedition |archive-date=13 October 2007 |publisher=S60.com |access-date=19 October 2009}}</ref> Some [[Series 40 (software platform)|Series 40 phones]] also support SVG (such as [[Nokia 6280]]).{{fact|date=February 2023}}
Most [[Sony Ericsson]] phones beginning with [[Sony Ericsson K700|K700]] (by release date) support SVG Tiny 1.1. Phones beginning with [[K750]] also support such features as opacity and gradients. Phones with [[Sony Ericsson Java Platform|Sony Ericsson Java Platform-8]] have support for JSR 226.{{fact|date=February 2023}}
[[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 system|embedded]] devices, is available on some mobile platforms.<ref>{{Cite web |url=http://www.svgopen.org/2002/papers/jezic__esvg/ |access-date=5 April 2012 |title=SVG for Embedded Systems |first=Damir |last=Jezic |date=15–17 July 2002 |publisher=svgopen.org |work=Zurich 2002 |archive-date=16 March 2012 |archive-url=https://web.archive.org/web/20120316022700/http://www.svgopen.org/2002/papers/jezic__esvg/ |url-status=live }}</ref><ref>{{cite web |url=http://www.intesis.hr/products/esvg |title=eSVG |work=Intesis Intelligent Embedded Software |year=2010 |access-date=2014-01-29 |archive-date=3 March 2012 |archive-url=https://web.archive.org/web/20120303142911/http://www.intesis.hr/products/esvg |url-status=live }}</ref>
=== Authoring ===
SVG images can be hand coded or produced by the use of a vector graphics editor, such as [[Inkscape]], [[Adobe Illustrator]], [[Adobe Flash Professional]], or [[CorelDRAW]], and rendered to common [[Raster graphics|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 curve]]s typically using [[image tracing]] back-ends like [[potrace]],<ref name="selinger">{{cite web |url=http://potrace.sourceforge.net/ |last=Selinger |first=Peter |year=2001–2013 |title=Potrace – Transforming bitmaps into vector graphics |work=[[SourceForge]] project [[Potrace]] |access-date=2014-01-29 |archive-date=9 September 2009 |archive-url=https://web.archive.org/web/20090909215555/http://potrace.sourceforge.net/ |url-status=live }}</ref> autotrace, and imagetracerjs.
Software can be programmed to render SVG images by using a [[library (computing)|library]] such as [[librsvg]] used by [[GNOME]] since 2000, [[Batik (software)|Batik]] and ThorVG (Thor Vector Graphics) 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 (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 <code>&lt;svg&gt;</code> 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]] (e.g. with [[LibreOffice]]) and [[desktop publishing]] (e.g. [[Scribus]]), [[Plot (graphics)|plotting graphs]] (e.g. [[gnuplot]]), and importing paths (e.g. for use in [[GIMP]] or [[Blender (software)|Blender]]). The application services [[Microsoft 365]] and [[Microsoft Office 2019]] offer support for exporting,<ref>{{Cite web |date=September 2019 |title=What's new in PowerPoint for Microsoft 365 |url=https://support.microsoft.com/en-us/office/what-s-new-in-powerpoint-for-microsoft-365-e8ef980c-5b12-4fff-ae3f-0819e6a21a1f |url-status=live |archive-url=https://web.archive.org/web/20210313183903/https://support.microsoft.com/en-us/office/what-s-new-in-powerpoint-for-microsoft-365-e8ef980c-5b12-4fff-ae3f-0819e6a21a1f |archive-date=2021-03-13 |access-date=2021-04-17 |website=support.microsoft.com |language=en-US}}</ref> importing and editing SVG images. The [[Uniform Type Identifier]] for SVG used by Apple is <code>public.svg-image</code> and conforms to <code>public.image</code> and <code>public.xml</code>.
== 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 to a website, such as a profile picture, and the file is treated as a normal picture but contains malicious content.<ref>{{Cite web|url=https://www.fortinet.com/blog/threat-research/scalable-vector-graphics-attack-surface-anatomy|title=Anatomy of Scalable Vector Graphics (SVG) Attack Surface on the Web|first=Thanh Nguyen|last=Nguyen|date=7 November 2019|website=Fortinet Blog|access-date=21 February 2023|archive-date=21 February 2023|archive-url=https://web.archive.org/web/20230221155554/https://www.fortinet.com/blog/threat-research/scalable-vector-graphics-attack-surface-anatomy|url-status=live}}</ref> 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 (the [[Billion laughs attack]]), but could also lead to [[Code injection|HTML injection]] and [[cross-site scripting]] attacks. The W3C therefore stipulate certain requirements when SVG is simply used for images: SVG Security.<ref name="auto">{{Cite web|url=https://www.w3.org/wiki/SVG_Security|title=SVG Security - W3C Wiki|website=W3C|access-date=21 February 2023|archive-date=21 February 2023|archive-url=https://web.archive.org/web/20230221155554/https://www.w3.org/wiki/SVG_Security|url-status=live}}</ref>
The W3C says that Inline SVG (an SVG file loaded natively on a website) 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.<ref name="auto"/>
== Related work ==
The [[MPEG-4 Part 20]] standard - ''Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF)'' is based on SVG Tiny.<ref>{{cite web |url=http://mpeg.chiariglione.org/technologies/mpeg-4/mp04-lsr/index.htm |title=MPEG-4 LASeR white paper |date=July 2005 |access-date=29 August 2010 |publisher=[[International Organization for Standardization]] |first=Cyril |last=Concolato |archive-date=25 July 2011 |archive-url=https://web.archive.org/web/20110725164211/http://mpeg.chiariglione.org/technologies/mpeg-4/mp04-lsr/index.htm |url-status=live }}</ref> It was developed by [[MPEG]] ([[ISO/IEC JTC 1]]/SC29/WG11) and published as ISO/IEC 14496-20:2006.<ref>{{cite web |url=http://www.iso.org/iso/iso_catalogue/catalogue_ics/catalogue_detail_ics.htm?csnumber=52454 |title=ISO/IEC 14496-20:2008 - Information technology – Coding of audio-visual objects – Part 20: Lightweight Application Scene Representation (LASeR) and Simple Aggregation Format (SAF) |publisher=[[International Organization for Standardization]] |access-date=30 October 2009 |archive-date=14 May 2011 |archive-url=https://web.archive.org/web/20110514061714/http://www.iso.org/iso/iso_catalogue/catalogue_ics/catalogue_detail_ics.htm?csnumber=52454 |url-status=live }}</ref> 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.<ref>{{cite web |url=http://www.mpeg-laser.org/documents/LASeRWhitePaper.pdf |title=LASeR - the MPEG standard for Rich Media Services |access-date=11 April 2010 |archive-date=21 February 2011 |archive-url=https://web.archive.org/web/20110221224352/http://www.mpeg-laser.org/documents/LASeRWhitePaper.pdf |url-status=live }}</ref> SVG was also accommodated in [[MPEG-4 Part 11]], in the [[Extensible MPEG-4 Textual Format|Extensible MPEG-4 Textual (XMT) format]] - a textual representation of the MPEG-4 multimedia content using [[XML]].<ref>{{cite web |url=http://ride.chiariglione.org/bits_and_bytes/bits_and_bytes.htm |title=Riding the media bits - Bits and bytes |first=Leonardo |last=Chiariglione |date=8 March 2005 |access-date=30 October 2009 |url-status=dead |archive-url=https://web.archive.org/web/20100925220237/http://ride.chiariglione.org/bits_and_bytes/bits_and_bytes.htm |archive-date=25 September 2010 |df=dmy-all}}</ref>
== See also ==
{{SVGSeries}}
* [[Canvas element]]
* [[Comparison of graphics file formats]]
* [[Comparison of raster-to-vector conversion software]]
* [[Comparison of vector graphics editors]]
* [[Computer graphics]]
* [[Computer Graphics Metafile]]
* [[Image file format]]
* [[Resolution independence]]
== References ==
{{refs}}
== External links ==
{{sisterlinks|d=y|c=Category:SVG|mw=SVG|b=XML - Managing Data Exchange/SVG|wikt=SVG|v=Vector Drawing|m=SVG|s=no|n=no|q=no}}
* {{Official website|http://www.w3.org/Graphics/SVG|W3C SVG page}} specifications, list of implementations
* [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html W3C SVG primer] W3C Primer (draft) under auspices of SVG Interest Group
* [http://developer.mozilla.org/en/docs/SVG MDN - SVG: Scalable Vector Graphics]
{{W3C Standards}}
{{vector graphics markup languages}}
{{Graphics file formats}}
{{SVG Plugins}}
{{Web interfaces}}
{{Authority control}}
{{Use dmy dates|date=February 2014}}
[[Category:Scalable Vector Graphics| ]]<!-- the "| " sorts before "A" in cat -->
[[Category:Articles with example code]]
[[Category:Graphics file formats]]
[[Category:HTML5]]
[[Category:Open formats]]
[[Category:Page description markup languages]]
[[Category:Vector graphics markup languages]]
[[Category:World Wide Web Consortium standards]]
[[Category:XML markup languages]]
[[Category:Computer-related introductions in 2001]]