TiddlyWiki5 allows you to use SVG to display vector graphics in two ways:
image/svg+xmlare interpreted as SVG images, and displayed and transcluded as self-contained
<img>elements with the SVG embedded as a data URI in the
You can embed an SVG image tiddler using the ordinary transclusion syntax:
You can also use Typed Blocks in WikiText to embed an inline SVG tiddler.
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.
The other way to use SVG is to embed the
<svg> element directly. For example:
Note that inline SVG elements don't need an
<?xml version="1.0"?> directive.
You can include simple text strings in SVG images using the
HTML or WikiText content can be included within inline SVG images using the
<foreignObject> element. For example:
You can edit the value of the radius here:
This demo shows how to use SVG to render transcluded text along a path. Enter some text in the textbox below to try it out; view the source to see how it is done.