Texts

  • Revision slug: SVG/Tutorial/Texts
  • Revision title: Texts
  • Revision id: 19274
  • Created:
  • Creator: Manuel_Strehl
  • Is current revision? No
  • Comment 259 words added

Revision Content

{{ PreviousNext("SVG/Tutorial/Patterns", "SVG/Tutorial") }}

When talking about text in SVG we have to differentiate two almost completely separate topics. The one is the inclusion and display of text in an image, and the other are SVG fonts. The later may be described in a later section of the tutorial, while we will focus completely on the first part: Bringing text into an SVG image.

Basics

We have seen in the introducing example, that the text element can be used to put arbitrary text in SVG documents:

<text x="10" y="10">Hello World!</text>

The x and y attributes determine, where in the viewport the text will appear. The attribute text-anchor, which can have the values start, middle, end or inherit, allows to decide, in which direction the text flows from this point.

Like with the shape elements text can be colorized with the fill attribute and given a stroke with the stroke attribute. Both may also refer to gradients or patterns, which makes simple coloring text in SVG very powerful compared to CSS 2.1.

Setting font properties

An essential part of a text is the font in which it is displayed. SVG offers a set of attributes, many similar to their CSS counterparts, to enable font selection. Each of the following properties can be set as an attribute or via a CSS declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration.

Other text-related elements

tspan

This element is used to mark up sub-portions of a larger text. It must be a child of a text element or another tspan element. A typical usecase is to paint one word of a sentence bold red.

tref

The tref element allows to reference already defined text, effectively copying it in its place.

textPath

This element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path:

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
</text>

{{ PreviousNext("SVG/Tutorial/Patterns", "SVG/Tutorial") }}

Revision Source

<p>{{ PreviousNext("SVG/Tutorial/Patterns", "SVG/Tutorial") }}</p>
<p>When talking about text in SVG we have to differentiate two almost completely separate topics. The one is the inclusion and display of text in an image, and the other are SVG fonts. The later may be described in a later section of the tutorial, while we will focus completely on the first part: Bringing text into an SVG image.</p>
<h3>Basics</h3>
<p>We have seen in the <a href="/en/SVG/Tutorial/Getting_Started" title="/en/SVG/Tutorial/Getting Started">introducing example</a>, that the <code>text</code> element can be used to put arbitrary text in SVG documents:</p>
<pre>&lt;text x="10" y="10"&gt;Hello World!&lt;/text&gt;
</pre>
<p>The <code>x</code> and <code>y</code> attributes determine, where in the viewport the text will appear. The attribute <code>text-anchor</code>, which can have the values start, middle, end or inherit, allows to decide, in which direction the text flows from this point.</p>
<p>Like with the shape elements text can be colorized with the <code>fill</code> attribute and given a stroke with the <code>stroke</code> attribute. Both may also refer to gradients or patterns, which makes simple coloring text in SVG very powerful compared to CSS 2.1.</p>
<h3>Setting font properties</h3>
<p>An essential part of a text is the font in which it is displayed. SVG offers a set of attributes, many similar to their CSS counterparts, to enable font selection. Each of the following properties can be set as an attribute or via a CSS declaration: font-family,
font-style,
font-weight,
font-variant,
font-stretch,
font-size,
font-size-adjust,
kerning,
letter-spacing,
word-spacing and
text-decoration.
</p>
<h3>Other text-related elements</h3>
<h4>tspan</h4>
<p>This element is used to mark up sub-portions of a larger text. It must be a child of a <code>text</code> element or another <code>tspan</code> element. A typical usecase is to paint one word of a sentence bold red.</p>
<h5>tref</h5>
<p>The <code>tref</code> element allows to reference already defined text, effectively copying it in its place.</p>
<h5>textPath</h5>
<p>This element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path:</p>
<pre>&lt;path id="my_path" d="M 20,20 C 40,40 80,40 100,20" /&gt;
&lt;text&gt;
  &lt;textPath xlink:href="#my_path"&gt;This text follows a curve.&lt;/textPath&gt;
&lt;/text&gt;</pre>
<p>{{ PreviousNext("SVG/Tutorial/Patterns", "SVG/Tutorial") }}</p>
Revert to this revision