About Text
SVG allows text to be inserted into the drawing. Text
is held as character data.
SVG treats a text element like a graphical object. You
position text with x and y coordinates and use fill and
stroke options to color text. You can control over how
text appears (such as fonts, letter spacing, alignment).
However, text in SVG isn't positioned exactly the same
way as a basic shape would be. Text is positioned from the
bottom left on an canvas, whereas shapes are positioned
from the top left.
All text is contained with the <text> element.
This allows the SVG processor to know unambiguously how
to render the text.
Text can be further nested by using the <tspan>
element for rich text formatting.
Text in SVG remains character data even after it is rendered,
so it is searchable and can be edited, even if it is a graphical
element.
SVG allows you to internationalize
your text message. SVG has full support for Unicode character
encoding
and
multiple languages (such as Spanish and Japanese etc.)
The <text> element has the following attributes:
Attributes |
Description |
x |
x coordinate for lower left
corner of text string
|
y |
y coordinate for lower left
corner of text string
|
| dx |
Shifts along the x axis for
characters in the <text> element that includes
this attribute
|
dy |
Shifts along the y axis for
characters in the <text> element that includes
this attribute. (Note: can be used for super- or subscript
characters)
|
rotate |
Rotation about the current text
position. Can be used instead of the transform=rotate()
attribute to rotate text
|
textLength |
Author's computation of the
length of the text string. Used to calculate adjustments
when exact positioning is necessary
|
lengthAdjust |
This attribute has two options—"spacing"
and "spacingAndGlyphs" The former (spacing)
will adjust the spacing between glyphs but will not
stretch or squeeze the glyphs themselves. spacingAndGlyphs
(as the name states) will adjust both spacing between
glyphs and glyph size.
|
Presentation Attributes |
Colour, FillStroke, Graphics,
FontSpecification, TextContentElements, TextElements
|
|
Basic Drawing
