
**SVG (Scalable Vector Graphics)** elements might not be read by NVDA (NonVisual Desktop Access) screen reader due to several reasons, that can be lack of accessibility attributes.

Complex SVGs with many nested elements or those used purely for decoration might not be easily interpreted by screen readers. Simpler and well-structured SVGs with appropriate accessibility features are more likely to be read correctly.

SVG elements will not add the accessibility atttributes by default, so that will fail to describe by itself, and the NVDA and other screen reader required these attributes to work.

SVG elements should have proper **role** and **aria-<'tag-name'>** attributes to indicate their purpose and provide additional context.
For example, adding <span class="highlight-small">role="img"</span> to an SVG and using <span class="highlight-small">aria-labelledby</span> to reference a descriptive text can improve accessibility.

```html
<svg width="100" height="100" role="img" aria-labelledby="svgTitle">
  <title id="svgTitle">A red circle</title>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
```

Some case all the above are provided and still the NVDA reader is not reading it, then add extra attribute <span class="highlight-small">`tabindex=0`</span>. So this will give the straight focus to the element and read the content.

<svg width="100" height="100" role="img" tabindex="0" aria-labelledby="svgTitle">
  <title id="svgTitle">A red circle</title>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

```html
<svg
  width="100"
  height="100"
  role="img"
  tabindex="0"
  aria-labelledby="svgTitle"
>
  <title id="svgTitle">A red circle</title>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
```


SVG elements will not add the accessibility atttributes by default, so that will fail to describe by itself, and the NVDA and other screen reader required these attributes to work.

Why SVG element is not reading by NVDA screen reader


The SVG is a popular format for displaying two-dimensional (2D) graphics, charts, and illustrations on web pages and it is a vector file, it can be scaled up or down without losing any of its resolution.

<div class="highlight">

## What is SVG?

SVG stands for Scalable Vector Graphics. SVG is used to define vector-based graphics for the Web. SVG defines the graphics in XML format. Every element and every attribute in SVG files can be animated.

</div>

It is fine to use anywhere but in some places, the SVG format cannot be used because of the file format, So that situation we have to convert the SVG file to other supporting formats.

I have come across such a situation during my development time. So I wish to share this with our developer community.

Here I have written a Javascript function for downloading the SVG as PNG file format.

```javascript
const download = (e) => {
  const canvas = document.createElement("canvas");
  const svg = document.getElementById("svgContainer");
  const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
  const w = parseInt(svg.getAttribute("width"));
  const h = parseInt(svg.getAttribute("height"));
  const img_to_download = document.createElement("img");
  img_to_download.src = "data:image/svg+xml;base64," + base64doc;
  img_to_download.onload = function () {
    console.log("img loaded");
    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    const context = canvas.getContext("2d");
    context.drawImage(img_to_download, 0, 0, w, h);
    const dataURL = canvas.toDataURL("image/png");
    if (window.navigator.msSaveBlob) {
      window.navigator.msSaveBlob(canvas.msToBlob(), "download.png");
      e.preventDefault();
    } else {
      const a = document.createElement("a");
      const my_event = new MouseEvent("click");
      a.download = "download.png";
      a.href = dataURL;
      a.dispatchEvent(my_event);
    }
  };
};
```

Actually the SVG file being converted to <span class="highlight-small">canvas</span> then again it is converted as PNG format, like this way also make it in other image file formats.


Easist way of downloading the SVG file as PNG file is done using javascript snippet

More Stories related to 'svg'

Also read the similar topics