Alt tag possible for inline SVG?

Question

Is there a way to give an inline SVG an alt tag? Here is the code that I have for my inline SVG, but the alt tag is not showing (and I'm not even sure the way that I coded the alt tag is valid, after searching online for clarification):

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve" alt="Hello world!">
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
    <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

And here is the JSFiddle: http://jsfiddle.net/FsCMM

Pilpul

Why do want the alt attribute? For help text, you can use the title attribute, and for accessibility there is an official recommendation that has yet to be implemented by screen readers. Check out this answer – Ferrol

What I'm looking to do is provide "helper text" (which I attempted to simply describe as "alt text"). Thank you for the link... I've read it, though I cannot see the <title> tags providing any "helper text" upon mouse over, as I've tried in my JSFiddle. This is for what I'm looking (similar to an image "alt text"): an attribute that will describe the SVG with "helper text" when a mouse mouses over it. Thanks! – Pilpul

the HTML5 inline svg element does not support the "alt" attribute because it is considered phrasing content: w3.org/TR/html5/dom.html#phrasing-content-1 – Wardieu

Thank you for the documentation. I'm wondering if there is some other sort of attribute of inline SVGs that allows for a similar "helper text" upon mouse over. – Pilpul

Possible duplicate of Accessibility: recommended alt-text convention for SVG and MathML? – Efface

Answer 1

You should use title element, not alt tag, to display tooltips:

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</svg>

---

for chrome34: wrap graphics by g element and insert title element to this.

<svg version="1.1" id="svg-header-filter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27px" height="27px" viewBox="0 0 37 37" enable-background="new 0 0 37 37" xml:space="preserve">
<g>
    <title>Hello world!</title>
    <path class="header-filter-circle" d="M17.796,0C7.947,0,0,7.988,0,17.838s7.947,17.787,17.796,17.787c9.848,0,17.829-7.935,17.829-17.783 C35.625,7.988,27.644,0,17.796,0z"/>
    <g>
        <path class="header-filter-icon" fill="#FFFFFF" d="M15.062,30.263v-9.935l-8.607-8.703h22.343l-8.744,8.727v5.029L15.062,30.263z M8.755,12.625l7.291,7.389 v7.898l3.025-2.788v-5.086l7.426-7.413H8.755z"/>
    </g>
</g>
</svg>

Shennashensi

When I throw the <title> tags into the JSFiddle from above, they don't assist in popping any "helper text" up on mouse over. Can you get it to show? (Google Chrome 34.0.1847.116) – Pilpul

Adding <g> also helps in case of having <svg> with <xpath:href> inside. <svg><title>...</title><xpath:href>... will show alt text in Firefox but not in Chrome. Adding <g> before <title> fixes Chrome behaviour. – Narco

As of May 2019, this gives a "High Severity Issue" in SEO Analyzer in Bing's Webmaster Tools. It seems Bing doesn't distinguish between SVG title tags, and the title tag in the head; hence complains the website has multiple title tags. This info may not be a priority for everyone, but it may be useful for some. – Yuonneyup

Answer 2

With <title> it works nice, the below example shows title (acts like alt for images) for more than one path:

<svg height="200pt" viewBox="0 0 200 200" width="200pt" style="background-color: var(--background);">
    <g>
        <title>Gray path</title>
        <path fill="none" stroke="gray" stroke-width="20" d="M 179.89754857473488 95.95256479386293 A 80 80 0 0 0 100 20">
        </path>
    </g>
    <g>
        <title>Red path</title>
        <path fill="none" stroke="red" stroke-width="20" d="M 91.90160519334194 179.58904448198567 A 80 80 0 0 0 179.89754857473488 95.95256479386293">
        </path>
    </g>
    <g>
        <title>Blue path</title>
        <path fill="none" stroke="blue" stroke-width="20" d="M 32.111795102681654 57.67752800438377 A 80 80 0 0 0 91.90160519334194 179.58904448198567">
        </path>
    </g>
    <g>
        <title>Green path</title>
        <path fill="none" stroke="green" stroke-width="20" d="M 99.99999999999999 20 A 80 80 0 0 0 32.111795102681654 57.67752800438377">
        </path>
    </g>
</svg>

Howlyn