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
Hi Thomas,
--Mohammad
- above the live editor a drop down list can be used to seamlessly lets select among examples
- a button can be used to export the svg
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.
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill="transparent" stroke="black"/>
<$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>
Hello friends, a new version is live on https://tid.li/tw5/apps/svg.html :)
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.
--
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.
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.
Ciao Thomas
<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>
Thank you for this very useful resource! May I suggest that you add an example to illustrate WikiText inclusion (especially transclusion) in SVG?
--
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/19b1fc14-e346-4feb-ad54-dae0d1c10383%40googlegroups.com.
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
Also, mixing some TW5 widgets like <$list> could give us inspirations for dynamically generated drawings :-)
You can embed an SVG image tiddler using the ordinary transclusion syntax.
Common example like coloring or scaling an existing button image.
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
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/059f9c3f-ba88-48ad-bb91-34a63cfb498d%40googlegroups.com.
Once we understand this better lets extend the doco. Share with me and I can do it.
... my findings: https://tid.li/tw5/apps/svg.html#Learning
I opened an issue: https://github.com/Jermolene/TiddlyWiki5/issues/4417
--
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/21e37185-9d5c-4f8f-96a1-ca8481492c87%40googlegroups.com.
A small preview was added to the examples too.