1: Treat linked SVG images as you would bitmaps
When linking to an SVG document as an image, the alt attribute is still required:
<img src="coca-cola-logo.svg" alt="Coca-Cola">… just like a regular bitmap.
2: If you’re using inline SVG, provide a title
The <title> of an SVG element serves a similar purpose to the <title> of an HTML document: it’s a brief text description of the document, or advisory information. Think it as <alt> for inline SVG:
<title> can also be used for individual elements: specifically, <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> and <use>, as well as SVG container elements like <a>, <defs>, <g> and <symbol>. <title> will usually be the first child of this element. Sometimes this title will be visually descriptive:
<title>Yellow Five-Pointed Star</title><polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>… and sometimes it will be informational (i.e. describing the purpose or meaning of an element).
If an SVG contains only one element, a single <title> after the opening <svg> tag may well suffice; if the document contains multiple elements, you’ll likely need a <title> for each element or group:
You can improve this by associating <title> with aria-labelledby. In the case of a single element, this might map to the root <svg> element:
Like <desc> and other HTML elements, <title> should also have a lang attribute to indicate the language used (see below).
3: Provide a description where appropriate
<desc> is a longer description of the SVG element, containing its purpose or design. It might be broadly thought of as the SVG equivalent of <figcaption>.
Rendered inline, the SVG document will look something like this:
4: If the SVG is purely decorative, you don’t have to do anything
If the SVG element is being used decoratively – a gradient or background pattern, for example – there is no need to provide <title>, <desc> or alt. (If you want your page to validate, you should include alt for linked SVGs but set the value of the attribute to ”empty” for purely decorative elements: i.e. alt="" or simply alt).
Neither <desc> nor <title> are rendered visually in the browser by default (although they can be styled to do so); <title> text will appear as a tooltip on hover / selection in compatible browsers.
5: Don’t expect your WYSIWYG tool to do any of this for you
Unfortunately Adobe Illustrator currently has poor support for SVG accessibility: it exports layer names as id values, rather than <title> information. Inkscape does better, allowing you to add and edit <title> and <desc> for every element, at the cost of adding a lot of extraneous cruft to the markup. You’ll likely find a little hand-coding is needed to add full accessibility to an SVG document made in vector illustrator tools.