Investigation: SVG in TW

[@TiddlyTweeter]

TW works well with SVG. Its well understood & integrated into it.

Two things I don't understand ...

• WHY is the normative icon set at 22pt (points) rather than 22px (pixels)?

• Am I right in thinking that the viewBox setting of "0 0 128 128" makes an ultimate SVG viewport 28% bigger than the content overall, with the svg content auto-centred?

In beginning to make images for TW I'd like to better understand  the default approach for what become interface icons.

Best wishes
Josiah

[Danielo Rodríguez]

It's definetively confusing. Every time I have to deal with an SVG icon in tiddlywiki I have the same doubts. At least I know that the pt unit is a relative unit, Wich is better than an absolute one like pixels

[PMario]

On Tuesday, July 25, 2017 at 1:20:58 PM UTC+2, @TiddlyTweeter wrote:

TW works well with SVG. Its well understood & integrated into it.

That was one of biggest changes between TWclassic and TW5.
SVG was specified and implemented into browsers, for a very long time already, before developers started using them. So the technology can be expected to be stable. ... and SVG has some advantages over font-based icon sets. ...

 

Two things I don't understand ...

• WHY is the normative icon set at 22pt (points) rather than 22px (pixels)?

I wouldn't interpret too much into those settings. ...

 - 1 pt is 1/72 inch mainly used for printing
 - 1 px basically is 1/96 of an inch, if you have a 96dpi display. .. Which was true for a long time. .. but now we have hiDPI screens, which only means, that 96px is aproximately 1 inch

see. https://developer.mozilla.org/en/docs/Web/CSS/length#Absolute_length_units
especially:

Some specific examples:

• 1in is always 96px.
• 3pt is always 4px.
• 25.4mm is always 96px.

 

• Am I right in thinking that the viewBox setting of "0 0 128 128" makes an ultimate SVG viewport 28% bigger than the content overall, with the svg content auto-centred?

SVG internally defines it's coordinate system based on the viewBox params and the units used in width and height. Most SVG drawing programs are mainly used for printing, so I think, it's just the default value, that Jeremy's program used, when exporting svg files.

I'm not 100% percent sure, why it is 128 units, but I guess it comes from bitmap-icon settings in most OSes. They start with 16x16 px for favicons and go up to imo 512x512 of even higher. So you see its a multiple of 16.

So it makes sense to produce vector graphics based on multiples of 16 too, since there will be less scaling issues, introduced by math, if you export bitmap-images ... just some guesses here.

 

In beginning to make images for TW I'd like to better understand  the default approach for what become interface icons.

If you use the TW default settings, you'll get relatively good results, since they are battle-tested and the base themes work well with them. ...

have fun!
mario

[@TiddlyTweeter]

Thanks PMario

It makes sense. Thank you. I do think SVG & TW are a very good fit & it was the right choice to go that way for interface elements.

For my own stuff, rather than make loads of individual SVG Tiddlers I was thinking of using the <symbol> method to hold many related SVGs in one Tiddler. This enables using the ViewBox to display them in an easier way than other approaches. And you avoid loading a TW up with zillions of individual image tiddlers which become hard to manage.

However, there is an issue, perhaps.

The easiest way to access "symbols" within an SVG (i.e. a discrete image within a "wrapper SVG") is to use ID's. But I suspect this may conflict with TW basic working? There is another method using the co-ordinate system of viewport and viewBox but it starts getting very complicated.

Before I start trying to work out details of how to do this I'd appreciate any comments you may have.

The "reference system" looks like this:

A <symbol> definition example within an SVG (its largely independent of its parent) ...

<symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
</symbol>

The HTML call to it is, in theory, easy ...

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

Best wishes
Josiah

[@TiddlyTweeter]

Ciao PMario & all

I've partly answered my own question. It will work using ID's in TW but only so long as the Tiddler containing the source SVG is also open. Once its closed the href's from any other Tiddler to it expire. I don't have the skill to figure out how to programmatically deal with this or even if you can.

BUT I'm wondering if there is a way to transclude a multiple "symbol" SVG into a tiddler so its hidden but still fully "alive". That might work for the use case since the "symbol set" in only for use in one Tiddler a time anyway. Just not sure what would happen if you had two Tiddlers open both of which had the same "symbol set" SVG ... In effect having the same ID in two places at once (albeit with identical content).

Best wishes
Josiah

[PMario]

On Thursday, July 27, 2017 at 11:26:28 AM UTC+2, @TiddlyTweeter wrote:

I've partly answered my own question. It will work using ID's in TW but only so long as the Tiddler containing the source SVG is also open. Once its closed the href's from any other Tiddler to it expire. I don't have the skill to figure out how to programmatically deal with this or even if you can.

Yea ... I did play with this setting on TiddlySpace some years ago. So I wasn't sure, if this still happens. ..
 

BUT I'm wondering if there is a way to transclude a multiple "symbol" SVG into a tiddler so its hidden but still fully "alive". That might work for the use case since the "symbol set" in only for use in one Tiddler a time anyway. Just not sure what would happen if you had two Tiddlers open both of which had the same "symbol set" SVG ... In effect having the same ID in two places at once (albeit with identical content).

