CODEWITHSUNDEEP
htmlimagesvgaccessibilityalt
pjk_ok
pjk_ok

Reputation: 967

Alt tag equivalent in an SVG <Image> element

When I use the <img> HTML tag I always use an alt attribute for accessibility.

Adding the alt="some text" into the SVG <image> element doesn't seem to work?

What is the best way to provide alternative text in this example?

I have to use the SVG <image> element so I can't take alternative DOM element answers.

<svg x="0px" y="0px" viewBox="0 0 910 1295" style="enable-background:new 0 0 910 1295;" xml:space="preserve">
  <image width="910" height="1295" xlink:href="https://i.postimg.cc/43DKn46z/colours.jpg">
  </image>
</svg>

Thanks in advance for any help.

Upvotes: 1

Views: 2831

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

The equivalent to the alt tag in SVG is the <desc> child element.

<svg x="0px" y="0px" viewBox="0 0 910 1295" style="enable-background:new 0 0 910 1295;" xml:space="preserve">
  <image width="910" height="1295" xlink:href="https://i.postimg.cc/43DKn46z/colours.jpg">
    <desc>Some description of the image</desc>
  </image>
</svg>

Upvotes: 3

Related Questions