TiddlyWiki5 allows you to use SVG to display vector graphics in two ways:
* Tiddlers with the type `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.
** For examples of SVG images see [[Motovun Jack.svg]] and [[Tiddler Fishes.svg]]
* 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:
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:
<svg width="260px" height="260px"><circle cx="150" cy="150" r="100" fill="blue" stoke="red"/><foreignObject x="70" y="110" width="150" height="180"><body>Here is some text that requires a word wrap, and includes a [[link to a tiddler|HelloThere]].</body></foreignObject></svg>
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]]:
