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

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](http://stackoverflow.com/a/4756461/399726) — BenjaminGolder, Apr 18 '14 at 02:46
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 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! — Berklie, Apr 18 '14 at 13:11
the HTML5 inline svg element does not support the "alt" attribute because it is considered phrasing content: http://www.w3.org/TR/html5/dom.html#phrasing-content-1 — Michael Mullany, Apr 18 '14 at 14:48
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. — Berklie, Apr 18 '14 at 20:50
Possible duplicate of [Accessibility: recommended alt-text convention for SVG and MathML?](http://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml) — Daniel Tonon, Oct 13 '15 at 02:44

score 8 · Accepted Answer · edited Jun 18 '16 at 15:41

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>

When I throw the 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) — Berklie, Apr 18 '14 at 13:07
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. — Steve Eynon, May 04 '19 at 11:49

score 4 · Answer 2 · answered Jul 27 '20 at 14:35

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>

Alt tag possible for inline SVG?

2 Answers2