1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-15 12:40:28 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/howtos/Using SVG.tid
Myeongjin 80256b4dab Update document in tiddlywiki.com edition
* Add string '.htm' to 'Saving with TiddlyIE'
* Change external links to match locale with wiki language
* Add instructions for use to 'Saving on Android'
* Change string in 'task'
* Change instructions for use in 'Saving on iPad/iPhone'
* Add newline to 'TiddlyDesktop Releases'
* Remove caption from 'Serving TW5 from Android'
* Change link to external in tiddlers which tagged 'Editions'
* Remove string 'index.html' from 'Some of the things you can do with TiddlyWiki'
* Change link 'TiddlyWiki Groups' to 'Forums' in tiddlers which tagged 'Community'
* Remove CamelCase link 'TiddlyWiki' from tiddlers tagged 'Community'
* Change string 'done' to 'Upgrade' in 'UpgradeMechanism'
* Change buttons to images in 'How to export tiddlers'
* Add images about buttons to tiddlers
* Add quotation mark to text 'edit' in 'Signing the Contributor License Agreement'
* Rename 'UsingSVG' to 'Using SVG'
* Change link 'TypedBlockWikiText' to 'Typed Blocks in WikiText' in 'Using SVG'
* Add tiddler 'Using Stamp'
* Add 'rel="noopener noreferrer"' to external links
* Add description about 'rel="noreferrer"' to 'HTML in WikiText'
* Add link of prerelease version about translators edition, and how to translate on Node.js, in 'Translate TiddlyWiki into your language'
* Change string 'dropdown' to 'tab' in 'Installing a plugin from the plugin library'
* Add download button to 'Empty Edition'
2016-07-06 01:10:51 +09:00

55 lines
2.5 KiB
Plaintext

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 `<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:
```
{{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 `<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="150" height="100">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
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 `<text>` element:
<svg width="100px" height="30px" viewBox="0 0 1000 300"><text x="250" y="150" font-family="Verdana" font-size="55">Hello, out there</text><rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /></svg>
HTML or WikiText content can be included within inline SVG images using the `<foreignObject>` element. 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>
! 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]]:
<svg width="150" height="150"><circle cx="75" cy="75" r={{$:/SVGExampleRadius}} stroke="black" stroke-width="2" fill="green"/></svg>
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}}