SVG images

Designing with SVG images

SVG stands for Scalable Vector Graphics. SVG are 2D images defined in XML text files. They can be searched, indexed, scripted and compressed. SVG can also be dynamic, interactive and animated. Created in 1999, they now have good browser support. Some accessibility benefits of SVG:

• SVG can scale to any size without loss of quality.
• SVG colours are highly customizable by creator and end user.
• SVG supports accessibility markup and features.

This image illustrates the difference between bitmap and vector images. The bitmap image, called a Raster image, is composed of a fixed set of pixels, while the vector image is composed of a fixed set of shapes. In this image, scaling the bitmap reveals the pixels while scaling the vector image preserves the shapes:

There are two ways of adding SVG to a page that can be accessible:

• Use the <img> element and reference the SVG file via the src attribute.
• Use the <svg> element to embed the SVG directly into the HTML code.

A third way of adding SVG to a page, nesting the SVG in an <iframe> or <embed> element, is poorly supported by assistive technologies.

• Do not embed SVG using <object> or <iframe>

Technique 1: Use the <img> element to reference the SVG via the src attribute

• Use for simple, uncomplicated images with basic alt text description
• Use the <img> element and src attribute
• Add the role="img" attribute to improve accessibility support
• Provide text alternative that conveys the same intent and meaning as the image.
• Use the alt attribute to provide alt text (preferred)
• Can also use aria-label or aria-labelledby attribute to provide alt text

HTML

Code begins

<img src="stop.svg" role="img" alt="Stop sign" class="img-responsive" style="width:200px">

Code ends

Technique 2: Use the <svg> element to embed the SVG directly (inline) into the HTML code

• Use for simple and more complex images
• Inline SVG can be animated and manipulated by CSS and JavaScript
• Use <svg> element
• Add role="img" to improve accessibility support
• Provide text alternative that conveys the same intent and meaning as the image.
• Use <title> element to provide short alt text
  • <title> must be the first child of its parent element
  • <title> text will appear as tooltip when user moves mouse pointer over it
• Use <desc> element to provide longer text description if needed, for complex images.
• Text in a <desc> element is not visible.
• Refer to Complex Images section for more approaches on displaying long descriptions
• To improve accessibility support:
  • Add unique id attribute values to the <title> and <desc> elements
  • Add an aria-labelledby attribute to the SVG element referencing the id attribute values

SVG

Code begins

<svg role="img" aria-labelledby="uniqueTitleID uniqueDescID" width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
   <title id="uniqueTitleID">red square</title>
   <desc id="uniqueDescID">SVG image of a red square with black border</desc>
   <path fill="red" stroke="#000" stroke-width="2.5" d="M168 168H32V32h136z"/>
</svg>

Code ends

Image source: Wikimedia Red square svg

Decorative SVG

Decorative SVG images do not add useful information to a page. Examples include images used for visual styling (borders) or for ambiance or visual interest (eye-candy).

• Hide decorative SVG images by using the aria-hidden="true" attribute

HTML

Code begins

<img src="sample.svg" aria-hidden="true">

Code ends

Text in SVG

Text within <svg> elements scales well and remains sharp when magnified. However, screen readers read all text elements in an SVG as one continuous string of text. This can be confusing if text elements are meant to identify different parts of the image, and not read together as a single string.

Follow these Best practices:

• Avoid text within <svg> elements or keep text to a minimum. Put text outside the SVG (preferred) instead of inside.
• Add role="img" to improve accessibility support.
• Provide text alternative that conveys the same intent and meaning as the image.
• Use <title> element to provide short alt text
  • <title> must be the first child of its parent element.
  • <title> text will appear as tooltip when user moves mouse pointer over it.
• Use <text> element to provide text in SVG.
• To ensure screen reader support:
  • Add unique ID values to the <title> and <text>.
  • Use aria-labelledby to reference the ID values.

SVG

Code begins

<svg width="200" height="100" role="img" aria-labelledby="uniqueTitleID2 uniqueTextID2">
   <title id="uniqueTitleID2">A rectangle with red border with text inside</title>  
   <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>  
   <text id="uniqueTextID2" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World!</text>     
</svg>

Code ends

SVG colour contrast

Users can change colour themes on their computer (e.g. Windows High Contrast Mode), to modify the text and background colour to make content easier to see. If the SVG image has text without a background colour, the text may become hard to read, depending on the user background changes.

• Include a background colour behind text and other important parts of the image

SVG animation

• Use JavaScript or CSS, not <animate>
• Avoid SVG that flash or blink more than 3 times per second
• Avoid SVG that auto-play to avoid distracting users
• Allow users to play and pause SVG animations
• Use animated SVG to serve a specific purpose, not distract

Interactive SVG

• Ensure interactive <svg> objects are keyboard accessible
• Ensure interactive <svg> objects are touchscreen accessible
• Ensure interactive <svg> objects convey applicable name, role and value
• Ensure interactive <svg> objects meet all applicable WCAG 2.1 guidelines

Related WCAG resources