Is there a way to add alt attribute to an svg in case it fails to load-CodePudding

Is it possible for me to add an alt attribute to an svg or an icon so that if it fails to load my users can have an idea of what is being rendered there as in images...something like this:

<svg class="header__social--icon">
  <use xlink:href="./data/images/sprite.svg#icon-twitter"></use>
</svg>

now can I have a way to add an alt as in images for example

<svg class="header__social--icon" alt="twitter svg">
  <use xlink:href="./data/images/sprite.svg#icon-twitter"></use>
</svg>

so that if the svg icon cannot be displayed the twitter svg is shown?

CodePudding user response：

Yes, you can. The alt attribute specifies an alternate text for an area, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Refer this link for better understanding.

CodePudding user response：

What you could do, is export it as a svg file, then use the img tag, and add an alt to it. Hope this helps. Other than that I dont think there is a way.

Like this:

<img src="path/to/your/svg/imag" alt="this is the alternative text">