What an SVG file contains
An SVG document can hold three kinds of graphical object: vector shapes, including paths made of straight lines and curves; bitmap images; and text. Objects can be grouped, styled, transformed, and composited onto what has already been drawn. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, and template objects. A drawing can be interactive. Animation can be written in the SVG elements themselves, or in a script that reaches into the document's object model.
Styling is CSS. Scripting is JavaScript. Text sits in the document as real characters, which is why a drawing can be searched and why international text, including mixed directions, is a normal case rather than a hack. The specification is aimed at vector markup. Its design also covers the basic duties of a page-description language, the sort of job PDF does: enough information to place each glyph and each image at a chosen spot on a printed page. CSS still styles it. The two facts sit together more comfortably than people expect. A file can be a picture on a website on Monday and a figure in a print run on Tuesday, from the same text.
The SVG 1.1 specification organises itself into fourteen functional areas. What follows is those areas in a reading order, not a fourteenth copy of the headings.
Paths, shapes, and text
Paths are the compact way to describe an outline. A path can be filled, stroked, or used as a clipping boundary. The commands are single letters. M means move to, and is followed by an x and a y. L means line to. C, S, Q, T, and A introduce various Bézier and elliptical curves. Z closes the path. A capital letter means the numbers that follow are absolute coordinates. The same letter in lower case means they are relative to the current point. That is the whole of the compactness. A complicated outline is a short string, not a list of XML elements with a coordinate in each.
Basic shapes exist so that the common cases need not be written as paths. Straight lines, polylines, polygons, circles, ellipses, rectangles, and rectangles with rounded corners are all first-class elements. You can build every one of them from a path. You should not have to.
Text is Unicode character data inside the XML. Many visual effects are possible. The specification handles bidirectional text, so a run of English and a run of Arabic can share a line, vertical text of the kind used for Chinese or Japanese, and text laid along a curve. The classic demonstration is lettering around a seal. The useful demonstration is a diagram label that stays text, and can be copied, rather than a label that was outlined into paths and can only be looked at.
Paint
Shapes can be filled and stroked with a colour, a gradient, or a pattern. A fill may be opaque or any degree of transparent. Markers are decorations at the vertices or the ends of a line: arrowheads are the obvious case. Colour is specified as in CSS. A name such as blue, a short or long hex value, a decimal rgb() triple, or percentages. Gradients may be linear or radial, may include any number of stops, may repeat, and may vary opacity as well as colour. Patterns are built from a raster or a vector object and repeated along x and y. Gradients and patterns can be animated and scripted.
Since 2008 there has been a professional argument about whether gradient meshes, or diffusion curves, ought to be added. A simple diffusion-curve representation can hold subtle shading, and it can be captured from a bitmap automatically. Artists who have used both meshes and diffusion curves have found the curves simpler to construct. The SVG 2 draft includes gradient meshes. Until that is widely drawn by browsers, the practical toolkit remains solid colour, linear and radial gradients, and patterns.
<rect x="16" y="28" width="90" height="70" fill="#2070e0"/>
<circle cx="160" cy="74" r="36" fill="#f07000"/>
<line x1="210" y1="30" x2="264" y2="122" stroke="#1858b8" stroke-width="4"/>Clipping, filters, and the stack
Graphic elements, text included, can define an inside and an outside, and those regions can be painted independently. Fully opaque clipping paths and semi-transparent masks are composited to produce the colour and the opacity of each pixel of the final image, using alpha blending. A clip says what is visible. A mask says how visible. They are easy to confuse in conversation and they are different elements in the file.
A filter effect is a series of graphical operations applied to a source graphic, producing a modified bitmap result. The source can stay a vector. The filtered output is pixels. Blur is the example everyone has used. The mechanism is more general than blur: a chain of operations, each taking the previous result. Filters are also the point at which a "vector file" quietly becomes a raster for part of its life. Scale the page and the vectors redraw. The filter runs again. That is why a blurred SVG can stay sharp when a pre-blurred PNG cannot, and why a heavy filter is not free.
Interaction, links, scripts, animation
SVG images can respond to a user in several ways. Besides hyperlinks, any part of a drawing can listen for interface events: focus changes, clicks, scrolling, zooming, and other pointer, keyboard, and document events. A handler may start, stop, or alter an animation, or run a script. Links use XLink. Through a view element or a fragment identifier, a URL can open an SVG file already zoomed to a region or limited to one element, which is a practical way to build a sprite sheet out of a single drawing. Combined with use, XLink also lets a file point at an element, inside itself or outside, and reuse it. Less markup, and one definition when the mark has to change.
Every part of the document can be reached from a script, in the same spirit as HTML. There is a document-object-model object for each element and attribute. Scripts live in script elements and can run in response to pointer, keyboard, and document events. Animation has its own elements, animate, animateMotion, and animateColor among them, and it can also be done by manipulating the document from a script on a timer. The animation design was meant to stay compatible with SMIL, the Synchronized Multimedia Integration Language. The W3C explicitly recommends SMIL as the standard for animation in SVG. Animations can be continuous, they can loop, and they can answer to the user. A drawing that moves is still a drawing. It is not automatically a good idea. Motion that restates the geometry teaches nothing the still file did not already say.
Fonts, metadata, reuse
Text in SVG may refer to an external font, including a font installed on the machine. If that font is missing where the file is drawn, the text will not look as it was designed. One remedy, in the older specification, is an SVG font: the glyphs defined inside the file and referenced from the text element. SVG 2 moves this job toward WOFF. The underlying problem does not move. A drawing that depends on a font the reader does not have is a drawing that will be substituted, and substitution changes the line lengths.
Metadata fits the W3C's wider interest in description. The metadata element can carry Dublin Core properties: title, creator, subject, description. Other schemas are allowed. title and desc give plain-text description inside the image, which helps indexing and also helps a reader who cannot see the picture. A document can define a shape or a gradient once and use it many times. It can also include raster images, PNG or JPEG, and further SVG documents. The format is a drawing. It is also a small archive of the pieces of a drawing. Browsers, phones, and print tools are what serve it.