mozilla

Revision 19273 of Texts

  • Revision slug: SVG/Tutorial/Texts
  • Revision title: Texts
  • Revision id: 19273
  • Created:
  • Creator: Manuel_Strehl
  • Is current revision? No
  • Comment page created, 172 words added

Revision Content

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.

Revision Source

<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>
Revert to this revision