A little change for resizable core images SVG

#1

I needed to resize standard icons from the core. Since they are svg, it is a little trickier to do than for rastport images. Happily, they already have a viewport tag within the svg element.

But it requires to change a little bit the svg code, for an other requirement is that either the height or width tag (but not both) of the svg element be set to "auto".

And then, you still have to set the desired other dimension inside that svg element.

Since icons displayed within the same tiddlers would have the same dimensions, I opted for using a icon-height field for that. It also requires that the icon tiddler type be set to tw5.

Here is the old start of those svg tiddlers in $:/core/images/:

<svg width="22pt" height="22pt" class="tc-image-chevron-left tc-image-button" viewBox="0 0 128 128">

and what I propose instead:

<svg width=auto height={{!!icon-height}} class="tc-image-chevron-left tc-image-button" viewBox="0 0 128 128">

with an icon-height field valued at 2em to get current size (or about for I did not measure).

I think it would be a good idea to have these change in the standard core of tiddlywiki.

If you do not agree with these changes, perhaps would you agree to set these tiddlers type to svg graphics instead of undefined. It would make for a better tiddlers names in server mode.

#2

There is no need to change something in the core. SVGs are perfectly styleable with CSS.

create a tiddler named: icon-template and add this:

<style>
.my-icon svg {
  width: auto;
  height: 4em;
}
</style>

<span class="my-icon"><$transclude /></span>

Call your icons with eg: {{$:/core/icon||icon-template}}

And you are good. See the attached file: show-icon-with-template.json (364 Bytes)

It will also be possible to move the <style> section into a new tiddler tagged: $:/tags/Stylesheet to create a global stylesheet. … But I thought it could also go with the template, since all the elements are easier to edit if they are together.

See: https://tiddlywiki.com/#Transclusion%20with%20Templates

1 Like
Resize Core Icon
#3

@PMario wrote:

There is no need to change something in the core. SVGs are perfectly styleable with CSS.

Indeed, thank you for the tip! The doc I looked at today with a duckdukgo was a bit old and mostly over-complicated or so. The method I described was my attempt at making the most out of it.

And yet, what about setting core images type as image/svg?

#4

See the reply at: Alt or tooltip texts for svg and img tag or $image widget - #2 by pmario

It wouldn’t be right, since we stripped most of the info that make an SVG file a valid SVG-image-type.