1. Standard Text
2. Vertical Text
3. Text Length
4. Text Wrapping
5. Text Spanning
6. Defining Text for Mu...
7. Text along a Path
Even though the regular HTML tags aren’t available within vector graphics, SVG makes up for that by supplying a set of special text elements. These have some disadvantages if you want to place long amounts of text within the graphic, but have numerous advantages if you just want a few beautiful lines. The biggest issue is that text doesn’t naturally wrap and form paragraphs like with HTML, but you get much more text and letter customizability in return.
To create some standard text, use
<text x=”xPos” y=”yPos”>
In the case of text, unlike other elements, the
y refer to the bottom left corner.
To change this, use the
text-anchor attribute. The possible values are
end, which set what part of the text element the
x attribute refers to.
Just like all other SVG elements, you can fill and stroke the text in any way you like.
<!-- Notice how text is on a single line and cut off at the edge of the SVG --> <svg> <text x="10" y="20"> Juan plays the guitar. But he also likes playing with SVG. </text> </svg>
To create vertical text, you can set the
writing-mode attribute to
tb (top to bottom), which essentially only rotates the text. If you want letters to still stand upright, but just underneath instead of next to each other, you can undo this rotation of the letters or so-called glyphs. To do so, use the
glyph-orientation-vertical attribute, which accepts any number, and reads it as an amount of degrees.
<svg> <text x="20" y="10" writing-mode="tb"> Juan plays the guitar. </text> <text x="60" y="10" writing-mode="tb" glyph-orientation-vertical="0" > But he also likes playing with SVG. </text> </svg>
Instead of manually setting font size and letter spacing with CSS to make text fit certain dimensions, you can also let SVG do that for you. Use the
textLength attribute to set a fixed width, and the
lengthAdjust attribute to determine how it will scale. This value could be
spacing (which grows/shrinks spaces between words), or
spacingAndGlyps (which changes spacing, as well as glyph size).
<svg> <text x="10" y="20" textLength="300"> Juan plays the guitar. </text> <text x="10" y="40" textLength="300" lengthAdjust="spacingAndGlyphs"> Juan plays the guitar. </text> </svg>
We’ve seen that the SVG
<text> element can only deal with single lines of text, but luckily, there’s another element to simulate multiline text. The syntax is:
<tspan dx=”xOffset” dy=”yOffset”>
This element will position itself relative to the previous line of text. If you supply a single number as xOffset or yOffset, the
<tspan> element will offset all its content by that amount. If you supply multiple numbers, separated by spaces, it will apply these offsets to single glyphs.
<svg> <text x="10" y="20"> Juan plays the guitar. <tspan dx="-100" dy="20"> He also plays with SVG </tspan> <tspan dx="-200" dy="20"> But mostly plays guitar, though. </tspan> </text> </svg>
Alternatively, you can use the
<tspan> element as the SVG equivalent of the HTML
<span> element – to style parts of an element’s content. When used this way, the
dy attributes are completely optional.
An extra attribute is also available, which is
baseline-shift. It makes whatever is inside superscript or subscript. The possible values are, not surprisingly,
<svg> <text x="10" y="20"> Juan plays the <tspan baseline-shift="sub">guitar</tspan>. </text> </svg>
Defining Text for Multiple Use
Similar to basic shapes, it’s possible to define a piece of text somewhere, and instantiate it multiple times within the graphic. All you have to do is give a
<text> element a name, using the familiar
id attribute, and place it inside a
<defs> element. Now you have defined a text element you can access by using the name you gave it.
We can then use the familiar
<use> element to instantiate it.
<svg> <defs> <text id="JUAN"> Juan is cool. He plays the guitar. </text> </defs> <use xlink:href="#JUAN" x="20" y="20"/> </svg>
Text along a Path
Perhaps one of the biggest advantages of SVG text over HTML tags, is that text can easily be laid out along a custom path. For this, two components are required: a definition of the path we want to use, and text placed within a special element that links to our path.
The first part is nothing special; just create a path the way inside a
<defs> element the way you’re used to. And give it a name we can use, of course.
The second part requires a new element:
Even though you’d think the
<textPath> already starts to display the text, it still needs to be within a
<svg> <defs> <path id="thePath" d="M5,5 l80,80 l80,-80" /> </defs> <text> <textPath xlink:href="#thePath"> This is text along a path! </textPath> </text> </svg>