You can add those tiddlers at the end of the story and hide them. ... BUT ... You'll probably experience a lot of browser quirks. ... Some browsers also add the "hidden" attribute to the referenced content. ... So you won't see it. .. .Some browsers don't. It may also create unwanted white space on some browsers.


Causing too much problems, I did abandon this approach. ... For me it wasn't worth the trouble and it doesn't save space anyway.


have fun!
mario

[PMario]

Hi Josiah,

<symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
</symbol>

Working with a viewBox like this will cause trouble in the future. ... you'll need to start at 0 0  so eg: 0 0 100 48   otherwise your content will need to be transformed already, to match the viewbox. ... This creates unnecessary svg elements and it makes batch optimizing the icons a nightmare.

Depending on your content, you may want to use a symmetrical viewBox, which makes manipulation with javascript math much easier.

Just some thoughts.

have fun!
mario

[@TiddlyTweeter]

Ciao PMario

I may need abandon the whole idea of seeking to extract BITS of SVGs. The <symbol> way is easy, but in TW creates complexities because of IDs.

In a way its SAD, instead of one SVG holding 48 images I have to burden TW with 47 extra tiddlers. That will take more space and more management. And an admit of defeat in the jaws of victory.

Sad,
Josiah

[Thomas Elmiger]

Hi Josiah,

I hide my alerts in a section in the top right bar that is 1px x 1px and did not notice any side effects until now.

See https://tid.li/tw5/tdn.html#%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Freminders.css:%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Freminders.css%20%5B%5BDraft%20of%20'%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Fdisplay'%5D%5D

for inspiration :)

Good attempt anyway!
Thomas

[Thomas Elmiger]

Better link: https://tid.li/tw5/tdn.html#%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Fdisplay:%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Fdisplay%20%24%3A%2Fplugins%2Ftelmiger%2Freminders%2Freminders.css

Open …/display to see details like class used for the section.

[@TiddlyTweeter]

Ciao Thomas

I'm not sure that response is in the right thread :-)

But, hey its nice to hear from you!

I thought you were on holiday?

Tchüss
Josiah

[Thomas Elmiger]

Well, I was trying to address your problem stated some posts ago: «It will work using ID's in TW but only so long as the Tiddler containing the source SVG is also open. Once its closed the href's from any other Tiddler to it expire.»
The right top bar is always open … and a 1 by 1 px tiddler is not really hidden so it is always available :–)
If I were you I would add the master-source-SVG-tiddler to the top bar in this way.

Hope that helps
-t

[@TiddlyTweeter]

Ciao Thomas!

Now I understand! Thankyou.

Its a smart trick i never thought of.

Josiah

[@TiddlyTweeter]

Ciao PMario and all

UPDATE #1

A way to solve my issue, I found, thanks to Stephen Kimmel, is to put the whole SVGs into a Data Dictionary tiddler. One SVG per line. I already did it for 360+ SVG icons in one Dictionary Tiddler. It works very well and saves clogging up the TW with hundreds of Tiddlers.

I was very surprised on the performance extracting and using them from the DD, which is excellent.

Best wishes
Josiah

[@TiddlyTweeter]

PMario

UPDATE #2

You are right. Playing with the viewBox, I found its most reliable to do all modifications in the SVG. Using a Data Dictionary its easier to create several versions of the same SVG with different viewBox settings than try to manipulate them via CSS externally. Its adds slightly to TW sizing, but its manageable.

Josiah

PMario wrote:

[Danielo Rodríguez]

Hello Josiah

El lunes, 31 de julio de 2017, 14:22:17 (UTC+2), @TiddlyTweeter escribió:

 It works very well and saves clogging up the TW with hundreds of Tiddlers.

 I don't have an opinion about this, but: what is the bad thing about having hundreds of tiddlers ? That is the nature of tiddlywiki, and there are some scenarios where it MAY be desirable. Lazy loading can be one of such scenarios, where you only load the tiddlers you need, and not a big blob containing them all. Of course, in some cases loading all the icons upfront may be a good thing.

 

I was very surprised on the performance extracting and using them from the DD, which is excellent.

This may be because TW keeps a cache of recently requested tiddlers. 

[@TiddlyTweeter]

Ciao Daniello

Daniello: what is the bad thing about having hundreds of tiddlers ?

Nothing per se. I agree with you.

This a specific issue of wanting to use SVG libraries with hundreds of SVGs. For the specific project its easier to use Data Tiddlers, I think. Its also much more compact than using individual Tiddlers.

Its for a specific app.

I would not myself use this approach for normal icons, for instance.

Its rather to be used as a repository for easier lookup of many icons and get the code of one which you then make into a singular Tiddler.

I was very surprised on the performance extracting and using them from the DD, which is excellent.

Daniello: This may be because TW keeps a cache of recently requested tiddlers.

All I know is its performance delivering over 350 SVG on-screen instantaneously was very impressive to me.

Buongiorno
Josiah