...
Example - reference the SVG in the src of an img
<img src="somesvg.svg">
Suggested - All SVG <img> elements SHOULD be set to role="img".
To ensure the widest range of assistive technologies recognize the SVG as an image, add role="img" to the <img>element.
<img src="somesvg.svg" role="img">
Required - All SVG <img> elements MUST have meaningful, concise alternative text (via alt, aria-label, or aria-labelledby).
...
Good Example: Using alt to provide alternative text.
<img src="somesvg.svg" role="img" alt="a concise description of the image">
Good Example: Using aria-label to provide alternative text.
<img src="somesvg.svg" role="img" aria-label="a concise description of the image">
Good Example: Using aria-labelledby to provide alternative text.
<p id="caption1">This is a caption above an image</p>
<img src="somesvg.svg" role="img" aria-labelledby="caption1">
SVGs as Inline
Benefits of utilizing the <svg> tag:
...
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type<svg role="text/cssimg" href="../css/style.css"?> /* Connectrequired to*/
external styles sheet - if needed */
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg role="img" /* required */
viewBox=" /* four numbers specific to file - required */"
class="" /* if needed */
id="" /* if needed */
aria-labelledby="sampleTitle sampleDesc" /* required */
xmlns="http://www.w3.org/2000/svg" version="1.1" >
<title id="sampleTitle">Sample Title</title> /* required */
<desc id="sampleDesc">This is a sample description.</desc> /* if needed */
/* svg elements would list here */
</svg>
Created 04/04/18 by Edward Pritchard (edward.pritchard@domail.maricopa.edu) - Information sourced from Deque Systems, Inc and Deque University