created: 20131028132700000 fr-title: SVG, son Utilisation modified: 20150622062645411 tags: Features title: UsingSVG type: text/vnd.tiddlywiki 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 `` 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|Typed Blocks in WikiText]] pour intégrer un tiddler SVG en mode ligne. Toutefois, le rendu de l'image par l'élément `` fait qu'elle passe par un <<.def "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 `` directement. Par exemple<<:>> Notez que les éléments SVG en mode ligne ne nécessitent pas de directive ``. ! 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 `` <<:>> Salut d'ici Le contenu HTML or WikiText peut être inclu dans des images en mode ligne via l'élément ``. Par exemple<<:>> Voici du texte qui réclame un retour à la ligne, et intègre un [[lien vers un tiddler|HelloThere]]. ! 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<<:>> <$edit-text tiddler="$:/SVGExampleRadius" tag="input"/> ! Tracer un texte incurvé avec SVG {{Making curved text with SVG}}