experimenting with svg interactivity in TW //WORK IN PROGRESS DOCUMENT//
this covers mouse hover, links in the svg, displaying external images inside the svg (svg image tag, use tag) the ways to display svg's: import (inline) (svg code in tiddler) for external svg's: image tags object embed iframe imported (inline) svg The best for in wiki use and interactivity once the fix below is applied https://tiddlywiki.com/#Using%20SVG imported svg initially have no interactivity since their type field is set to "image/svg+xml" and will not display other external graphics or svg's embedded in the svg code. FIX: type can be changed from "image/svg+xml" to "text/vnd.tiddlywiki", or "application/x-tiddler" and things work it is not suggested to use application/x-tiddler, when used it caused some unpredictable results, like breaking the wikitext image tag and $image tag displays (1 & 2) below. IMAGE TAGS: 1 - [img[.svg]] 2 - <$image source=".svg"/> 3 - <img src="file:.svg" width="" height="" /> - <img src=".svg" width="" height="" /> 1 - svg tiddler, type "image/svg+xml" with "_canonical_uri" 2,3 - type "image/svg+xml" -- inserts the svg inside an image tag -- src=data:image/svg+xml, and the entire svg content -- -- done by the img widget not having a "_canonical_uri" field 4 inside an image tag -- src = url NO HOVER, LINKS, EXTERNAL IMAGE DISPLAY (inside svg) Image tag is not an option for interactivity images with <img> tags are not allowed to refer to external resources if the svg uses web fonts, the fonts will fail to render and resort to system font this from TW documentation: The implications of the image being rendered within an <img> element are that it is sandboxed; it can't use CSS styles from the parent document, for example. Neither can the image use WikiText features like transclusion. OTHER TAGS: Object tag is suggested for interactivity with external svg's <object data="flename.svg" type="image/svg+xml"></object> --- <p> #document ? <embed src="flename.svg" type="" /> --- <p> #document ? <iframe src="filename.svg" width="100%" height="600"></iframe> --- <p> #document ? Hover & external image display (inside svg) works PROBLEM: tiddler links in external svg can be coded but the usual #tiddler name doesn't work because the link ends up as svgfilename.svg#tiddlername. Using full wiki url-- ie wikiname.html#tiddlername-- will open another complete copy of the wiki in the tiddler. Using target "_top" or "_parent" will open another copy of the wiki in the same tab, replacing the previous copy (which you can return to with the browser's back button). The easiest and least painful way to have tiddler links is in a svg tiddler (set to type "text/vnd.tiddlywiki", not "image/svg+xml"). At least for an overlay for external images and svg's that can be "svg transcluded" using svg's internal image or use tags. test tiddlers will be posted soon... -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e94928e7-3717-4d88-8344-22b43a659a38%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
