• SVG
• Карманное руководство по написанию SVG

• Введение
• Глава 1. Организация документа
• Глава 2. Базовые фигуры и контуры
• Глава 3. Рабочая область
• Глава 4. Заливки и обводки
• Глава 5. Элемент <text>
• Глава 6. Продвинутые функции: градиенты, паттерны, контуры обрезки
• Заключение

Элемент <text> определяет графику, состоящую из текста. Для управления текстом есть специальные атрибуты, а также к нему можно применять градиенты, паттерны, контуры обрезки, маски или фильтры.

Написание и редактирование элемента <text> в SVG предоставляют очень мощные возможности для создания масштабируемого текста в качестве графики, которую можно легко изменять и редактировать в коде SVG.

Помните, что надо быть внимательными к размерам области просмотра при работе с примерами в этом разделе. Область просмотра, как уже упоминалось, определяет видимую часть SVG, и может понадобиться изменить область просмотра в зависимости от конкретных операций.

Базовые атрибуты

Текстовые атрибуты SVG располагаются в элементе <text>, который в свою очередь находится в элементе <svg>. При помощи этих атрибутов мы можем управлять некоторым базовым оформлением для нашего текста, а также описывать тонкости его отображения на холсте, дающее возможность полного контроля для его размещения на экране.

x, y, dx, dy

Первый символ в элементе <text> отображается в соответствии с установленными значениями x и y. Значение x определяет начало текста по оси x, а y — горизонтальное положение нижнего края текста.

x и y устанавливают координаты в абсолютных единицах, а dx и dy — относительные координаты. Это особенно удобно при использовании в связке с элементом <tspan>, который будет рассмотрен в следующем разделе.

<svg width="620" height="100">
    <text x="30" y="90" fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

На изображении выше текст начинается с 30px от левого края области просмотра SVG, а нижний край текста установлен в 90px от верхней границы этой области просмотра: x="30" y="90".

rotate

Поворот может быть установлен для определённой буквы/символа и/или для элемента в целом.

Если в атрибуте rotate установлено только одно значение, это приведёт к повороту каждого символа на это значение. Также можно использовать строку значений, которая выбирает и устанавливает разное значение поворота каждому символу. Если число значений меньше количества символов, в этом случае последнее значение установит поворот для остальных символов.

У текста на изображении ниже для всей графики задан поворот элементом transform, но каждому символу тоже установлено своё значение: rotate="20,0,5,30,10,50,5,10,65,5".

<svg width="600" height="250">
    <text x="30" y="80" fill="#ED6E46" font-size="100" rotate="20,0,5,30,10,50,5,10,65,5" transform="rotate(8)" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

textLength & lengthAdjust

Атрибут textLength указывает длину текста. Изменяя интервал между символами, длина текста регулируется таким образом, чтобы в итоге соответствовать длине, указанной в этом атрибуте.

textLength следующего примера установлен в 900px. Заметьте, как интервалы между символами увеличились, чтобы заполнить это пространство.

<svg width="950" height="100">
    <text x="30" y="90" fill="#ED6E46" font-size="100" textLength="900" font-family="'Leckerli One', cursive">Watermelon</text>
</svg>

Посмотреть демо можно здесь

При использовании атрибутов textLength и lengthAdjust вместе, межсимвольный интервал и размер символа будут отрегулированы таким образом, чтобы соответствовать этим новым значениям длины.

Значение «spacing» приведёт к виду, который напоминает пример выше, где интервалы между символами увеличены, чтобы заполнить пространство: «lengthAdjust="spacing"».

Значение «spacingAndGlyphs» приказывает интервалу и размеру символа отрегулироваться соответственно: lengthAdjust="spacingAndGlyphs".

Посмотреть демо можно здесь

Элемент tspan

Элемент <tspan> очень важен, потому что в настоящее время SVG не поддерживает автоматические разрывы строк или перенос слов. <tspan> позволяет рисовать множественные линии текста путём выделения определённых слов или символов, чтобы затем манипулировать ими независимо друг от друга.

Вместо определения новой системы координат для дополнительных линий, элемент <tspan> позиционирует эти новые линии текста относительно предыдущей.

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

В примере ниже слова «are» и «delicious» находятся в раздельных элементах <tspan> в элементе <text>. Используя атрибут dy в каждом из этих <tspan>,мы позиционируем слово по оси y относительно слова перед ним.

«are» спозиционированно в -30px от «Watermelons», а «delicious» в 50px от «are».

<svg width="775" height="500">
    <text x="15" y="90" fill="#ED6E46" font-size="60" font-family="'Leckerli One', cursive"> Watermelons
        <tspan dy="-30" fill="#bbc42a" font-size="80">are</tspan>
        <tspan dy="50">delicious</tspan>
    </text>
</svg>

Посмотреть демо можно здесь

Вы также можете передвигать каждый символ отдельно при помощи списка значений, как показано в примере ниже. Буква/символ затем передвинутся в соответствии с позицией буквы/символа перед ними, и «delicious» теперь отпозиционирован в соответствии с «e» в слове «are».

