Demo: SVG live editor

839 views
Skip to first unread message

Thomas Elmiger

unread,
Jan 9, 2020, 4:53:50 PM1/9/20
to TiddlyWiki
Hi folks,

Just wanted to let you know why I love TiddlyWiki: Get inspired by a tweet, build a brand new tool in less than two hours, add examples, learn on the way, publish ... this is all so easy if you know what TW can do.

The idea: Learn SVG coding by example: https://tid.li/tw5/apps/svg.html is a live SVG editor – just a start, updates might follow.

Let me know what you think and send additional examples or links if you see something interesting.

Best,
Thomas

TonyM

unread,
Jan 9, 2020, 4:59:35 PM1/9/20
to TiddlyWiki
thomas

Great work. Thanks for sharing.

It would be nice to use this with a workflow to copy and customise core images for aesthetics or for consistency in tiddlywiki.

Toony

Joshua Fontany

unread,
Jan 9, 2020, 5:38:28 PM1/9/20
to TiddlyWiki
Excellent demo!

A Gloom

unread,
Jan 9, 2020, 6:39:33 PM1/9/20
to TiddlyWiki
thumbs up Thomas!

from one who text hand codes complex svg's* with TW and its html/xml preview ability-- I can attest your efforts will make it much easier for people less familiar with svg's.

* much of graphical content-- wiki title, images, maps & ortho diagrams, tiddler transclusion container frames, color iflls-- of the screenshots (16 so far) in the topic posted about TW work was svg's-- most created with TW

I didn't see an export template-- does it save svg's as seperate files?  and if so, how did you get around the stripping out of line breaks during the export/save to disk?

David Gifford

unread,
Jan 9, 2020, 6:46:39 PM1/9/20
to TiddlyWiki
Added to the images section of the toolmap. Nice! https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

Mohammad

unread,
Jan 9, 2020, 11:38:57 PM1/9/20
to TiddlyWiki
Hi Thomas,
 Really great tools.

Minor comment:
  1. above the live editor a drop down list can be used to seamlessly lets select among examples
  2. a button can be used to export the svg
--Mohammad

Thomas Elmiger

unread,
Jan 10, 2020, 1:22:08 AM1/10/20
to TiddlyWiki
Thanks for all the comments!

Mohammad, I will put these on my todo list:
  1. above the live editor a drop down list can be used to seamlessly lets select among examples
  2. a button can be used to export the svg
--Mohammad

-t

Eric Shulman

unread,
Jan 10, 2020, 2:51:13 AM1/10/20
to TiddlyWiki
On Thursday, January 9, 2020 at 1:53:50 PM UTC-8, Thomas Elmiger wrote:
The idea: Learn SVG coding by example: https://tid.li/tw5/apps/svg.html is a live SVG editor – just a start, updates might follow. 
Let me know what you think and send additional examples or links if you see something interesting. 

Nice start on a TiddlyWiki-integrated SVG editor.

