Styling and sizing images as buttons

[TonyM]

Folks,

Have you skills in using png and svg in Tiddlywiki, I could do with your help

Background

• I use images png and jpg and most commonly svg's built in and imported to my wiki. 
• My main use is as buttons or icons. I would like to list place both svg and other images in the icon field or similar and use them in image buttons.
• In some cases I would like to use 72x72 and other 22px x 22px as seems to be standard in the built in icons.
• I have a subscription to a large icon library and hope to package some to make up for the "missing" icons. If licencing permits I will share these.

The problem

• I can't find a way to set the dimensions reliably when I display an image, ideally independently of the image type
• I would like a small number of predefined sizes 
• I find identifying the style or classes used already tiddlywiki difficult or identifying the special variables in use for this.
• What are in fact tiddlywikis default sizes?

Any guidance would be greatly appreciated.

Thanks in advance

Tony

[TonyM]

Folks,

I am bumping this request hoping someone can help. So far I have spent some hours trying to ensure I never spend hours again. :(

The following is the best I hacve so far

{{$:/core/images/timestamp-on}}


<div style="width: 2em; height: 2em;">
{{$:/favicon.ico}}
</div>


<div style="width: 2em; height: 2em;">
{{Motovun Jack.jpg}}
</div>


<div style="width: 2em; height: 2em;">

{{$:/PSaT/buttons/archive/add.png}}
</div>


<div style="width: 2em; height: 2em;">
{{$:/PSaT/buttons/archive/archive.svg}}
</div>

However the first and last two fail because it only ever displays the size set inside the the SVG tiddler.

I would like to find a way that works with all image types consistently and if not create a macro that will handle what ever image tiddler it is given and set a given height and/or width.

A macro that can replace the customary transclusion of the image tiddler such that we can also say

<<macroname {{!!icon}}>>

etc

Any css or svg experts here?

Regards

Tony

[PMario]

Hi Tony,

If you open the eg: chevron-left,  you'll see, that it actually contains a "hand crafted" SVG file.

1st rule -> Remove the SVG overhead!

 - It only contains the pure <svg> part.

 - Most additional parameters are missing - eg:

    - <?xml version="1.0" encoding="UTF-8"?> wrapper element

    - the whole meta data block

Depending on the SVG editor software you use and how you save the file, an SVG file can contain a lot of editor specific stuff, that is irrelevant for TW.

The overhead can be significant, in terms of tiddler size and also usability within TW.

2nd rule -> Use "outline" paths, so they can be filled!

If you inspect the chevron, you'll see, that it contains an outline path. ... The code would be smaller, if it would only contain 2 simple lines. ... The advantage of the outline is, that we can use CSS fill style setting to change the SVG color. eg:

The SVG has a class tc-image-chevron-left

which you can use to change the fill color.

.tc-image-chevron-left {

  fill: green;

}

3rd rule --> Remove all "hardcoded" styling attributes, so they can be defined using CSS!

The important part now is -- We have to remove every fill-attributes from the paths. ... If it would be there, it would always win.

Apply tc-xxxxx class definitions instead, if you need to style icon elements.

4th rule --> Use proper default values

If you start a TW SVG make sure you use:

 - width="22pt" height="22pt"

 - viewBox="0 0 128 128"

5th rule --> Use a proper SVG editor

Depending on the editor, SVG files can contain a lot of bloat. ... So make sure, you have a save option similar to: Optimized SVG  in InkScape.

You still have to remove some stuff manually, but the editor specific crap is gone.

6th rule --> Optimize the SVG for size

You can use: https://jakearchibald.github.io/svgomg/ ... It has a lot of parameters, you can play with, to optimize the image size, without loosing quality.

7th rule --> Don't embed big JPGs or PNGs

 - They only make your file big.

 - If you must use them, ... don't cry, if it causes problems.

 - For me big is >100 kByte    <----   see k for kilo ... not M for Mega !!!!

 - Pixel images can be optimized too!

That's it for the beginning

have fun!

mario

[TonyM]

Mario,

Thanks so much for your comprehensive info on svg files. I will look at each against some key images.

If I want to resize svgs up or down from 22pt in place like I can with the others will these better svgs scale?

Thanks
Tony

[PMario]

On Wednesday, June 5, 2019 at 11:20:33 AM UTC+2, TonyM wrote:

If I want to resize svgs up or down from 22pt in place like I can with the others will these better svgs scale?

SVGs (scaleable vector graphics) are meant to be scaled. They should scale well. ... Since our button icons are designed for small scale, they don't contain a lot of details. ...

So if you need more details you'd probably need to modify them.

-m

[PMario]

Hi,

If you need bigger default values use:

.tc-image-button {
  width: 50px;
  height: 50px;
}

No need to modify the SVGs.

-m

[@TiddlyTweeter]

Excellent thread!

Worth noting is on SVG their very flexibility is often daunting.

A common confusion I myself made at first is between SVG as an HTML element and SVG files (which can also be "virtual" files in TW itself.) Same result, different method.

Its something I think that needs more documentation. Not necessarily in TW release. But more info in general is needed I think.

In particular the way scaling works in SVG is radically different that pixel based images. Its easy. But you need to grasp how height & width work in relation to the SVG ViewPort setting.

I suspect pretty soon PMario will end up writing the same clarifications again because of lack of docs that explain how SVG in general works.

Thoughts.

Best wishes

Josiah

[PMario]

On Thursday, June 6, 2019 at 3:45:52 PM UTC+2, @TiddlyTweeter wrote:

...

I suspect pretty soon PMario will end up writing the same clarifications again because of lack of docs that explain how SVG in general works.

I'll probably just post a link to this one ;)

-m

[PMario]

On Thursday, June 6, 2019 at 3:45:52 PM UTC+2, @TiddlyTweeter wrote:

...

In particular the way scaling works in SVG is radically different that pixel based images. Its easy. But you need to grasp how height & width work in relation to the SVG ViewPort setting.

The viewBox actually isn't relevant for display width and height. 

The viewBox setting is just an initial definition, to normalize the coordinate system. Every other x/y point is relative to this base setting. ... The smaller the numbers here, the more digits after the decimal point, are needed to maintain precision.

For our icon size SVGs (0 0 128 128) is OK and 1-3 decimal digits should be enough, for most icons. ...

see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Much more details can be found in the SVG spec.

SVG specification started 1999. So it is already 20 Years old. The standard is mature and well understood. ... Browser vendors started to implement support in ~2008. ...

For site creators SVG became a real option in the recent years. Since the number of devices with different screen sizes and resolutions increased exponentially.

just some thoughts.

have fun!

mario

[@TiddlyTweeter]

PMario wrote:

The viewBox actually isn't relevant for display width and height. 

The viewBox setting is just an initial definition, to normalize the coordinate system. Every other x/y point is relative to this base setting. ... The smaller the numbers here, the more digits after the decimal point, are needed to maintain precision.

Agreed. But if you start messing about with it you may well have trouble :-).

