Текст в SVG

Основы

<svg>
<text x="0" y="15">Текст в масштабируемой векторной графике(</text>
</svg>

Основные стили CSS

Жирный

<text style="font-weight: bold;">Жирный текст в масштабируемой векторной графике(SVG)</text>

Курсив

<text style="font-style: italic;">Текст курсивом в масштабируемой векторной графике(SVG)</text>

Подчеркнутый

<text style="font-decoration: underline;">Подчеркнутый текст в масштабируемой векторной графике(SVG)</text>

Используем tspan

<text x="0" y="15"><tspan style="font-weight: bold;">Жирный текст, текст курсивом и подчеркнутая часть.</text>

Ориентация текста

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

Обводка текста

<svg>
<text x="0" y="50px" font-size="50px" font-weight="bold" stroke="black" stroke-width="0.5" fill="#fff">Обводка</text>
</svg>

Текст по линии

<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>

Градиент в тексте

<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">Градиент</text>

</svg>