Try this:
1) view any $:/core/images/* tiddler (e.g., $:/core/images/advanced-search-button)
2) edit it to see the SVG code
3) copy-paste that code into your editor

note: if you just edit the shadow and enable preview display, you can get something very similar to your editor, where changing the SVG definition immediately displays the resulting image.  The main difference is the size of the preview and the display of a grid.

Also, for a MUCH more complex in-browser SVG editor, check out:

-e


PMario

unread,
Jan 10, 2020, 3:50:56 AM1/10/20
to TiddlyWiki
hi,
Nice demo!

But I can't change the TW palette back to normal, to make it readable again.
Whatever I do it stays black.
-m

Thomas Elmiger

unread,
Jan 10, 2020, 6:23:49 PM1/10/20
to TiddlyWiki
Hi all,

There’s a new version online: https://tid.li/tw5/apps/svg.html

Major improvements:
  • Raster can be switched on/off
  • Advanced icon editing instructions as proposed by Eric and Tony
  • Original TW themes restored so palettes are usable as missed by Mario
Hidden improvements:
  • Code examples excised (for later direct import into the editor as suggested by Mohammad)
To do:
  • Example code import into editor
  • SVG export (or export instructions, e.g. inspect in browser, copy <svg> outer html)
@A Gloom, if you have more input for the last point I would be interested, not sure if I understand the problem. But I didn’t make any attempts to run into it either ;–)

Good night,
Thomas

A Gloom

unread,
Jan 11, 2020, 1:07:44 AM1/11/20
to TiddlyWiki
@A Gloom, if you have more input for the last point I would be interested, not sure if I understand the problem. But I didn’t make any attempts to run into it either ;–)

I create my svg's in a tiddler, so in my use case, i just need a custom export template (clioned plain text template with the extension field changed to svg--see attached tiddler) so I can used the tiddler export option.  Since you're using a custom made editor, that may not be suitable but the template could possibly be used with a button that sends editor content going to a temp tiddler and exporting it via the template. The screenshot below shows the svg ecport template contents (2nd agter the cusotm html plain text exporter)

Disregard the question about line breaks -- I forgot thats just an issue with Windows Notepad-- TW's plain text export doesn't format line breaks in a way Notepad recognizes so with Notepad the resulting svg code is all one line.  Most other text editors recognize the line breaks.

This --attached System icon tiddler-- may help with the icon editing-- the second list (widget) has copy to clipboard feature-- change the copy to clipboard source to be the text field instead of tiddler title of the icon

Keep up the good work-- I like your idea of a code snippet library to pull svg elements from (I use a data tiddler and a crib sheet reader/search in the same way-- TT noticed it on the Ref Collective wiki)

exporters.jpg



$__.ragsexport_svgexporter.tid
System icons.tid

Mat

unread,
Jan 11, 2020, 6:50:22 AM1/11/20
to TiddlyWiki
Thomas, cool stuff.

The following suggestion/idea is from someone who has made a few feeble attempts but does not "get" svg so it may make little sense, so FWIW:

If the purpose with your thing is to learn svg maybe the UI could take advantage of TWs range of tools such as selectwidgets and buttons and fields, i.e to let you e.g select to add a new "path" or "circle" and click create, to add it. This could, I assume, behind the scenes really be a new field that is transcluded into the svg markup. I.e, one path = one field (named path-1, path-2, ...). I.e

<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/>

would be a field

path-1 : d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"

...or more powerfully, split up that field into fields path-1-d, path-1-fill, path-1-stroke 
...or, of course, most powerful of all, path-1-d-m, path-1-d-h, .... etc

Then have a macro run through the tiddlers fields and construct a UI with e.g selectwidgets (for such things as colors) and rangewidgets (for values), etc.

Just maybe this would enable people like myself to actually create svg icons directly in TW :-)

Again, forgive me if this idea doesn't make sense because of some misunderstanding about svg on my part.

BTW, I recall master Jed has also developed SVG stuff for TW previously. I recall some animation based on TW+SVG demo'd in some hangout.

<:-)

TiddlyTweeter

unread,
Jan 11, 2020, 7:19:56 AM1/11/20
to TiddlyWiki
Ciao Thomas

EXCELLENT UI design as ever from you.

I have two suggestions that are likely complicated? (scaling issue?) but seem to me important.

The single biggest issue with editing SVG in TW is everything is too small!

On  a desktop it would be great if one could 

   (1) maximise the edit window; 

   (2) alter the raster grid intervals interactively. 

Being a user of Lightroom etc, it is the ability to change visible canvas that makes all the difference.

As is, the tool is exactly in the right direction.

Very best wishes
TT

Thomas Elmiger

unread,
Jan 11, 2020, 6:37:39 PM1/11/20
to tiddl...@googlegroups.com
Hello friends, a new version is live on https://tid.li/tw5/apps/svg.html :)

Optimisations:
  • Choose raster: 10 or 20 or none (minimalistic version of what Josiah suggested)
  • Copy to clipboard: buttons for code examples and for images from the TW library
Scaling hints (for Josiah and all others interested):
  • The size of the result should adapt to the space available in the browser window.
  • In the CSS editor below the result you can see width: 70vh; – this tells the graphic to use a width corresponding to 70% of viewport height.
    • Try other values or entities and let us know what works best on your screens.
Hope that helps.
-t

Mohammad

unread,
Jan 11, 2020, 11:36:47 PM1/11/20
to TiddlyWiki
Hi Thomas,
 I made the below small modification in Svg editor 

---

<$select tiddler=selectTid>
<$list filter="[prefix[$:/examples/]]">
<option value=<
<currentTiddler>>>
<$view field=caption><$view field=title/></$view>
</option>
</$list>
</$select>
<$vars newSvg={{{ [[selectTid]get[text]] }}}>
<$button set="$:/telmiger/svg/icon/path" setTo={{{ [
<newSvg>get[text]] }}}>Apply</$button>
</$vars>


<label>`SVG Editor:`
<br><br>
<$edit-text tiddler="$:/telmiger/svg/icon/path" field="text" tag="textarea" columns="80"rows="3" minHeight="3em" autoHeight="yes" class="te-svg-editor"/>
</label>

This way one can select among examples and use the apply button to have it in live editor.
I am sure you can use a more elegant solution here.

--Mohmmad

TiddlyTweeter

unread,
Jan 12, 2020, 8:45:50 AM1/12/20
to TiddlyWiki
Thomas Elmiger wrote:
Hello friends, a new version is live on https://tid.li/tw5/apps/svg.html :)
  <snip> 
In the CSS editor below the result you can see width: 70vh; – this tells the graphic to use a width corresponding to 70% of viewport height.Try other values or entities and let us know what works best on your screens.
 
Ciao Thomas

Excellent info & changes ...

FYI: I changed width to 100% and then "open in new window". Then editing  is excellent!

At that scale I'd like to increase the raster intervals more though ... so ... Raster "5, 10, 20, none" would be really good! :-)
 
Hope that helps.

It did.

J, x 

TiddlyTweeter

unread,
Jan 12, 2020, 8:53:17 AM1/12/20
to TiddlyWiki
Ciao Thomas

Following up on on my last post ... the setting of "100% width" plus  "Open in new window" is pretty much equivalent to "Edit at full-width". Something worth thinking about to give a button for automating that in the interface?

Hope this is clear!

Just thoughts
TT

TiddlyTweeter

unread,
Jan 12, 2020, 9:08:35 AM1/12/20
to TiddlyWiki
Ciao Thomas

Looking at it more I'm thinking "Width 100%" is optimal! Are there reasons not to have that as default?

Just thoughts
J, x

Thomas Elmiger

unread,
Jan 13, 2020, 2:40:25 AM1/13/20
to TiddlyWiki
Hello all,

On my way to work I put a new version online https://tid.li/tw5/apps/svg.html :)

Optimisations:
  • Select and load examples
    • I just had to add captions to examples (thanks, Mohammad!)
  • Export button (thanks, Gloom!)
  • Additional raster (renamed "grid") size 5 (thanks, Josiah!)
  • TW icons from prerelease 5.1.22 (less code)
  • Link to top
  • ...
Pending:
  • Size options: I am thinking about resizing buttons as YouTube has them for the video player
    (width 100% is not optimal on my tiny laptop screen).
Best,
Thomas

Mohammad

unread,
Jan 13, 2020, 4:17:51 AM1/13/20
to TiddlyWiki
Hi Thomas,
 This now looks great! a quick tool for prototyping!
I will go though it and will let you know if I found anything to improve Svg Playground.


--Mohammad

Mohammad

unread,
Jan 13, 2020, 4:20:18 AM1/13/20
to TiddlyWiki
I may encourage people here to share their examples to be included in Svg Playground!


On Monday, January 13, 2020 at 11:10:25 AM UTC+3:30, Thomas Elmiger wrote:

Xavier Cazin

unread,
Jan 13, 2020, 4:50:06 AM1/13/20
to tiddl...@googlegroups.com
Hi Thomas,

Thank you for this very useful resource! May I suggest that you add an example to illustrate WikiText inclusion (especially transclusion) in SVG?

Also, here is an optimisation to move the example loading action directly into the select widget:

Replace
---

Examples:&nbsp; <$select tiddler="selectTid" default="S:/examples/Open Paths">

<$list filter="[prefix[$:/examples/]]">
<option value=<<currentTiddler>>>
<$view field=caption><$view field=title/></$view>
</option>
</$list>
</$select> &nbsp;

<$vars newSvg={{{ [[selectTid]get[text]] }}}>
<$button set="$:/telmiger/svg/icon/path" setTo={{{ [<newSvg>get[text]] }}}> Load </$button>
</$vars>

---
with
---

Examples:&nbsp; <$select tiddler="selectTid" default="S:/examples/Open Paths" actions="""<$action-setfield $tiddler="$:/telmiger/svg/icon/path" $value={{{ [[selectTid]get[text]get[text]] }}} />""">

<$list filter="[prefix[$:/examples/]]">
<option value=<<currentTiddler>>>
<$view field=caption><$view field=title/></$view>
</option>
</$list>
</$select>

---

Cheers,
-- Xavier Cazin


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/28c784c0-e5ce-49e7-9a09-e7719d07cb04%40googlegroups.com.

Thomas Elmiger

unread,
Jan 13, 2020, 6:01:16 PM1/13/20
to TiddlyWiki
Salut Xavier,

Thank you for the feedback, I will consider your suggestions.

I will think about more examples for a while, there are a lot of SVG topics we could cover. Plus, there would be a lot of TW related topics like transclusion or calculations. (I think generative art would be possible ... not sure I will go this far.)

A propos loading examples directly: I am not sure, this would be an improvement for beginners. (I did not try yet, but ...) I suppose checking what examples are available in the select could lead to overwriting work a user did before. So until now I see the push of an extra button as a safety net.

Let me know how you see it.

A bientôt!
Thomas

Xavier Cazin

unread,
Jan 14, 2020, 5:02:20 AM1/14/20
to tiddl...@googlegroups.com
Hallo Thomas,

A propos loading examples directly: I am not sure, this would be an improvement for beginners. (I did not try yet, but ...) I suppose checking what examples are available in the select could lead to overwriting work a user did before. So until now I see the push of an extra button as a safety net.

Let me know how you see it.

I didn't think of the load button as a safety net for when an example code has been edited. So I guess you are right: keeping it is probably more valuable than saving a click!
Tschüß!
X.

TiddlyTweeter

unread,
Jan 14, 2020, 7:38:18 AM1/14/20
to TiddlyWiki
Ciao Thomas

FYI, I should have been clearer! By "width 100%" I meant of the containing div  within the Tiddler, not the viewport.
That should work everywhere?

Just a footnote.

Best wishes
TT

Thomas Elmiger

unread,
Jan 14, 2020, 7:47:44 AM1/14/20
to TiddlyWiki
Ciao Josiah,

Nope. When I change the CSS to 100% on my MacBook Air in FF the SVG is full viewport hight. And I would like to see at least a part of the editor window too.

So I have plans to test a side by side option (editor left, result right) but that might take some time.

Your communication was crystal clear :)

Cheers,
-t

Am Dienstag, 14. Januar 2020 13:38:18 UTC+1 schrieb TiddlyTweeter:
Ciao Thomas

TiddlyTweeter

unread,
Jan 14, 2020, 8:19:41 AM1/14/20
to TiddlyWiki
Ciao Thomas

I hate computers :-)

Josiah

Alfonso Arciniega

unread,
Jan 15, 2020, 5:35:39 PM1/15/20
to TiddlyWiki
Thank you, Thomas,

Maybe your excellent "Bricks 004 Frozen Dark" theme is in need of a minor update?

I really like this dark theme, This theme works fine in your Themes site (https://tid.li/tw5/themes.html), which runs on TW 5.1.19. However, though in the SVG Playground, in TW 5.1.21, I see the following issue:

The "close all" button under the Open tab doesn't look like a button at all. Tested under Windows 10 in both Chrome and Firefox.

Love this them btw.

Cheers,

Alfonso

TonyM

unread,
Jan 15, 2020, 6:57:19 PM1/15/20
to TiddlyWiki
Thomas,

I am following the development of this closely, but busy elsewhere at the moment. 

I just wanted to suggest a useful set of features, possibly already there, but perhaps in need of documentation.

TiddlyWiki's standard icons are built in of course. If we want to make a custom alternative to an existing button;
eg 
  1. a green Edit button that appears conditionally
  2. a Home button that returns to a single tiddler while default tiddlers still contains the [list[$:/StoryList]]
  3. A Toolbar editor Stamp button with another set of stamps
We want to take the existing button image and make minor changes, eg
  1. Just add/change the fill
  2. A home button with a red "h" inside
  3. imagine the Stamp Button with a number in its top right stampe 1, 2, 3 etc...
If we can do anything to make such new buttons from existing buttons simpler for users, I think there is an untapped potential for giving users more control over their user interface, whilst keeping a similar look and feel.

There is a lot of potential in this tool to do that.

Regards
tony

TonyM

unread,
Jan 15, 2020, 7:10:45 PM1/15/20
to TiddlyWiki
For Example,

The Following in the SVG editor works, but will not when pasted to a SVG tiddler

<svg class="tc-image-home-button tc-image-button" viewBox="0 0 128 128" width="22pt" height="22pt">
   
<g fill-rule="evenodd">
       
<path d="M112.9847,119.501583 C112.99485,119.336814 113,119.170705 113,119.003406 L113,67.56802 C116.137461,70.5156358 121.076014,70.4518569 124.133985,67.3938855 C127.25818,64.2696912 127.260618,59.2068102 124.131541,56.0777326 L70.3963143,2.34250601 C68.8331348,0.779326498 66.7828947,-0.000743167069 64.7337457,1.61675364e-05 C62.691312,-0.00409949529 60.6426632,0.777559815 59.077717,2.34250601 L33,28.420223 L33,28.420223 L33,8.00697327 C33,3.58484404 29.4092877,0 25,0 C20.581722,0 17,3.59075293 17,8.00697327 L17,44.420223 L5.3424904,56.0777326 C2.21694607,59.2032769 2.22220878,64.2760483 5.34004601,67.3938855 C8.46424034,70.5180798 13.5271213,70.5205187 16.6561989,67.3914411 L17,67.04764 L17,119.993027 C17,119.994189 17.0000002,119.995351 17.0000007,119.996514 C17.0000002,119.997675 17,119.998838 17,120 C17,124.418278 20.5881049,128 24.9992458,128 L105.000754,128 C109.418616,128 113,124.409288 113,120 C113,119.832611 112.99485,119.666422 112.9847,119.501583 Z M97,112 L97,51.5736087 L97,51.5736087 L64.7370156,19.3106244 L33,51.04764 L33,112 L97,112 Z"></path>
   
</g>
<text x="44" y="60">Home</text>
<text x="44" y="80">Sweet</text>
<text x="44" y="100">Home</text>
</svg>


Regards
Tony

Thomas Elmiger

unread,
Jan 16, 2020, 5:22:34 AM1/16/20
to TiddlyWiki
Hi Tony,

I tested your example, this worked for me including download and import on tiddlywiki.com. Home Sweet Home gets very tiny of course and might be in Times font (depends on CSS of the wiki.)
=> Would need more info about your workflow.

Thanks a lot for your other inspiring comments!

All the best,
Thomas

A Gloom

unread,
Jan 16, 2020, 5:24:15 AM1/16/20
to TiddlyWiki
Tony

is the type for the svg tiddler set as svg?

I copied n pasted the code above into a tiddler and it didplayed fine till I set type to svg, then I got a broken image icon.

I'm playing with the code to see what could be causing the issue since having it as a svg tiddler would be the desired method of sanity.

Thomas Elmiger

unread,
Jan 16, 2020, 5:24:34 AM1/16/20
to TiddlyWiki
Ciao Alfonso,

Love your feedback, thanks! I had hoped nobody would notice ;–)

Will fix when I find time.

Cheers,
Thomas

Thomas Elmiger

unread,
Jan 16, 2020, 5:30:13 AM1/16/20
to TiddlyWiki
Hi Xavier and all,

What is cool about publishing stuff: You get feedback that pushes you out of your comfort zone like this one from Xavier:

Thank you for this very useful resource! May I suggest that you add an example to illustrate WikiText inclusion (especially transclusion) in SVG?

Now in the newest version of the SVG Playground on https://tid.li/tw5/apps/svg.html you will find a newly developed svg exporter AND an example with cool transclusions.

It worked for me, let me know how it works for you. (Responses might take some days.)

All the best,
Thomas

Thomas Elmiger

unread,
Jan 16, 2020, 5:34:50 AM1/16/20
to TiddlyWiki
Gloom and Tony

Try adding xmlns="http://www.w3.org/2000/svg" in the opening svg tag. It might be invalid without that.

-t

A Gloom

unread,
Jan 16, 2020, 5:42:52 AM1/16/20
to TiddlyWiki
Try adding xmlns="http://www.w3.org/2000/svg" in the opening svg tag. It might be invalid without that

You're exactly right Thomas, svg tiddlers will not display without the svg namespace declared-- svg's in type not set/txt/vnd or html (which I use) don't need it

version="" isn't required but for proper codeing its suggest (tho not need for SVG2)

TonyM

unread,
Jan 16, 2020, 6:54:49 AM1/16/20
to TiddlyWiki
A Gloom,

That Fixes it, adding xmlns="http://www.w3.org/2000/svg" but only if the tiddler is of type SVG, Otherwise if blank unnecessary.

Regards
Tony

TiddlyTweeter

unread,
Jan 16, 2020, 11:09:28 AM1/16/20
to TiddlyWiki
Thomas

Not sure it is your job to document the difference between vanilla svg and svg with an xml directive.

What I would say is it tricks a lot people up.

It IS documented at: https://tiddlywiki.com/#Using%20SVG though so lightly you'd probably never notice.

TT

Xavier Cazin

unread,
Jan 16, 2020, 1:50:20 PM1/16/20
to tiddl...@googlegroups.com
Hi Thomas,

Thanks for the WikiText example! Another thing that would be particularly relevant: links to other tiddlers, including those that hold a story filter. I'm not 100% sure of the actual syntax but this seems to work:

<text x=1 y=7 font-size=8 fill=darkgreen stroke=none>
<a href="#FollowMe:[enlist{$:/DefaultTiddlers}]" target="_parent"
  title="This is a link title in SVG!">Add a contact information tiddler</a>
</text>

Cheers,
-- Xavier Cazin


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Xavier Cazin

unread,
Jan 16, 2020, 2:23:07 PM1/16/20
to tiddl...@googlegroups.com
Hi Thomas,

Also, mixing some TW5 widgets like <$list> could give us inspirations for dynamically generated drawings :-)

Cheers,
-- Xavier Cazin

TonyM

unread,
Jan 16, 2020, 5:23:08 PM1/16/20
to TiddlyWiki
TT

Once we understand this better lets extend the doco. Share with me and I can do it.

Common example like coloring or scaling an existing button image.

The best way to adapt imported svgs

The standard sizes and related code setting


Overriding standard size of colour.
Transclusion and inline examples

A Gloom

unread,
Jan 17, 2020, 1:38:26 AM1/17/20
to TiddlyWiki

Thomas Elmiger

unread,
Jan 17, 2020, 5:24:43 PM1/17/20
to TiddlyWiki
Hi Xavier and all,

Also, mixing some TW5 widgets like <$list> could give us inspirations for dynamically generated drawings :-)

Get inspired on https://tid.li/tw5/apps/svg.html#Drawing%20patterns%20TW-style and then show us your art!

Happy weekend,
Thomas


Thomas Elmiger

unread,
Jan 17, 2020, 5:34:03 PM1/17/20
to TiddlyWiki
Hi Xavier,

I don’t know what your link example should do but the link did not work for me (= nothing happend after copying your example to the editor and clicking the link in the preview).

Anyway I think that links should be put around an svg instead of inside an svg. A button can do anything and look like anything in TW and you can decorate it with an icon.

All the best and keep the ideas coming!
-t

Thomas Elmiger

unread,
Jan 17, 2020, 5:39:38 PM1/17/20
to TiddlyWiki
TT,

I am not sure either. But if you could state the difference in one simple sentence, I would consider to add it to

Cheers,
Thomas

TiddlyTweeter

unread,
Jan 18, 2020, 6:03:41 AM1/18/20
to TiddlyWiki
Getting a one line description is not so easy :-)

Let us argue about HOW to describe the situation! :-) Then one sentence may be possible.

For instance, this is misleading in that it is not specific enough ... 

You can embed an SVG image tiddler using the ordinary transclusion syntax.

This is where the confusion starts. Do you mean "image" here or "element"? INLINE svg is NOT an image file, nor an image Tiddler, it is an HTML ELEMENT that dynamically renders svg co-ordinate drawing in text flow. FILE svg are self contained images that just happen in TW to be "embedded". These need to be referenced as IMAGES.

We need to DIFFERENTIATE the TWO cases! They are transcluded differently.

Best wishes
TT

TiddlyTweeter

unread,
Jan 18, 2020, 6:37:59 AM1/18/20
to TiddlyWiki
It is an interesting issue!

I am not sure documenting this can be done separate from examples!

The complication in TW  is simply that we can create both SVG HTML elements and SVG images (that we happen to embed in TW). 

It is this "double possibility" that is causing confusion quite often.

TT

TiddlyTweeter

unread,
Jan 18, 2020, 6:46:43 AM1/18/20
to TiddlyWiki
TonyM wrote:

Common example like coloring or scaling an existing button image.


 Regarding customization via CSS of SVG elements, Thomas' tool does it very well.

TT

Xavier Cazin

unread,
Jan 18, 2020, 2:27:40 PM1/18/20
to tiddl...@googlegroups.com
Hi Thomas,
I don’t know what your link example should do but the link did not work for me (= nothing happend after copying your example to the editor and clicking the link in the preview).

Well, it is actually a permaview link, which in effect should at least add the FollowMe tiddler in your story. Not very useful I admit, but I happen to love the principle of story filter links :-) I expected that this would navigate to FollowMe too, but it doesn't, for some reasons...
Anyway I think that links should be put around an svg instead of inside an svg. A button can do anything and look like anything in TW and you can decorate it with an icon.

I kind of agree, if your SVG is to be used as an icon, but what about charts and timelines based on field values? Navigating to the tiddlers that contributed the charts from within the SVG sounds relevant.
Cheers,
Xavier.

All the best and keep the ideas coming!
-t

Am Donnerstag, 16. Januar 2020 19:50:20 UTC+1 schrieb Xavier:
this seems to work:

<text x=1 y=7 font-size=8 fill=darkgreen stroke=none>
<a href="#FollowMe:[enlist{$:/DefaultTiddlers}]" target="_parent"
  title="This is a link title in SVG!">Add a contact information tiddler</a>
</text>

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

Thomas Elmiger

unread,
Jan 19, 2020, 6:05:44 AM1/19/20
to TiddlyWiki
Hi Tony, TT and all,

An updated version is online (mainly docs and interface): https://tid.li/tw5/apps/svg.html

Once we understand this better lets extend the doco. Share with me and I can do it.



And I tried to document my findings: https://tid.li/tw5/apps/svg.html#Learning

All the best,
Thomas

TiddlyTweeter

unread,
Jan 19, 2020, 6:41:48 AM1/19/20
to TiddlyWiki
Ciao Thomas


... is helpful ... especially https://tid.li/tw5/apps/svg.html#Display%20SVG%20Graphics which is explicit about the difference between "inline SVG" & "SVG images" with examples.

TT

TiddlyTweeter

unread,
Jan 19, 2020, 7:22:51 AM1/19/20
to TiddlyWiki
Thomas Elmiger wrote:

I supported it and commented on it.

TT 

Thomas Elmiger

unread,
Jan 26, 2020, 5:46:16 PM1/26/20
to TiddlyWiki
Hello friends of SVG,

The newest version of https://tid.li/tw5/apps/svg.html comes with a new intro, better documentation, bugfixes (including CSS flaw mentioned by Alfonso), new and improved icons, more examples ...

Check it out and send feedback, but be warned: I will be away from my computer for some days.

Cheers,
Thomas

Mohammad Rahmani

unread,
Jan 26, 2020, 9:55:01 PM1/26/20
to tiddl...@googlegroups.com
Hi Thomas,
Many thanks! I hope this could be a learning resource for SVG using Tiddlywiki.

One comment
-Accept svg samples and examples.
It would be nice to have a template, one fill it and create a sample using SVG playground standard! (some rules to have a sample code with explanation) then send it to you as an attachment!

People then encourage to send their sample to you!

--Mohammad


Best wishes
Mohammad


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

A Gloom

unread,
Apr 19, 2020, 4:51:42 AM4/19/20
to TiddlyWiki
Another svg animation for your library-- see attached tiddler -- sorry, you'll have to clean up the code to match the code style for your editor.
svg triangle animation 2.tid

Thomas Elmiger

unread,
May 5, 2020, 4:18:28 PM5/5/20
to TiddlyWiki
Thanks a lot, Mister Gloom, the new animation inspired by you is finally here:

A small preview was added to the examples too.

Joshua Fontany

unread,
May 5, 2020, 9:25:17 PM5/5/20
to TiddlyWiki
Fantastic work. :D

Best,
Joshua Fontany

A Gloom

unread,
May 7, 2020, 1:29:03 AM5/7/20
to TiddlyWiki
Thomas
 
A small preview was added to the examples too.

Very cool work.  You made the amimation even more hypnotic-- kudos to you : )

Looking thru your work helped me streamline my buttons for svg macros-- noticed your foreign objects didn't have body and div tags.

A Gloom

unread,
May 7, 2020, 6:16:23 AM5/7/20
to TiddlyWiki
Thomas

With the latest Firefox update, I'm getting a

Secure Connection Failed

An error occurred during a connection to tid.li. SSL received a record that exceeded the maximum permissible length.

Error code: SSL_ERROR_RX_RECORD_TOO_LONG

    The page you are trying to view cannot be shown because the authenticity of the received data could not be verified.

Reply all
Reply to author
Forward
0 new messages