Page toolbar icon: how to darken on hover?

#1

HI folks,

I just added a new page toolbar button, using an SVG from Bootstrap Icons. It looks nice but I’d really like to get it to go light or dark gray depending on hover, like the other toolbar icons. Is there something I need to do to the SVG to make this happen? To the button widget?

Thanks,

Ed

#2

Have you tried to mimic, say, $:/core/ui/Buttons/new-tiddler to replicate the implementation? I would assume that if you did so, you would end up with the same behavior… although perhaps you’d also have to add the class tc-image-button to the SVG, as in $:/core/images/new-button.

But I am guessing, so take this with a grain of salt.

#3

The crux here is that SVG images come in two forms:

  • Ordinary SVG images that are embedded in HTML with the img tag. They are “replaced content” in HTML terms, which means that the display of the image is not affected by styles set in the containing document
  • Inline SVG images are fragments of SVG embedded directly in HTML, with no img tag needed. The advantage of inline SVGs is that they are affected by document styles

There’s not much documentation on the web about inline SVGs. This blogpost covers some of the details.

In general, there is no reliable way to automatically convert an ordinary SVG image into an inline SVG image because there are many features that can be used in SVG images that can’t be represented in an inline SVG (for example, filters, custom fill patterns or any feature that requires use of an id attribute).

The process I use is as follows, but these steps don’t capture the trickiest part, which is understanding which SVG features cannot be used in this context.

  1. Prepare the image in a vector editor, using only the colour #000 (ie black)
  2. Process the image with SVGOMG - SVGO's Missing GUI to (amongst other things) inline any styles
  3. Open the file in a text editor and remove any fill="#000"attributes
4 Likes
[Crowdsource] Using Inkscape SVG's with TiddlyWiki
#4

I think you forgot to convert lines to outlines, so they can be filled. IMO that’s the part most users don’t understand, that all TW icons are outline based, so they can be filled.

#5

Thanks very much, Scott, Pmario, and Jeremy. The bookmark I grabbed was definitely line-based instead of outline-based, that was an issue.

I just downloaded Inkscape and drew myself a new icon, making sure it was outline-based.

I ran it through that SVGOMG page.

I’m still not seeing it darken on hover (actually it’s dark all the time).

This is my bookmark toolbar code:

\whitespace trim
\define new-bookmark-action()
<$action-sendmessage $message="tm-new-tiddler" title="New Bookmark" tags="Bookmarks [[Read Later]]"/>
\end
<$button actions=<<new-bookmark-action>> tooltip="Add a new bookmark" aria-label="Add Bookmark" class=<<tv-config-toolbar-class>> >
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
{{bookmark-toolbar-icon.svg}}
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">
<$text text="Add Bookmark"/>
</span>
</$list>
</$button>

And this is the SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="210" height="297">
  <path d="M181.103 4.734a66.257  2.753-19.797 2.621-44.094  [... big pile of numbers snipped for brevity...  it's just one path, that's all it is.. ] 88-2.076-5.101-2.136a3.204 3.204 0 0 0-.353-.01z" />
</svg>

I snipped the fill style out of it, and a stroke-width style.

I’m not sure what’s left to simplify…unless there’s something about that path that’s not cricket. (I could paste the whole path if that’s helpful)

#6

Hi @edheil – the tiddler bookmark-toolbar-icon.svg should have its type field left blank or set to text/vnd.tiddlywiki.

#7

That did the trick! Thank you! So the fact that it was an SVG tiddler type changed the way it was displayed?

#8

That’s right. Using the SVG type causes tiddlers to be displayed with the HTML <img> tag. With inline SVGs we need the SVG elements to be transcluded directly.

#9

Ah, that makes total sense, now that I know a little more about how this works!

1 Like