Editing SVG (section)

== 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>