how: add icons for tags (SVG files)

[Shay Shaked]

So I looked in here and while there's an explanation, it's a bit over my head. I didn't even know SVG files are vector-graphics files, that was my starting point. 

I opened one of the icon tiddlers to take a closer look, and then started playing by copy-pasting the html I saw in a SVG I created in the browser. Image shows big (TW must resize them, not sure where's that in the code). OK, saved tiddler in the $:/core/images/ library saved wiki.. nothing. it doesn't show. 

Before I any further on this tangant that prevents me from doing some more important Wikiing, thought I'd post the question here, you guys must have more experience. I use https://convertio.co/png-converter/ to change png to svg. 

Ya? thanks in advance. 

[Jed Carty]

What do you want to do with the svg images?

To import an svg you can drag and drop it into the wiki and it should be imported and act like any other image. SVGs can be resized without limits, that is one of the benefits of the format. They can have a default size set but it isn't like other image types that have a set pixel size. SVG images can be sized using css, you can set the container element size and the browser should automatically shrink the image so it fits. 

[Birthe C]

Hi Shay Shaked,

If you looked in the icon tiddlers, you saw that they are not complete. They have no content type, they have classes, width, height and viewport. Then look in the stylesheet.

To find other uses for svg see https://tiddlywiki.com/#Using%20SVG

Birthe

[TonyM]

SHay,

The Inkscape app can import and edit SVG files and export as PNG as well. 

I have attached a svg sourced on the internet. They can be dragged and dropped into a wiki (As can PNG Files) however they are often bigger than needed. 

When I use such an icon I thus set the width, and they scale to what I want eg

[img width=64 [chat-2.svg]]

However if you create an Icon Field in a tiddler and paste the image tiddler name, eg chat-2.svg the tiddler icon is automatically sized.

Now the reason I gave you this example SVG is it is possible to edit in Inkscape and generate multiple similer looking Icons, I tend to "import" one svg into another to create a Hybrid svg.

Regards

Tony

[Shay Shaked]

Thanks for the help guys. I'm sorry for the delay, you know, work gets in the way but I'm back here to try. 

What I did is look more closely at the made SVG files in TW, and realize that they are CSSed (it's a verb now..!) to be of a specific size. I resized the *image* to be that size (previously it was too big) and then I saw the whole thing. The original image seems to be too big to be a tag icon. 

Now, what I'm trying to figure out is how to tell TW that it has a new icon. When I extend the drop-down menu for icons in the tag editor, my new tag is not listed. Maybe I forgot to tag it or something, I did save it under core images though. Suggestions? 

[Shay Shaked]

Oh! So close...

was missing tag icon for it ($:/tags/Image), so now it DOES show. Kinda. It's not bold like the other icons, and the icon looks.. bad. doesn't change to white on dark background tag "pills" if you know what I mean. Also, the SVG shows next to the tiddler's title (if it's tagged with it) not sure that's normal. I thought it was only showing in the tag "pill"

[Matthew Lauber]

The svg showing next to the tag is normal.  A tag's icon is specified by putting a title into the the "icon" field on the tag tiddler (note: not the tagged tiddler the tiddler with the tag string as it's title).  Another part of the core also looks at this field to determine what, if any, icon should be displayed next to the title when viewing the tag tiddler.  Unfortunately, I don't believe there's a simple way to change this, short of overwriting the viewTemplate that displays it.  (Which depending on how interested you are in the TW internals, is not that difficult, and kind of enlightening) As far as the bold and white on dark, I'm afraid I can't tell you, but I'd look at the other svg icons and see if they have and css classes that might be involved.