Home :: Tutorials :: SVG :: Text

Left Justification

<text x="0" y="13" fill="red" text-anchor="start">Text</text>

Center

<text x="25" y="13" fill="red" text-anchor="middle">Text</text>

Right Justification

<text x="50" y="13" fill="red" text-anchor="end">Text</text>

Multiple Lines

<text x="0" y="13" fill="red">
    <tspan>Line 1</tspan>
    <tspan x="0" dy="1em">Line 2</tspan>
</text>

Text on a Path

<defs>
    <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
    <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>