Alt or tooltip texts for svg and img tag or $image widget

1

In the right bar, we have core images SVG with tooltip text. The svg is within a button tag.

Now, I want the same for a sipmple image (no action so no button there!). Normally, I would use img tag there. Which I could do with <$image> or directly with <img>. But I cbn’t have any picture on display in either case, only the alt text.

code sample:

<$image alt={{!!close-bar-icon-alt-text}} source="$:/core/images/spiral" tooltip="Show left bar menu"/> Ok? <img alt=alternative-alt-text title=hint src={{$:/core/images/spiral}}/>

Nothing shows but (alt text for $image) OK? alternative-alt-text

(this with unmodified core images!)

What’s wrong?

Note that, for tooltype text only, I can embed the svg tag within a <span> with a title attribute. This is a workaround since I already have the alt text, but a workaround without any image!

2

TW core icons don’t have a type assigned, because they are designed to be “transcluded” eg: {{$:/core/icon}} …

The <$image widget doesn’t know what to do with it since it has no type. Assigning the type: image/svg+xml wouldn’t be right, since the core icons are SVG fragments only.

Our icons only contain the bare minimum info, so everything can be styled using CSS

3

OK, this explain why general info about resizing svg was much more complex than what you explained me for TW! Yes?

4

As for having alt text and tooltype, and resizing thanks to your css help about it, I’ve done this nice macro.

sample code: <<icon spiral “an idea of continuation” “a wonderfull spiral”>>

The first argument is a name to be found in $:/core/images/ like here in the example, but if not it can be a title of a tiddler of the same kind (and if both are true, the core shadow tiddler will be used).

The second argument is the name of a tiddler containing the tooltip text or if doesn’t exist, the tooltip text by itself (this is the case here).

The third argument is simply the text for alt text. If it is not supplied, it will if necessary be replaced by an error message ‘Error: wrong icon name “”!’.

The code:

\define icon(name, hint, alt)
  <$set name=gfx select=0 filter="""[[$:/core/images/$name$]dump[name]is[shadow]] [[$name$]!is[missing]] +[first[]]""">
  <$set name=alt select=0 filter="""[<gfx>!is[blank]then[ ]else[$alt$]!is[blank]else[Error: wrong icon name "$name$"!]]""">
  <$set name=hint select=0 filter="""[[$hint$]is[tiddler]get[text]else[$hint$]]""">
  <span class="icon-title" title=<<hint>>><$transclude tiddler=<<gfx>>/><<alt>></span>
  </$set></$set>
\end

and within a css tiddler something like:

.icon-title svg {
  width: auto;
  height: 1em;
}

Many thanks for your very valuable help @pmario and your patience!!!

5

but there remain a question: what is missing to these core svg tiddlers to get a true svg that <img> could use? Because it would allow for a really accessible code. My macro shown above is a bit lame for blind people as it has no proper alt attribute and the title is not on the image. A bonus would be a macro making the transformation, something like <<real-svg "$:/core/images/stamp">> for instance.

6

The answer is here;

  • in wikitext of course
  • The version issue is only to use svg as a favicon
;Using icon image SVG tiddlers as a favicon
:requires ~TiddlyWiki version 5.1.23+

# Clone an existing icon svg tiddler and rename to $:/favicon.ico
# After the opening "svg tag" insert `xmlns="http://www.w3.org/2000/svg"`
# Set the tiddlers type to `image/svg+xml`
# It now works as a Favicon.

Please check it work in the img but I believe it does.

7

Hi @jypre SVG can be used in two different ways in HTML documents: as an embedded image, or as inline SVG. The difference is covered here:

https://tiddlywiki.com/#Using%20SVG

The core uses inline SVG because we can then use CSS to restyle the images which isn’t possible using an embedded image. That’s why TW’s toolbar buttons change colour with the palette.

8

Inline SVG can still use the “title” attribute on a wrapping DIV or the SVG element itself.

9

See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img#description

IMO if you add role=img aria-label="Description xxxx" to the template-wrapper it should be OK for screen readers

10

Yes! I had forgotten about ARIA I have never used it so far, but now I have a good use of it.

11

@TW_Tones : Tried in 5.1.23 node.js and it works!

If I understand you correctly, adding xmlns="http://www.w3.org/2000/svg" to the svg tag is the only thing needed to get a fully functional SVG from core/images SVGs?

12

yes, but in TW context if you convert them to an IMG tag you loose the ability to style them with CSS.

13

Add the image type, field.

But to address what Mario said I usually clone, make the changes and rename it and consider it a different image. The most common use for me is cloning it to $:/favicon.ico

14

Inversely, if I get a regular svg image and copy it (its source code) to a tiddler, without any type, and remove the xmns="…" from the svg element, then I get an “ordinary” tiddlywiki icon all the same a core icon?

15

It depends on the SVG image concerned. They can support a few features that do not work in the same way when using inline images. For example, gradient fills are normally defined via the ID of an element within the SVG image. As an inline image, the image shares the same ID namespace as the rest of the page, so there can be collisions.

Again, this isn’t TiddlyWiki specific, and I’d recommend consulting SVG resources if you want to go deep into this stuff.

16

I’d prefer avoid svg internals. Then, should a problem arrive, I would know where to look. Anb better avoi complex SVG.

Thank you @jeremyruston .