Understanding how to use image sprites

What’s the difference between the two?

<desc>

Each container element or graphics element in an SVG drawing can supply a description string using the desc element where the description is text-only.

<title>

Each container element or graphics element in an SVG drawing can supply a title element containing a description string where the description is text-only.

This Helped:
https://www.sitepoint.com/tips-accessible-svg/

I have a question though, if the svg only serves as decoration purposes, what do you put as the title? or do you just leave it blank? or do you just not include title?

<svg width="260" height="245" viewbox="0 0 260 245">
  <g class="line" >

<title>          </title>
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
  </g>
  <g class="circle" >
    <circle cx="135" cy="122" r="24.5"></circle>
  </g>

</svg>

Would <title> or <desc> be the equivalent of alt=" " for images?

Back in the old days, a lot of us had to research this kinda stuff on our own.
That’s how many people around here gained the knowledge they have assisting others.

Here’s how we did that, whatever the ? at hand was we would look through the w3c specs.

And here it is, the specs for svg
https://www.w3.org/TR/SVG2/Overview.html

And what you are asking about is right here
5.8. The ‘desc’ and ‘title’ elements

<desc>

The ‘desc’ element represents more detailed textual information for the element such as a description. This is typically exposed to assistive technologies to provide more detailed information, such as a description of the visual appearance of a graphic or help to explain the functionality of a complex widget. It is not typically available to other users, so should not be used for essential instructions.

Authors may associate detailed information, including visible text, with part of the graphic using ‘aria-describedby’ attribute (on the described element or a parent container), with the value being an ID reference to one or more SVG or HTML elements containing the description. The ‘aria-describedby’ attribute takes precedence over the child ‘desc’ when providing a description. If an element has both visible description and a child ‘desc’ element providing supplementary information, authors should explicitly include the ‘id’ of the element itself in its own ‘aria-describedby’ list, in order to concatenate the two descriptions together.

<title>

The ‘title’ child element represents a short text alternative for the element.

On a link, this could be the title or a description of the target resource; on an image or drawing object, it could be a short description of the graphic; on interactive content, it could be a label for, or instructions for, use of the element; and so forth.

Authors should not provide redundant information in a ‘title’ element if there is also a visible label for the drawing element (e.g., using a ‘text’ element). Instead, the visual label should be associated with the drawing element using an ‘aria-labelledby’ attribute.

Interactive user agents should make the plain text content of ‘title’ elements available in response to user interaction, in a manner consistent with platform conventions; existing user agents commonly render ‘title’ elements as a tooltip on hovering the parent element.

Authors should provide a ‘title’ child element to the root svg element within a stand-alone SVG document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead. For reasons of accessibility, user agents should always make the content of the ‘title’ child element to the root svg element available to users. However, this is typically done through other means than the tooltips used for nested SVG and graphics elements, e.g., by displaying in a browser tab.

3 Likes

How would that answer this question?

#63

You go read the info I just took the time to post,
That means clicking on the links and reading through the specs

Don’t ask me how it would answer #63 until you do some of your own research
You will find that answer in the specs

5 Likes

This can either be an id, or a class right?

<g class="line" >

I just saw an example here using class.
http://svgtutorial.com/styling-svg-with-css/

Is this correct how I’m using title here?

<div class="playButtonsc">
  <div class="playButtonc svoefm" data-audio="http://getradio.me/svoefm">

    <svg class="playc" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title class="play">PLAY</title></path>
    </svg>

    <svg class="pausec hidec" width="10" style="margin:15px 37px;" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title class="pause">PAUSE</title></path>
    </svg>


  </div>

  <div class="playButtonc soundpark" data-audio="http://getradio.me/spdeep">

    <svg class="playc" style="margin:15px 38px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title class="play"></title></path></path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 39px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title class="pause"></title></path></path>
    </svg>

  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">

    <svg class="playc" style="margin:15px 36px;" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"><title class="play"></title></path></path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 37px;" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"><title class="pause"></title></path></path>
    </svg>
  </div>
</div>

What would I place inside the css then?

<title class="play">PLAY</title>
<title class="pause">PAUSE</title>

And the n the other ones would be like this.

<title class="play"></title>
<title class="pause"></title>
.play{ 

}

.pause{  

}

I’m reading this:

Answer found here in post #54

Paul gave you a link you did not read, had you read it you would of found this

Example 2: Standalone Icon, Decorative

