TiddlyWiki5 allows you to use SVG to display vector graphics in two ways:
image/svg+xml
are interpreted as SVG images, and displayed and transcluded as self-contained <img>
elements with the SVG embedded as a data URI in the src
attribute.You can embed an SVG image tiddler using the ordinary transclusion syntax:
{{Motovun Jack.jpg}}
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 <text>
element:
HTML or WikiText content can be included within inline SVG images using the <foreignObject>
element. For example:
When embedding SVG elements you can also use WikiText features like transclusion. For example, here is an SVG circle with the radius set to the value in the tiddler $:/SVGExampleRadius:
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.