Even though SVG has been around for yonks (long time) on first use it still takes time to "get"? 

For our icon size SVGs (0 0 128 128) is OK and 1-3 decimal digits should be enough, for most icons. ...

see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Much more details can be found in the SVG spec.

Just a footnote. Josiah. 

[PMario]

On Thursday, June 6, 2019 at 5:48:56 PM UTC+2, @TiddlyTweeter wrote:

PMario wrote:

The viewBox actually isn't relevant for display width and height. 

The viewBox setting is just an initial definition, to normalize the coordinate system. Every other x/y point is relative to this base setting. ... The smaller the numbers here, the more digits after the decimal point, are needed to maintain precision.

Agreed. But if you start messing about with it you may well have trouble :-).

That's right. q:-)

 

Even though SVG has been around for yonks (long time) on first use it still takes time to "get"? 

If used as a standard image, it's like any other image. Users just don't care. The browsers know how to deal with it :) ... But with TW we use it in a "special way".

 - We want (our) svgs to be small in file size.

 - They are designed to be relatively small in diameter, since they should be part of buttons.

 - We want to modify them using CSS classes.

    - We want them to be styled by our "end-users"

 - They should look good with all screen sizes and resolutions

The cool thing is: All of these requirements can be met with svgs.

have fun!

mario

[@TiddlyTweeter]

PMario wrote:
...with TW we use it in a "special way". ù

Right.

Interesting issue.

TW usage of SVG is rich--as rich as all its methods.

In core documentation that would be too much, I think, off topoic. But in practical usage it matters to understand it if you need to?

Is this thread enough already? Maybe. But it never mentioned "sprites" -- (a posh name for using parts of an SVG) that will happen.

Josiah

[David Nebauer]

Hi Mario. I may not be understanding this discussion. I want to enlarge the ViewToolBar and Sidebar buttons in the tiddlywikis on my mobile phone to make them easier to press. I tried your solution -- of altering .tc-image-button using a stylesheet tiddler -- in both standalone and nodejs version 5.1.19 wikis. The ViewToolBar and Sidebar buttons did not change in size. I didn't look too hard for anything that did change, but noticed the magnifying glass icon to the left of the title of the $:/AdvancedSearch tiddler was enlarged.

Should this have worked on the ViewToolBar and Sidebar buttons?

Regards,

David.

[PMario]

Hi David,

You can try: .tc-tiddler-controls button svg

My CSS was meant as an example, if you transclude the icons into a tiddler. ...

-m

[Mohammad]

Added to TWScripts with some examples.

[TonyM]

Thanks all for your suggestions. I will trawl through and see if I can simplify this.

I want to know how to prepare svgs I import so I can use them as buttons standard big and little, as a tile or an actual image. I know favicon must be a bit map and I convert some svgs to long for this. However I would like to use of jpeg etc the same way as svgs. Even if I have a macro to handle differences if necessary.

I would like to have a single way I can use any image type using a single height and or width. And clearly understand what the settings need to be to set buttons also in tiddlywiki standard buttons.

Ideally I will not need to create a different tiddler for each size application.

To be honest I am sick of always stumbling with image sizing.

Regards
Tony

[David Nebauer]

Mario, that worked an absolute treat! Thank you very much -- it really makes it easier to use TW on small form factor devices.

Regards.

David.