Is there a beginner method of modifying the icons on TiddlyWiki? I just want to duplicate the Journal icon, and add a circle to it like the save changes button, but I’m not all that familiar with editing SVG values.
SVG is a world of it’s own. It is not an “image” as such. Rather it is a precise system for dynamically drawing in space (=“vector image”).
To edit an SVG it likely easiest to use a specialist program like Inkscape.
However, the very bold @telmiger, did do a TW trying to show what SVG is and how to edit it in TW … SVG Playground — Learn hard, play hard
Hope this helps
TT
1 Like
hoo boy… ok, down the rabbit hole I go then.
but before I check out the SVG playground, do you know if inkscape can combine two tiddlywiki svg? because I could use that to slap the journal icon and a circle icon together
1 Like
You will need to read up on the SVG code for making changes or get a new icon or possibly mash to together. Start by cloning $:/core/images/new-journal-button
Here I mash the existing New Journal Button with the full screen button by copying the path from the fullscreen and putting it in a copy of the new journal button.
new-journal-button in fullscreen.json (1.4 KB)
A quick google of svg circle gave me this;
<circle cx="50" cy="50" r="50"/>
Then with a little more hacking
new-journal-button circled.json (1.2 KB)
2 Likes
hm, well I see how you mushed them together, I might give that a shot and see if I can jury rig something to work for my intentions in the meantime while I read up about SVG’s
1 Like
See my update above new-journal-button circled.json (1.2 KB)
Thanks for the inspiration @Justin_H by making the radius too big we get this
new-journal-button boxed.json (1.2 KB)
All ways of getting button flavors, but I am concerned the color may disappear in the Toolbars.
By the way it is a great example the New Journal button shows the Day of month.
1 Like
Once you understand SVG you can combine two (or more) “sprites” in one SVG.
And show/hide them at will.
But I would not say it is easy to get your head round it’s “coordinates system”.
Inkscape can do that.
But you will still have to understand how to ensure the two “parts” are coordinated.
Good luck! 
, TT
Using your method, I was actually able to rip the circle around the info button to encircle the journal button to get closer to what I had in mind, though I won’t lie the color circle behind the journal button does look very aesthetically appealing!
now, all I need to figure out what coordinates control the overall size of the journal button, and I think I will have an ideal svg
1 Like
You mean something along the lines of using the pseudo element :hover? I hadn’t thought of that, that sounds really cool actually. 
I think the trick is the coordinates have to happen within those in the viewBox="0 0 128 128" eg 128x128 and x and y are from the top left. The size is separately determined using width="22pt" height="22pt" but I have discovered width="1em" height="1em" scales with the font size.
My above examples work but sit too high if the image is tagged $:/tags/ViewToolbar (just as a test) but not in a button like this;
<$button class="tc-btn-invisible">
{{new-journal-button boxed}}
</$button>
- And the on hover still works"
It’s possible to edit SVGs in text form, this will get harder when you want to create more complex shapes.
I personally use the InkScape program to edit TW SVGs. It has a “Save as optimized SVG”, that strips out all the overhead meta data, that InkScape may add to the image.
Alternatively I use SVGOMG - SVGO's Missing GUI to “optimize” SVGs in size. …
The last step still is, to manually modify SVGs and strip the rest of the meta data, that’s not needed with TW.
I think I should record a video about that workflow.
1 Like
Would you happen to know how I can export the journal button as an svg? I can’t figure it out for some reason 
for context, I’ve tried to import it into the SVGOMG webapp you linked to but I seem to be receiving an error, so I stripped the class and other possibly problematic elements but even then could not seem to get it to work with the webapp unfortunately 
Let’s not go there! 
Just FYI you could have a whole chess set in one SVG. Black/White Square + 32 pieces - remove 16 (we color on use) - remove 7 excess pawns (we duplicate as needed) = 11 sprites is chess is the SVG version.
Just a fun comment.
SVG is heavily used in TiddlyWiki and it is a fun aspect that much can be done with
TT
lol ok, so SVG isn’t something I’ll get in a week is what I’m gathering, noted!
I can see the appeal, it’s very fiddly when messing with the values.
so far I’ve managed to make what I was aiming for, though it is a bit hacky
<svg wdith="22px" height="22px" class="tc-image-button" viewBox="0 0 128 128"><g fill-rule="evenodd">
<path d="M64 128c35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64c0 35.346 28.654 64 64 64zm0-16c26.51 0 48-21.49 48-48S90.51 16 64 16 16 37.49 16 64s21.49 48 48 48z"/>
</svg>
<svg width="100pt" height="125pt" class="tc-image-new-journal-button tc-image-button" viewBox="-33 -7 215 215"><g fill-rule="evenodd">
<path d="M102.545 112.818v11.818c0 1.306 1.086 2.364 2.425 2.364h6.06c1.34 0 2.425-1.058 2.425-2.364v-11.818h12.12c1.34 0 2.425-1.058 2.425-2.363v-5.91c0-1.305-1.085-2.363-2.424-2.363h-12.121V90.364c0-1.306-1.086-2.364-2.425-2.364h-6.06c-1.34 0-2.425 1.058-2.425 2.364v11.818h-12.12c-1.34 0-2.425 1.058-2.425 2.363v5.91c0 1.305 1.085 2.363 2.424 2.363h12.121zM60.016 4.965c-4.781-2.76-10.897-1.118-13.656 3.66L5.553 79.305A9.993 9.993 0 009.21 92.963l51.04 29.468c4.78 2.76 10.897 1.118 13.655-3.66l40.808-70.681a9.993 9.993 0 00-3.658-13.656L60.016 4.965zm-3.567 27.963a6 6 0 106-10.393 6 6 0 00-6 10.393zm31.697 17.928a6 6 0 106-10.392 6 6 0 00-6 10.392z"/><text class="tc-fill-background" font-family="Helvetica" font-size="47.172" font-weight="bold" transform="rotate(30 25.742 95.82)"><tspan x="42" y="77.485" text-anchor="middle"><<now "DD">></tspan></text></g></svg>
I wanted to return to the OP and flag that TW has a library of over 47,000 TW Ready SVGs courtesy of morosanuae at TW Icons v1.10 — A large collection of icons for TiddlyWiki
Maybe not relevant? But worth the knowing?
Just a side note
TT
I was actually looking through there for something similar to what I wanted to make, theres a lot of good svg to pick from, though some have preset colors and aren’t the same size as standard svg in TW on rare occasion.
Right. TBH I started work with morosanue, we still not finished, to fully “harmonise” those with TW. It is actually quite easy, once you understand SVG, to edit one of those to better match what you need. But, because they come from multiple sources, there is no “one rule” you could apply to tweak an SVG from there.
Side comment
TT
I think it’s worth pointing out that SVG gives a precise image at any scale unlike pixel based formats like png or jpeg which do not scale accurately and often end up looking pixelated when pushed too far - when I work for 3rd parties I often have to ‘recreate’ organisation or company logos in SVG format - then they can have a precise version of that logo at any size even billboard size, in such cases they typically only had a jpeg or png image that a designer gave them ages ago and it would look horrible scaled up.
The reason for the difference in precision is that a jpeg image of a circle does not have any ‘recollection’ that the pixels arranged around a circular path represent a circle. If you want to scale it then various complex algorithms are deployed which parameterise the pixel grid but the results are often less than ideal - the pixel format does not have an answer for the ideal colour for each pixel when you double the resolution and so quadruple the number of pixels - SVG on the other hand stores a circle as a position (xy) and a radius value - no pixels - so it always drawn optimally whatever size you choose.
A noticeable limitation is that artistic shading (gradients) is limited to the kind of shading you see in CSS, SVG art work has a certain ‘airbrushed’ look to it - in a pixel based format the only limitation is the resolution being used, all the same I am sure some artists push SVG to the limit and prove this generalisation wrong in cases.
Personally I think Inkspace is only marginally more complex to use than say GIMP - the former being SVG based, the latter pixel based - well worth the effort inmo - it pays back over time.
I should add that inkscape can import pixel based images but it cannot perform magic and fill in the missing data if you need to scale the image up - still useful when using layers for ‘tracing’ pixel based images - exactly what I do when I want to ‘vectorise’ a pixel based logo.
2 Likes
Hm… makes me wonder if there would be a method to extract and convert it to match a set format for TW.
food for thought!
reminds me of my days doing digital art, swapping between raster and vector for making products. I handled exporting as svg once or twice but TW is the first time I really took a look under the metaphorical hood.
Off topic I know, but maybe the talk of using vector in digital art might lead someone down a train of thought that could later benefit the discussion