(click anywhere to close)
OPEN MENU

[SVG] Text

category: Website | course: SVG | difficulty:

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.

Standard Text

To create some standard text, use

<text x=”xPos” y=”yPos”> your text </text>

In the case of text, unlike other elements, the x and y refer to the bottom left corner.

To change this, use the text-anchor attribute. The possible values are start, middle and 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>
Juan plays the guitar. But he also likes playing with SVG.

Vertical Text

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>
Juan plays the guitar. But he also likes playing with SVG.

Text Length

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>
Juan plays the guitar. Juan plays the guitar.

Text Wrapping

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”> your text </tspan>

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>
Juan plays the guitar. He also plays with SVG But mostly plays guitar, though.

Text Spanning

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 dx and 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, super and sub.

<svg>
    <text x="10" y="20">
        Juan plays the <tspan baseline-shift="sub">guitar</tspan>. 
    </text>
</svg>
Juan plays the guitar.

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>
Juan is cool. He plays the guitar.

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:

<text> <textPath xlink:href=”#nameOfPath”> your text </textPath> </text>

Even though you’d think the <textPath> already starts to display the text, it still needs to be within a <text> element.

<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>
This is text along a path!
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)