svg sprite: <title> to the sprite or to the place of import?

user8620575 0
Viewed 31

I have an svg sprite and I import icons using <svg> and <use>.

I'm wondering if it's generally better to put the title in the import point or in the svg sprite. If I think one title assigned to an svg icon in a sprite can semantically fit all use cases, is it ok to leave it in the sprite?

And what if I have one title in the sprite and add a second more accurate title at the point of import - is that still acceptable? If not, I would end up with some icons having a title only in the sprite and some only in the import point.

Svg import point:

<svg>
    <title>Call us</title> // PUT TITLE RATHER HERE?
    <use href="../resources/icons/sprite-all.svg#call"></use>
</svg>

Svg sprite:

<svg width="0" height="0">
    <symbol id="call">
        <title>Call us</title> // OR PUT TITLE RATHER HERE?
        <path d="M39.977 (...other values)"></path>
     </symbol>
</svg>
svg html
1 Answers

It is a question of the semantics of your use case where you define a <title>. There is only one thing you should be very carefull about: if you define a title in the symbol and where the icon is quoted, the result could very easily not be what you expect.

The symbol, at the time of being inserted, is treated as a (shadow) child element of its <use> element. This means, the icon together with its title, is a child of the surrounding <svg> element and its title. The "child" title is triggered to be shown when a pointer hovers over the icon shape (the black circle), but the "parent" title is active when over the content box of the parent (the yellow square).

If the <title> is defined for the <use> element (black circle over green square), the "parent" title would also only be triggered over the icon shape, but is overridden by the "child" title, and it's never shown.

In both cases, the generalized point of definition title overrides the specialised point of use title. There is only one way to avoid this, and that is to suppress the "child" title by setting pointer-events to none. But be careful, the "parent" title then must be set on the <svg> element (the red square).

Even more, as a CSS operation, this has no effect on assistant technologies. For them, you have to explicitely hide the icon with aria-hidden="true".

<svg width="0" height="0">
  <symbol id="icon" viewBox="0 0 50 50">
    <title>Point of definition</title>
    <circle cx="25" cy="25" r="20" />
  </symbol>
</svg>
<!-- conflicting titles -->
<svg width="100" height="100" style="background:yellow">
  <title>Point of use</title>
  <use href="#icon"></use>
</svg>
<!-- specialized title overridden by the generalized -->
<svg width="100" height="100" style="background:lightgreen">
  <use href="#icon">
    <title>Point of use</title>
  </use>
</svg>
<!-- generalized title hidden in favor of the specialized -->
<svg width="100" height="100" style="background:lightpink">
  <title>Point of use</title>
  <use href="#icon" style="pointer-events:none" aria-hidden="true"></use>
</svg>

ccprog0
Related