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

2

Від автора: у SVG тексту є кілька суттєвих недоліків, пов’язаних з HTML контентом… але в певних випадках тексту на SVG є і свої переваги. Іноді тільки за допомогою SVG можна вирішити конкретні проблеми з текстом в макеті на веб-сторінці.

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

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

SEVEN NATION ARMY

Font-size виставляється в пікселях щодо viewBox. Даний атрибут робить текст автоматично адаптивним. Без цього атрибуту SVG текст в різних браузерах буде відображатися непередбачувано, тобто font-size обов’язковий атрибут. Зверніть увагу, що атрибут У задає положення базової лінії тексту (лінії, на яку «садять» букви). Якщо значення не задано, то береться 0. Новачки в SVG дуже часто не вказують атрибут, тим самим задираючи базову лінію до самої верхньої межі viewBox, що робить текст невидимим.

У малих літер є нижні виносні елементи, як букви «у». Виносні елементи розташовуються нижче базової лінії.

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

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

Якщо текст не видно, значення атрибута В елементі повинно бути як мінімум більше атрибут font-size.

Останнє значення атрибута viewBox також повинно бути рівне або більше значення font-size.

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

Як і в HTML, зайві прогалини в SVG не враховуються при відображенні тексту.

Значення Х задає зсув тексту щодо горизонтальної осі в області viewBox. Це значення є атрибутом тегу , а не CSS правилом. Якщо Х не задано, береться 0. Всі інші атрибути крім Х і У в SVG тексті дублюють свої аналоги в CSS і повинні задаватися тільки так, як у прикладі нижче:

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

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

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.