created: 20131028132700000 modified: 20160618085859219 tags: Features title: Using SVG type: text/vnd.tiddlywiki 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 `` 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: ``` {{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 `` 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 `` element directly. For example: Note that inline SVG elements don't need an `` directive. ! Including HTML or WikiText content in SVG images You can include simple text strings in SVG images using the `` element: Hello, out there HTML or WikiText content can be included within inline SVG images using the `` element. For example: Here is some text that requires a word wrap, and includes a [[link to a tiddler|HelloThere]]. ! Transcluding SVG elements 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: <$edit-text tiddler="$:/SVGExampleRadius" tag="input"/> ! Making curved text with SVG {{Making curved text with SVG}}