— the SVG accessible name element</h1>
<p><code>{{SVGRef}}</code> </p>
<p>The <strong><code><title></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> element provides an accessible, short-text description of any SVG <a href="/en-US/docs/Web/SVG/Element#container_elements">container element</a> or <a href="/en-US/docs/Web/SVG/Element#graphics_elements">graphics element</a>.</p>
<p>Text in a <code><title></code> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an <a href="/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> attribute rather than using the <code><title></code> element.</p>
<blockquote>
<p>[!NOTE]
For backward compatibility with SVG 1.1, <code><title></code> elements should be the first child element of their parent.</p>
</blockquote>
<h2 id="example">Example</h2>
<pre class="hljs"><code data-language="css"><span class="hljs-selector-tag">html</span>,
<span class="hljs-selector-tag">body</span>,
svg {
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
}
</code></pre>
<pre class="hljs"><code data-language="html"><span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 20 10"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">circle</span> <span class="hljs-attr">cx</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">cy</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">r</span>=<span class="hljs-string">"4"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>I'm a circle<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">circle</span>></span>
<span class="hljs-tag"><<span class="hljs-name">rect</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"11"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>I'm a square<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">rect</span>></span>
<span class="hljs-tag"></<span class="hljs-name">svg</span>></span>
</code></pre>
<p><code>{{EmbedLiveSample('Example', 150, '100%')}}</code> </p>
<h2 id="attributes">Attributes</h2>
<p>This element only includes global attributes</p>
<h2 id="usage-context">Usage context</h2>
<p><code>{{svginfo}}</code> </p>
<h2 id="specifications">Specifications</h2>
<p><code>{{Specifications}}</code> </p>
<h2 id="browser-compatibility">Browser compatibility</h2>
<p><code>{{Compat}}</code> </p>
<h2 id="see-also">See also</h2>
<ul>
<li><code>{{SVGElement("desc")}}</code> </li>
</ul>
</article>
<right-rail>
<h3>In this article</h3>
<nav class="table-of-contents"><ol><li><a href="#example">Example</a></li><li><a href="#attributes">Attributes</a></li><li><a href="#usage-context">Usage context</a></li><li><a href="#specifications">Specifications</a></li><li><a href="#browser-compatibility">Browser compatibility</a></li><li><a href="#see-also">See also</a></li></ol></nav>
<small><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title" target="_blank">View on MDN</a></small>
</right-rail>
<footer>
<p>Content from <a href="https://github.com/mdn/content" target="_blank">MDN Web Docs</a></p>
</footer>
</body>
</html>