The attributes and properties on the <text> element indicate the writing direction, font specification, and painting attributes which describe how exactly to render the characters. In this post, I am going to describe the relevant text-specific attributes and properties and particular text layout.
Read Also: How To Create Gradients in SVG
Table of Contents
Creating text in SVG with <text> element
The simplest form of the <text> element requires only two attributes, x, and y, which define the point where the baseline of the first character of the element’s content is placed.
The default style for text is to have a fill color of black and no outline. If you set the outline as well as the fill, the text looks thick. If you set only the outline, you can get a fairly pleasant set of outlined glyphs (A glyph is the visible representation of a character or characters where a single character can have many different glyphs to represent it).
The following example uses the placement, stroke, and fill characteristics for <text> element.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1" fill="none"></rect>
<text x="30" y="20">Normal Text</text>
<text x="30" y="55" style="stroke: green;">Outlined filled Text</text>
<text x="30" y="90" style="stroke: green; stroke-width: 0.8;
fill: none;">Outlined only Text</text>
</svg>Preview:
Uses of <tspan> element
Within a <text> element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by using a <tspan> element.
Within <tspan> element, x and y are single coordinates, whose value represents the new absolute X and Y coordinate for the current text position for rendering the glyphs that correspond to the first character and dx and dy are single lengths, whose value represents the new relative X and Y coordinate for the current text position. The rotate property is the supplemental rotation about the current text position.
The x, y, dx, dy and rotate are useful for minor positioning adjustments between characters or for major positioning adjustments, such as moving the current text position to a new location to achieve the visual effect of a new line of text.
The following example shows the uses of the <tspan> element to indicate that the word “tspan” is to use a bold font and have red fill.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1" fill="none"></rect>
<g font-family="Verdana" font-size="15" >
<text x="10" y="50" fill="blue" >
It is a <tspan font-weight="bold" fill="red" >tspan</tspan>
element.</text> </g>
</svg> Preview:
Aligning text with text-anchor property
The <text-anchor> property is used to align a string of text relative to a given point. This property is applied to each individual text chunk within a given <text> element. The <text-anchor> property has the following values.
start
Here the rendered characters are aligned such that the start of the text string is at the initial current text position.
middle
With this value, the rendered characters are aligned such that the middle of the text string is at the current text position.
end
Here the rendered characters are aligned such that the end of the text string is at the initial current text position.
The following example shows the uses of the text-anchor property with values start, middle, and end.
<svg width="300" height="200" viewBox="0 0 200 100">
<rect width="200" height="100" stroke="blue" stroke-width="1" fill="none"></rect>
<g style="font-size: 14pt; stroke: red;">
<path d="M 110 10 110 110" style="stroke: green; fill: none;"/>
<text x="110" y="30" style="text-anchor: start">Start of Text </text>
<text x="110" y="60" style="text-anchor: middle">Middle of Text</text>
<text x="110" y="90" style="text-anchor: end">End of Text</text>
</g>
</svg>Preview:
Selecting font with font selection properties
SVG uses the font specification properties to select specific font while creating text, which is described below.
font-family
This property indicates which font family is to be used to render the text, specified as a prioritized list of font family names or generic family names.
font-style
This property specifies whether the text is to be rendered using a normal, italic, or oblique face.
font-variant
This property indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters.
font-weight
This property refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
font-stretch
This property indicates the desired amount of condensing or expansion in the glyphs used to render the text.
font-size
This property refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multi-line layout environment.
font-size-adjust
This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.
font
It is the Shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’ and ‘font-family’.
The following example uses the different font selection properties, font-style, font-variant, font-weight’, font-size, and font-family to select and style the font.
<svg width="300" height="200" viewBox="0 0 250 160">
<rect width="250" height="160" stroke="blue" stroke-width="1" fill="none"></rect>
<g style="font-size: 16pt" stroke="brown">
<text x="40" y="20" style="font-weight:bold;">bold text</text>
<text x="40" y="55" style="font-style:italic;">italic text</text>
<text x="40" y="85" style="font-family:verdana;">verdana font</text>
<text x="40" y="110" style="font-variant:small-caps;">small-caps</text>
<text x="40" y="145" style="font-size: 20pt">Font Size 20pt</text>
</g>
</svg>Preview:
Setting Length of text using textLength property
You can specify the length of the text as the value of the textLength attribute. SVG will then fit the text into the given space. It does so by adjusting the space between glyphs and leaving the glyphs themselves untouched, or it can fit the words by adjusting both the spacing and glyph size.
The following example uses the “textLength” and “lengthAdjust” attributes to set the length and adjust its space.
<svg width="350" height="250" viewBox="0 0 250 150">
<rect width="250" height="150" stroke="blue" stroke-width="1" fill="none"></rect>
<g style="font-size: 14pt;stroke: blue;">
<text x="20" y="20"
textLength="220" lengthAdjust="spacing">TextLength</text>
<text x="20" y="50"
textLength="220" lengthAdjust="spacingAndGlyphs">TextLength</text>
<text x="20" y="80">TextLength</text>
<text x="20" y="110"
textLength="60" lengthAdjust="spacing">TextLength</text>
<text x="20" y="140"
textLength="60" lengthAdjust="spacingAndGlyphs">TextLength</text>
</g>
</svg>Preview:
Writing text on a path using textPath element
In addition to text drawn in a straight line, SVG also allows you to place text along with the shape of a <path> element. You can include the given text within a <textPath> element to specify that a block of text is to be rendered along with the shape of a <path>, which includes an xlink:href attribute with a URI reference to a <path> element.
Here is a simple example to write text on a path using textPath element.
<svg width="350" height="250" viewBox="0 0 1000 300">
<rect width="1000" height="300" stroke="blue" stroke-width="2" fill="none"></rect>
<defs>
<path id="Path" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#Path" fill="none" stroke="red" />
<text font-family="Verdana" font-size="42.5" fill="blue" >
<textPath xlink:href="#Path">writing text on a path using textPath element</textPath>
</text>
</svg>Preview:
Read Next: How To Create Patterns in SVG
Comments are closed.