SVG: Using Text

SVG is not only about creating shape. In this demo, we shows you how to add Text with SVG.

Basic Implementation

<svg>
<text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>
</svg>

Basic Text Styles with CSS

Bold

<text style="font-weight: bold;">This is bold text in Scalable Vector Graphic (SVG)</text>

Italic

<text style="font-style: italic;">This is italic text in Scalable Vector Graphic (SVG)</text>

Underline

<text style="font-decoration: underline;">This is underlined text in Scalable Vector Graphic (SVG)</text>

Using tspan

<text x="0" y="15"><tspan style="font-weight: bold;">This is bold</tspan>, <tspan style="font-style: italic;">this is italic</tspan> and <tspan style="text-decoration: underline;">this is underline</tspan>, all in one line of text</text>

This is bold, this is italic and this is underline

Text Orientation

<svg>
<text x="70" y="20" style="writing-mode: tb; glyph-orientation-vertical:0;" class="japanese">ぁぃぅぇぉかき</text>
</svg>

Text Outlining

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="#fff">This is SVG Text</text>
</svg>

Text Path

<svg>

<defs>
<path id="textpath" fill="none" stroke="#000000" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
</defs>

<use xlink:href="#textpath"/>
<text x="10" y="100">
<textPath xlink:href="#textpath">
Lorem ipsum dolor sit amet consectetur.
</textPath>
</text>

</svg>

Text Gradient

<svg>

<defs>
<linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop stop-color = "#999" offset = "0%"/>
    <stop stop-color = "#111" offset = "100%"/>
</linearGradient>
</defs>

<text x="0" y="80" font-size="72" font-weight="bold" fill="url(#textgradient)" stroke="none">Gradient</text>

</svg>