Geek Answers Handbook

Alt tag for embedded SVG?

Is there a way to give the inline SVG alt tag? Here is the code that I have for my built-in SVG, but the alt tag is not displayed (and I'm not even sure that the way I encoded the alt tag is valid after searching the Internet 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

+7
html5 svg alt
source share
2 answers

You should use the title element and not the alt tag to display hints:

 <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 the graphic with the g element and paste the title element into it.

 <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>
+2
source share
 <svg viewBox="0 -10 300 300" width="100%" height="100%" > <g> <title>Hola Mundo</title> <a href="https://developer.mozilla.org/en-US/docs/SVG" target="_blank"> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1;fill-opacity:0.8" /> </a> </g> <g> <title>Aguante el Rojo</title> <a xlink:href="http://www.carbap.org" xlink:show="new" target="_blank"> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> </a> </g> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:black;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:purple;stroke-width:1" /> <polygon points="..." style="fill:lime;stroke:purple;stroke-width:1" /> <g> <title>Hello world!</title> <path d="..." stroke="black" stroke-width="1" fill="lime" fill-opacity=0.5 /> </g> Sorry, your browser does not support inline SVG. </svg>

Con esto solucionas el tema.

Saludos! RAUL

-2
source share

More articles:


All Articles