[Crowdsource] Using Inkscape SVG's with TiddlyWiki

[TW_Tones]

In this discussion TiddlyWiki 5 core icon development - #16 by duarte.framos the use of Inscape was raised.

Inkscape is a free and open-source vector graphics editor; it can be used to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos and complex paintings. Inkscape’s primary vector graphics format is Scalable Vector Graphics (SVG), however many other formats can be imported and exported

There are specific details we need to understand to integrate SVGs you can edit or make in incscape and use in tiddlywiki. So I thought what if we study and share this in the community and crowdsource learning all about it.

• Share your experience and experiments here
• Lets discuss it until we overcome the issues and ultimately document it for all.

The following is a list of issues we need to address at a high level, if you identify more feel free to add to this list.

• Creating SVG then using them in tiddlywiki
  • As illustrations
  • As buttons
• Importing a TiddlyWikli icon or one sourced at TW Icons v1.10 — A large collection of icons for TiddlyWiki into inscape
  • Them modify or enhance
  • Then using them in tiddlywiki as above
• Creating SVGs that once in tiddlywiki then can respond to content or parameters in TiddlyWiki.
• Creating SVG favicons and when to use raster formats like png
• Acknowledgements and licencing
• Changing color programmatically
• On Hover in toolbars

If you are interested, please take on one of these challenges and let us know how you go, including the problems you face, and we can help each other.

[TW_Tones]

On the Size of your SVG’s

It is useful when creating SVG’s and modifying core tiddler to give a height and with of 1em, a CSS relative unit, Relative to the font-size of the element (2em means 2 times the size of the current font) then;

• when used in text it fits in with the font size,
• and still works with the toolbars

Other relative lengths may be used when using an SVG for a diagrams or illustration such as vw/width and vh/height which are Relative to 1% of the of the viewport

[TW_Tones]

I think I will build an exporter to export an SVG tiddler to an SVG file, for example, basically tiddlername.svg (if not already a .svg) containing only the text field, containing the SVG “code”.

• In this case a more generic export as a text file with the tiddlername (including extension being used) will be sufficient for svg files and many others.
• For simpler tiddler names I will get it to honor a file-type field containing the extencion if available.
• If possible being able to export a batch as separate files would also be helpful. Perhaps an extra Advanced Search Filter button?

Any Icon obtained from TWIcons for example can be exported this way and opened with Inkscape, wherein you can modify it, change colors etc… save it (with a new name) , and import/drag and drop on a wiki.

Now I need to work out how, when such an SVG is used in the view toolbar, or page controls we can get the default on hover indicator.

[mwiktowy]

Inkscape is great but it does embed a ton of extra cruft that may or may not interfere with some of the CSS that you want to apply. Two things I have done in the past:

1. Export as a “Plain SVG” … that gets rid of some of the Inkscape-internal styles that help with reimporting saved SVGs.

2. Pass the saved SVG through an SVG delinter like: https://www.svgminify.com/

Less cruft to get in the way at that point and simpler to identify the path elements that you want to apply styles to or cut and paste into existing SVGs.

/Mike

[TW_Tones]

Thanks for that. I wonder if we can have this utility embeded into Inkscape or used in batch to improve the workflow.

• is this enought to look for a new SVG editor?
• perhaps we could make a cleaner in tiddlywiki
• can we determin what the extra overhead is and is it realy an issue.

[Thomas_Chuffart]

To clean the Inkscape SVG files, Jeremy uses svgomg a well designed svg cleaner.

And in this post, he talks about different kind of SVG inside html documents :

Page toolbar icon: how to darken on hover?

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 …

[TW_Tones]

Do these cleaners result in less customisability once they become SVG tiddlers?

[Thomas_Chuffart]

About SVG, Telumire has some tricks :

@telumire

Tools to create your own icons

• SVG: inkscape. You can often shrink down the svg by converting everything to path: ctrl+A , Path > Object to path , Path > Combine. You can try to simplify the path a bit with Path > Simplify to get ride of unnecessary nodes. Make sure the viewbox is framing your drawing (Edit > Resize Page to Selection), then save as “optimized svg”.
• Optimize your svg: svg-path-editor , svgomg
• Create/edit Png/Jpg icons : https://www.photopea.com

[pmario]

@mwiktowy

Export as a “Plain SVG”

You can use “Export As” → Optimized SVG, which allows you to remove all the InkScape specific meta data.

Then you should use SVGOMG as Jeremy described to optimize file size further.

Then you can manually remove some XML settings that are not needed for inline SVG icons.

Every TW SVG starts like this:

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

which defines

• the default weight and height.
• the default icon classes, that are used for styling in TW
• the “viewBox” is 128 x 128 in size

Those parameters should be the save for every SVG that is used as an icon.

[pmario]

The cleaners make it possible, to remove the “editor-app” specific meta data, that is usually stored in the the SVGs, so they are smaller.

This also means, that you always have to keep the “original” “source of truth” somewhere else. The meta data is used in eg: Inkscape to name layers and other configurations.

TW icons are always “hand optimized”, to make it possible to style them with classes.

TW icons have to be “outlines” so the “fill” attribute can be used for styling.

[duarte.framos]

Indeed default Inkscape SVG files include a lot of extra information related to editor data, like layers, user interface dialogs, export options, etc., which is useful for work files but undesirable for web use.

You can shed a lot of this cruft by exporting as Optimized SVG, also available for batch export. To take advantage of this functionality you may have to enable it in Edit > Preferences > Input/Output > Show all outputs in Export Dialog. as described on the my Stack Exchange post

Further optimization and minifying can be achieved with the tools you mentioned. I didn’t know svgomg or https://www.svgminify.com/, but I’ll take a look into them.

[pmario]

@duarte.framos

I didn’t know svgomg

As far as I know svgomg also removes transformed elements and recalculates strokes to the main coordinate system, which makes the svg code much cleaner and smaller.