SVG
SVG (Scalable Vector Graphics, масштабируемая векторная графика) - язык разметки на основе XML для описания двумерной векторной графики. В отличие от растровых изображений (PNG, JPEG), SVG-изображения определяются математическими алгоритмами, что позволяет масштабировать их без потери качества.
В интернет-маркетинге и веб-дизайне SVG используется для создания логотипов, иконок, иллюстраций и элементов интерфейса, которые должны одинаково хорошо выглядеть на всех устройствах - от смартфонов до 4K-мониторов.
Векторная и растровая графика
[править]В веб-разработке используются два типа изображений:
| Тип | Описание | Форматы |
|---|---|---|
| Растровое | Задаётся сеткой пикселей; содержит информацию о расположении и цвете каждого пикселя | BMP, PNG, JPEG, GIF |
| Векторное | Задаётся алгоритмом; содержит фигуры и правила построения изображения | SVG |
При увеличении масштаба растровое изображение становится неровным, появляются видимые пиксели («кирпичики»). Векторное изображение продолжает выглядеть ровно, потому что фигуры масштабируются вместе с ним.
Преимущества SVG
[править]- Масштабируемость. Изображение одинаково хорошо выглядит на любых экранах.
- Малый размер файлов. Векторные изображения значительно меньше растровых, так как содержат алгоритмы построения, а не информацию о каждом пикселе.
- Доступность для поисковиков. Текст в SVG остаётся машинописным, что улучшает SEO.
- Стилизация и программирование. Каждый компонент изображения можно стилизовать с помощью CSS или управлять через JavaScript.
Недостатки SVG
[править]- Сложные изображения могут иметь большой размер файла и создавать вычислительную нагрузку на браузер.
- Сложнее создать, чем растровое изображение (для фотографий не подходит).
- Не поддерживается старыми версиями браузеров (Internet Explorer 8 и старее).
Способы добавления SVG на веб-страницу
[править]1. Через элемент <img>
[править]<img src="image.svg" alt="Описание изображения" height="87" width="100">
- Плюсы: быстрый, знакомый синтаксис, есть alt-текст.
- Минусы: нельзя изменять через JavaScript, ограниченная стилизация через CSS.
2. Встраивание SVG в HTML (inline)
[править]<svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg>
- Плюсы: можно присваивать классы элементам, стилизовать через CSS, использовать JavaScript, создавать анимацию.
- Минусы: подходит только для однократного использования, увеличивает размер HTML.
3. Как фоновое изображение в CSS
[править]background: url("image.svg") no-repeat center;
Обеспечение кросс-браузерной поддержки
[править]Для старых браузеров можно использовать резервные изображения в формате PNG:
<img src="image.png" alt="описание" srcset="image.svg">
Или в CSS:
background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
SVG для SEO-оптимизации
[править]Использование SVG может положительно влиять на поисковую оптимизацию сайта:
- Поисковые системы могут индексировать текстовый контент внутри SVG-файлов, что добавляет релевантности странице.
- Малый размер файлов способствует улучшению показателей Core Web Vitals, в частности скорости загрузки (LCP).
- SVG-изображения можно оптимизировать, удаляя лишние метаданные и упрощая код, что ещё больше снижает нагрузку на сервер и браузер.
