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.
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
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.
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:
Export as a “Plain SVG” … that gets rid of some of the Inkscape-internal styles that help with reimporting saved SVGs.
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.
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.
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.
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.