Как сделать адаптивный текст для баннера домашней страницы на SVG

Как сделать адаптивный текст для баннера домашней страницы на SVG

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

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

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

Лучший способ добавить заголовок страницы в SVG это сделать SVG частью этой страницы:

<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Kauai</text>
    </svg>
</header>
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:

<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

SVG файл по ссылке ненадежно работает с кастомными шрифтами.

Текст доступен для поиска, но только в контексте SVG. Скопировать его нельзя.

Текст становится недоступным. Компенсировать можно с помощью атрибута alt.

Разбитый SVG текст

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

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

Если SVG идет как изображение со ссылкой, необходимо добавить атрибут alt

Если используется инлайновый SVG, то необходимо добавить тег title

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree