SVG текст: знакомство

Дата публикации: 2016-02-19

От автора: у SVG текста есть несколько существенных недостатков, связанных с HTML контентом… но в определенных случаях у текста на SVG есть и свои преимущества. Иногда только с помощью SVG можно решить конкретные проблемы с текстом в макете на веб-странице.

SVG текст как макет

SVG не представляет себе текст, как HTML: текст не представляется строкой символов, каждый из которых оборачивается контейнером и стилизуется. Текст представляется как графический элемент, который отображается на странице, как и все остальные элементы: для размещения и масштабирования в области viewBox текст должен обладать как минимум координатами и размером шрифта:

<svg xmlns="//www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="60" font-size="55" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        SEVEN NATION ARMY
    </text>
</svg>

<text y="60" font-size="55" font-weight="bold"

font-family="Avenir, Helvetica, sans-serif">

SEVEN NATION ARMY

</text>

</svg>

Font-size выставляется в пикселях относительно viewBox. Данный атрибут делает текст автоматически адаптивным. Без этого атрибута SVG текст в различных браузерах будет отображаться непредсказуемо, т.е. font-size обязательный атрибут. Обратите внимание, что атрибут У задает положение базовой линии текста (линии, на которую «сажаются» буквы). Если значение не задано, то берется 0. Новички в SVG очень часто не указывают атрибут У, тем самым задирая базовую линию до самой верхней границы viewBox, что делает текст невидимым.

У строчных букв есть нижние выносные элементы, как у буквы «у». Выносные элементы располагаются ниже базовой линии.

Правила позиционирования

Простой свод правил для заголовков из SVG текста:

Если текст не виден, значение атрибута У элемента <text> должно быть как минимум больше атрибута font-size.

Последнее значение атрибута viewBox также должно быть равно или больше значения font-size.

Значения со второго по последнее атрибута viewbox будут изменяться в зависимости от объема текста, точки его расположения (расскажу в следующей статье), значения font-size, font-weight и значения Х тега .

Как и в HTML, лишние пробелы в SVG не учитываются при отображении текста.

Значение Х задает сдвиг текста по горизонтальной оси в области viewBox. Это значение является атрибутом тега , а не CSS правилом. Если Х не задан, берется 0. Все остальные атрибуты помимо Х и У в SVG тексте дублируют свои аналоги в CSS и должны задаваться только так, как в примере ниже:

<svg xmlns="//www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <defs>
        <style>
            text { 
                font-family: Avenir, Helvetica, sans-serif;
                font-size: 55px;
                font-weight: bold; 
                text-transform: uppercase;
                }
        </style>
    </defs>
    <text y="60">Seven Nation Army</text>
</svg>

<defs>

<style>

text {

font-family: Avenir, Helvetica, sans-serif;

font-size: 55px;

font-weight: bold;

text-transform: uppercase;

}

</style>

</defs>

<text y="60">Seven Nation Army</text>

</svg>

Обратите внимание, если мы переходим от SVG атрибута к CSS свойству, то для font-size необходимо задать единицы измерения. Есть одно путающее всех исключение – цвет текста. Так как SVG представляет текст графикой, то цвет текста задается через fill:

text { 
        font-family: Avenir, Helvetica, sans-serif;
        font-size: 55px;
        font-weight: bold; 
        text-transform: uppercase;
        fill: red;
}

text {

font-family: Avenir, Helvetica, sans-serif;

font-size: 55px;

font-weight: bold;

text-transform: uppercase;

fill: red;

}

Если атрибут не указан, то по умолчанию заливка текста черная, как SVG shape. Атрибут fill можно задавать с помощью CSS системы цветов. Осталось несколько CSS свойств для текста, которые еще не реализованы в SVG, такие как text-shadow. Однако в различных браузерах делается что-то подобное.

No-Wrap

Очень важно сказать, что в SVG отсутствует само понятие обертывания текста, по крайней мере, в текущей спецификации. А это означает, что весь текст рассматривается однострочными группами. Если текст вылезает за края области viewBox, он просто исчезает из поля зрения.

Преимущество в SEO

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

… и еще много чего интересного

Я рассказал вам только про самые основы SVG текста. В следующей статье мы рассмотрим потенциальные проблемы и возможные решения, связанные с встраиваемыми шрифтами в SVG.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: svg