X
Оставить заявку
Отправить
Звонить:
+38 (067) 583-94-92
Писать:
info@totonis.com

Как улучшить свой сайт, используя SVG

01.08.2019
Как улучшить свой сайт, используя SVG

SVG расшифровывается как Scalable Vector Graphics. SVG имеет синтаксис на основе XML, аналогичный HTML, который можно использовать в DOM элементах. Этот аспект сильно отличает SVG от растровых изображений (GIF, JPG и PNG).

Растровые изображения состоят из фиксированного набора пикселей, поэтому они могут стать пикселизированными или размытыми при масштабировании. SVG - это не просто картинки. Они представляют собой группу векторных элементов (контуры, формы и заливки), каждый из которых имеет свои свойства.

Эти уникальные атрибуты позволяют нам увеличивать SVG, сохраняя при этом их внешний вид (отлично выглядит при любом разрешении), а также использовать и создавать сценарии для выполнения потрясающих вещей, таких как анимация.

Когда стоит использовать SVG

  • Логотипы;
  • Иконки;
  • Фон;
  • Узоры;
  • Графики;
  • Карты;
  • Иллюстрации;
  • Анимации

Когда не стоит использовать SVG

  • Фото;
  • Сложная графика с тенями и прозрачностью

Преимущества SVG

Производительность и SEO

SVG, как правило, имеют меньшие размеры файлов, которые могут улучшить время загрузки страницы, что является важной частью построения рейтингов в поисковых системах. Они также основаны на тексте, что позволяет поисковым машинам легко читать их содержимое. Индексация JPG и PNG основана исключительно на атрибуте ALT, который может быть немного ограничен для сложной инфографики. У SVG также есть описание и теги заголовков, которые добавляют дополнительное преимущество для ранжирования.

Оптимизация и отзывчивость

SVG отлично подходят для адаптивного дизайна Поскольку он является векторной графикой, его можно масштабировать до любого размера без потери качества, чего не сделать с растровой графикой (JPG и PNG), которые приходится сохранять в несколько раз большем размере, что влечет за собой и увеличение их объема. С SVG ваша графика всегда будет выглядеть безупречно.

Манипуляции

Как я уже упоминал, SVG содержит редактируемую разметку. Вы можете открыть его с помощью текстового редактора. Помимо манипулирования всем изображением, SVG позволяет управлять отдельными элементами и добавлять к ним целый ряд вариантов поведения с помощью CSS или JavaScript. Что еще более важно, эти манипуляции эффективны. Изменение цвета, ширины обводки или анимации происходят быстро и легко. Также можно использовать их для маскировки JPG и добавления воистину восхитительных переходов.

Лучше, чем иконочные шрифты

Иконочные шрифты, такие как Font Awesome, - это простой способ добавить иконки в проект. Однако шрифты не должны быть значками. И как таковые, они часто отображается через CSS в пустых тегах HTML (например,   ). Что плохо, если вы заботитесь о семантике. Хуже того, они ужасны для доступности без большого количества обходных путей.


Иконочные шрифты могут не отображаться в некоторых случаях при загрузке между доменами (например, из CDN). Короче говоря, используйте SVG.

Заключение

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


Вам интересно длительное сотрудничество (аутсорс)? Узнайте текущие рейты прямо сейчас!
Top