Can I use alt and title properties within SVG elements?
Asked Answered
T

2

12

To make my inline SVG image more searchable by google, can you add alt/title properties/attributes within svg elements such as "path" "circle" "line" etc?

I already know that you can use a title tag within the "svg" tag, like this..

<svg>
<title>this is a title tag.</title>
</svg>

Below is an example of what I am talking about.

<svg version="1.1" id="Layer_1">
    <style type="text/css">

    .st0{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
    </style>
    
    <path class="st0" title=“this is what I am talking about” d="M567,1136.2l37,10.9c13.3,3.9,27.2,3.1,39.9-2.4l0.6-0.3"/>
    
    <line id="hi2" class="st5" alt=“This is what I am Talking About” x1="72" y1="-169.7" x2="108" y2="-169.7"/>
</svg>
Tonality answered 24/10, 2015 at 10:36 Comment(0)
S
17

As far as I am aware, alt text cannot be used on SVGs. You are right in using <title> tags, but you can also add in <desc> to add more information.

Take a look at this answer here: https://mcmap.net/q/203331/-accessibility-recommended-alt-text-convention-for-svg-and-mathml for a more detailed look into this issue.

Skelp answered 24/10, 2015 at 11:20 Comment(0)
C
2

title as an attribute has no meaning in SVG, its equivalent as you point out in the question is the <title> element.

alt as an attribute also has no meaning, the SVG equivalent is the <desc> element.

Changeful answered 24/10, 2015 at 12:31 Comment(2)
How about the meaning of when you hover it, show the title as a tooltip to the user, like every other element does.Colis
@Colis the question already states that and I say it does in the answer.Changeful

© 2022 - 2024 — McMap. All rights reserved.