SVG текст

Для вывода текста используется элемент <text>.

Пример №1

Выводим текст:

SVG код:

<svg height="30" width="200">
   <text x="0" y="15" fill="red">Я люблю SVG!</text>
</svg> 

Пример №2

Повернем текст:

SVG код:

<svg height="60" width="200">
   <text x="0" y="15" fill="red" transform="rotate(30 20,40)">Я люблю SVG</text>
</svg> 

Пример №3

Элемент <text> может содержать любое число подгрупп, состоящих из элемента <tspan>. Каждый элемент <tspan> может определять свои данные о формате и позиционировании.

Текст на нескольких строках (с элементом <tspan>):

SVG код:

<svg height="90" width="200">
   <text x="10" y="20" style="fill:red;">Несколько строк:
     <tspan x="10" y="45">Первая строка .</tspan>
     <tspan x="10" y="70">Вторая строка .</tspan>
   </text>
</svg> 

Пример №4

Текст как ссылка (с элементом <a>):

SVG код:

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
   <a xlink:href="http://msiter.ru/" target="_blank">
     <text x="0" y="15" fill="red">Я люблю SVG!</text>
   </a>
</svg>