<p>
  <svg aria-hidden="true"> 
    <title>checkmark</title>
    <use xlink:href="#icon-checkmark"></use>
  </svg> 
  Success! Your order went through.
</p>

The same would apply with a play button

<title>Play Button</title>

2 Likes

If I understand correctly, like this?


<div class="playButtonsc">
  <div class="playButtonc svoefm" data-audio="http://getradio.me/svoefm">

    <svg class="playc" style="margin:15px 36px;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" width="10" style="margin:15px 37px;" aria-hidden="true" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>


  </div>

  <div class="playButtonc soundpark" data-audio="http://getradio.me/spdeep">

    <svg class="playc" style="margin:15px 38px;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 39px;" aria-hidden="true" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>

  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">

    <svg class="playc" style="margin:15px 36px;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 37px;" aria-hidden="true" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>

1 Like

Back to this one though, it’s not a playbutton, it’s just decoration.

I know on images, alt=" " would be left blank in this case.

I’m thinking here, I just wouldn’t include title on this one?

<svg width="260" height="245" viewbox="0 0 260 245">
  <g class="line" >

<title>          </title>
    <line x1="4" y1="122" x2="29" y2="122"></line>
    <line x1="38" y1="122" x2="108" y2="122"></line>
    <line x1="83" y1="91" x2="188" y2="151"></line>
    <line x1="135" y1="61" x2="135" y2="182"></line>
    <line x1="82" y1="152" x2="187" y2="91"></line>
    <line x1="148" y1="98" x2="183" y2="38"></line>
    <line x1="187" y1="31" x2="199" y2="9"></line>
    <line x1="148" y1="145" x2="183" y2="205"></line>
    <line x1="188" y1="213" x2="200" y2="233"></line>
  </g>
  <g class="circle" >
<title>          </title>
    <circle cx="135" cy="122" r="24.5"></circle>
  </g>

</svg>

A title. This is a must if the graphic is not purely decorative. It’s the equivalent of the image alt attribute.

Then I wouldn’t include a title in that case.

I am not experienced with svg.
But I do learn from looking at other peoples code.

Looking at 2. Inline SVG I see no need for a title in every <g> element. It would become redundant.

My take on this would be one title per image.
Decoration images seem to still need a title for accessibility reasons. That makes since if they are inline svg in the html. That’s not the same as a background image in a css file, it never gets seen by a screen reader

See Tip #3 in this link that You posted earlier

<title>Green rectangle</title>

1 Like

This shows multiple titles:
https://www.w3.org/TR/2000/NOTE-SVG-access-20000807/

<?xml version="1.0"?>
<?xml-stylesheet href="svg-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title id="mainTitle">Network</title>
  <desc>An example of a computer network based on a hub</desc>
<!-- Draw text. -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
<!-- Use the hub image and its title and description information. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
  <!-- Use an external computer symbol. Scale to fit. -->
  <g id="ComputerA" transform="translate(20 170)">
    <title>Computer A</title>
 <use xlink:href="computer.svg#terminal" 
      transform="scale(0.5)"/>
  </g>
 <!-- Use the same computer symbol. -->
  <g id="ComputerB" transform="translate(300 170)">
    <title>Computer B</title>
 <use xlink:href="computer.svg#terminal" 
      transform="scale(0.5)"/>
  </g>
  <g id="CableA" transform="translate(107 88)">
    <title>Cable A</title>
    <desc>10BaseT twisted pair cable</desc>
    <!-- Draw Cable A. -->
    <path d="M0,0c100,140 50,140 -8,160"/>
  </g>
<!-- (and the other two cables) -->
</svg>

And here:

Between the element g’s

<figure>
  <div>
    <svg>
      <title> </title> 
      <desc> </desc>
      <defs> </defs> 
      <g aria-hidden="true">  
        <g (as needed)>
        <paths> 
        <text> </text>  
        </g>  
      </g> 
    </svg> 
  </div> 
 <figcaption> </figcaption>
</figure>

Yeah, that looks like it could be a schematic drawing where it would be important to title out each item. It’s all about the context!

No need to title each line or curve in a decoration image

That’s a <text> tag

1 Like

I just realized that.

Could you lend some input on this.

#4

If your asking whether or not to use the <g> grouping element, it looks like it is good practice to use it and makes things easier to manage.

From reading the mdn spec on it, looks like it helps with referencing and styling it’s children

3 Likes