TiddlyWiki5 propose d'afficher les illustrations vectorielles SVG de deux façons :

• Les Tiddlers avec le type image/svg+xml sont interprétés comme des images SVG, et affichés et transclus des éléments <img> autonomes avec du code SVG intégré (le lien URI vers les données source est dans l'attribut src)
  • Exemples d'images SVG, voir Motovun Jack.svg et Tiddler Fishes.svg
• WikiText peut aussi inclure directement des éléments SVG en ligne. Voir ci-dessous pour un exemple.

Intégration de tiddlers SVG

Vous pouvez intégrer un tiddler image SVG en utilisant la syntaxe ordinaire de transclusion :

{{Motovun Jack.jpg}}

De même, vous pouvez faire appel aux blocs typés pour intégrer un tiddler SVG en mode ligne.

Toutefois, le rendu de l'image par l'élément <img> fait qu'elle passe par un bac à sable, et ne peut pas récupérer les styles CSS du document parent, par exemple. L'image, en elle-même, ne peut pas utiliser de fonctionnalités WikiText comme la transclusion.

Intégration d'éléments SVG

L'autre façon d'utiliser SVG est d'intégrer des éléments <svg> directement. Par exemple :

Notez que les éléments SVG en mode ligne ne nécessitent pas de directive <?xml version="1.0"?>.

Inclure du contenu HTML ou WikiText dans des images SVG

Vous pouvez inclure de simples chaine de texte dans des images SVG par l'emploie de l'élément <text>  :

Le contenu HTML or WikiText peut être inclu dans des images en mode ligne via l'élément <foreignObject>. Par exemple :

Transclusion d'éléments SVG

Lors de l'intégration d'éléments SVG vous pouvez faire appel à des fonctionnalités WikiText comme la transclusion. Par exemple, voici un cercle SVG dont la valeur du rayon est réglée dans le tiddler $:/SVGExampleRadius :

Vous pouvez modifier la valeur du rayon :

Tracer un texte incurvé avec SVG

Cette démonstration montre comment utiliser SVG pour faire suivre un chemin incurvé à un texte transclu. Entrez du texte dans la zone çi-dessous pour essayer ; visualiser le code source pour voir examiner le fonctionnement.