Посмотреть демо можно здесь

tspan, содержащий «are», имеет следующий список значений атрибута dy: dy="-30 30 30".

Свойства интервалов

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

Понимание, как правильно использовать эти свойства, поможет гарантировать, что графика отобразится именно так, как задумывалось.

kerning & letter-spacing

Кернинг относится к процессу регулирования интервалов между символами. Свойство kerning позволяет регулировать этот интервал, основанный на таблицах кернинга, которые включены в используемый шрифт или устанавливать уникальную длину.

Значение auto указывает, что межсимвольный интервал должен быть основан на таблице кернинга, которая включена в используемый шрифт.

В примере ниже свойство kerning установлено в значение auto, что в данном случае не имеет визуального эффекта, поскольку это значение по умолчанию.

<svg width="420" height="200">
    <text x="2" y="50%" fill="#ef9235" font-size="100" font-family="'Raleway', sans-serif" font-weight="bold" kerning="auto">Oranges</text> 
</svg>

Отрегулировать расстояние между символами можно путём простого включения числовых значений: kerning="30".

Также допускается и значение inherit.

letter-spacing позволяет выбрать одно из трёх значений: normal, <length> или inherit. Числовые значения здесь имеют точно такой же эффект с интервалом, как и в случае с kerning. Свойство letter-spacing предназначено служить добавкой к интервалам, получившимся благодаря свойству kerning.

word-spacing

Свойство word-spacing определяет интервал между словами.

<svg width="750" height="200">
    <text x="2" y="50%" fill="#ef9235" font-size="70" font-family="'Raleway', sans-serif" word-spacing="30">Oranges are Orange</text> 
</svg>

Другие допустимые значения здесь — normal (по умолчанию) и inherit.

text-decoration

Свойтсво text-decoration позволяет использовать underline, overline и line-through в тексте SVG.

В то время как порядок рисования не всегда оказывает эффект на визуальный вывод, тем не менее порядок имеет значение в случае с text-decoration. Все значения для декорирования текста, кроме line-through, должны быть применены до того, как текст будет закрашен и/или обведён; таким образом текст отобразится поверх декорирования.

line-through должно быть применено после того, как текст будет закрашен и/или обведён, тем самым декорирование отобразится поверх текста.

Вот так выглядят результаты применения text-decoration="underline" и text-decoration="line-through".

Текст по контуру

Как уже упоминалось, встроенный SVG предоставляет на выбор продвинутые настройки, аналогичные возможностям программ для встроенной векторной графики. В самом SVG-коде мы можем позиционировать текст точно так, как мы хотим отобразить его на экране.

Продвигаясь в этой манипуляции еще дальше, <text> в SVG можно настроить так, чтобы он следовал за элементом <path>.

Элемент textPath

Элемент textPath – вот где находится вся магия этой функции. Хотя обычно SVG-текст размещается в элементе <text>, в данном случае он будет располагаться в элементе <textPath>, который как раз уже находится в элементе <text>.

Затем <textPath> обратится по id к выбранному контуру, который болтается в элементе <defs> и готов к использованию.

Базовый синтаксис:

<svg>
    <defs>
        <path id="testPath" d="<....>"/>
    </defs>
    <text>
        <textPath xlink:href="#testPath">Place text here</textPath> 
    </text> 
</svg>

Вот так выглядит векторный контур, используемый в коде ниже.

После создания этого контура в программе для векторной графики сам SVG-код элемента <path> (который не будет включать в себя цвет, как показано выше) можно скопировать и вставить в элемент <defs> в <svg>, который также размещается в коде выше.

<svg width="620" height="200">
    <defs>
        <path id="testPath" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <text x="2" y="40%" fill="#765373" font-size="30" font-family="'Lato', sans-serif">
        <textPath xlink:href="#testPath">There are over 8,000 grape varieties worldwide.</textPath> 
    </text> 
</svg>

xlink:href

Атрибут xlink:href в <textPath> позволяет ссылаться на контур, по которому будет отображаться текст.

startOffset

Атрибут startOffset представляет величину смещения текста от начала контура. Значение «0%» указывает начальную точку контура, а значение «100%» — конечную.

Значение startOffset в примере ниже установлено в «20%», что заставляет текст начаться с 20% вдоль контура. Размер шрифта был специально уменьшен, чтобы предотвратить частичное выпадение текста из области просмотра при перемещении.

Если добавить цвет к обводке контура при помощи элемента <use>, станет понятнее, что именно здесь происходит.

<svg width="620" height="200">
    <defs>
        <path id="testPath" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
    </defs>
    <use xlink:href="#testPath" fill="none" stroke="#7aa20d" stroke-width="2"/>
    <text x="2" y="40%" fill="#765373" font-size="20" font-family="'Lato', sans-serif">
        <textPath xlink:href="#testPath" startOffset="20%">There are over 8,000 grape varieties worldwide.              
        </textPath> 
    </text> 
</svg>

Посмотреть демо можно здесь