TiddlyWiki5 allows you to use SVG to display vector graphics in two ways:
- Tiddlers with the type
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
- WikiText can also include inline SVG elements directly. See below for an example.
Embedding SVG tiddlers
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.
Embedding SVG elements
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.
Including HTML or WikiText content in SVG images
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:
Transcluding SVG elements
You can edit the value of the radius here:
Making curved text with SVG
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.