experimenting with svg interactivity in TW

[A Gloom]

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...