Menu
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>
795
For svg's included with an <img> tag Note that if the image is purely decorative, you should include alt but leave it blank - alt="" .
The <svg> element gets alternative text through an aria-labelledby element referencing visible text in a paragraph. All users can tell that the image is a red circle.
<title> — the SVG accessible name element. The <title> element provides an accessible, short-text description of any SVG container element or graphics element. Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip.
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element.
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://stackoverflow.com/a/4756461/3909886 for a more detailed look into this issue.
66
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
