Як зробити адаптивний текст для банера домашньої сторінки на SVG

13

Від автора: адаптивний текст можна зробити за допомогою vw одиниць вимірювання, однак через відсутність властивостей max mix-font-size в CSS вам доведеться додати цілий набір медіа запитів, які будуть контролювати відображення тексту на великих екранах і екранах мобільних пристроїв. Vw текст знаходиться між двох вогнів, затиснутий медіа запитами.

SVG ж хоч і має багато обмежень, пов’язаних з текстом, але він відмінно підходить під банери для домашніх сторінок. Є кілька способів створити такий текст:

Инлайновый SVG текст

Найкращий спосіб додати заголовок сторінки в SVG це зробити SVG частиною цієї сторінки:

Kauai
header {
width: 80%;
margin: 0 auto;
}
svg text {
font-family: sans-serif;
text-transform: uppercase;
font-weight: 900;
font-size: 90px;
fill: blue;
}

SVG повинен автоматично підганяти під розмір контейнера: щоб текст був правильно пропонується, швидше за все, знадобиться налаштувати viewBox, font-size та значення x (якщо на час додати до SVG властивості border або background-color, буде легше визначити розмір елемента).

Зверніть увагу, що font-size в SVG відноситься до viewBox, тобто значення шрифту буде змінюватися при зміні вікна браузера. Також не забувайте, що колір елемента text задається через fill, а не color. У даного методу є кілька переваг з-за того, що він инлайновый:

SVG може використовувати будь-який підключений шрифт на сторінці або стилів.

Даний текст індексується, редагується, його моно копіювати і він стає доступним: він реєструється і читається зі сторінки як будь-який інший текст.

Можна піти ще далі і зробити текст можна редагувати, як показано на початку статті.

SVG текст як зображення з посиланням

Код SVG можна зберегти у файл і підключити зображення з посиланням на нього в HTML:

Як зробити адаптивний текст для банера домашньої сторінки на SVG

Можна додати адаптивності зображення, зробивши його обтічним і гнучким. Однак необхідно врахувати кілька факторів:

SVG-файл за посиланням ненадійно працює з кастомних шрифтами.

Текст доступний для пошуку, але тільки в контексті SVG. Скопіювати його не можна.

Текст стає недоступним. Компенсувати можна за допомогою атрибута alt.

Розбитий SVG текст

Існує багато ситуацій, коли SVG текст не може бути збережений як текст, а повинен бути розбитий на частини і експортований окремими SVG шляхами (в Adobe Illustrator: Type / Create Outlines). Хороший приклад:

Як зробити адаптивний текст для банера домашньої сторінки на SVG

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

Якщо SVG йде як зображення з посиланням, необхідно додати атрибут alt

Якщо використовується инлайновый SVG, то необхідно додати тег title

Зверніть увагу, що в тексті вище використовуються SVG фільтри, а значить, в поточній версії Safari даний текст відображатися не буде. У наступній статті я торкнуся цю тему більш детально.