Растровая и векторная графика: что это, плюсы и минусы.

Введение

Когда вы загружаете изображение на сайт, вы редко задумываетесь о том, как оно устроено внутри. А зря. От формата зависит не только качество картинки, но и скорость загрузки страницы, масштабируемость и даже индексация текста поисковыми системами. В этой статье разбираем разницу между растровой и векторной графикой, объясняем, что такое SVG, и показываем, когда его использовать на сайте, а когда лучше остаться с PNG или JPG.

Содержание

SVG в WordPress: преимущества, безопасная загрузка и оптимизация для скорости и SEO

Ключевые идеи

Растровые изображения (PNG, JPG, GIF) состоят из пикселей. При увеличении они становятся размытыми и «пиксельными». Вес таких файлов обычно большой.
Векторные изображения (SVG) состоят из математических формул и алгоритмов. Они не теряют качество при любом масштабировании и весят значительно меньше.
SVG — это язык разметки на основе XML. Фигуры, цвета и эффекты описываются тегами, как в HTML. Это открывает возможности для стилизации через CSS и анимации через JavaScript.
Текст внутри SVG остаётся доступным для поисковых систем. Это плюс для SEO, в отличие от текста, встроенного в растровую картинку.
SVG идеален для логотипов, иконок, иллюстраций и схем. Для фотографий и сложных изображений с тысячами цветов лучше подходит растровая графика.

Часто задаваемые вопросы (Q&A)

Чем векторное изображение принципиально отличается от растрового?

Способом хранения информации. Растр — это сетка пикселей: каждый пиксель описан отдельно со своим цветом. Вектор — это формулы: координаты точек, линии, кривые, заливки. При увеличении растр «рассыпается» на квадратики, потому что пиксели просто становятся крупнее. Вектор пересчитывается заново под любой размер и остаётся идеально чётким.

Что лучше использовать для логотипа на сайте — PNG или SVG?

Однозначно SVG. Логотип должен быть чётким и на десктопе, и на мобильных устройствах, и при печати. В формате SVG он будет весить 5–10 КБ вместо 50–100 КБ в PNG. И вы никогда не получите пиксельные края при масштабировании. Единственное исключение — если ваш логотип содержит сложные градиенты или фотореалистичные элементы. Но даже тогда SVG справится.

Как добавить SVG на сайт через WordPress? Нужен ли специальный плагин?

WordPress из коробки поддерживает загрузку SVG, но по соображениям безопасности не разрешает её. SVG — это, по сути, код, и через него злоумышленники могут внедрить вредоносные скрипты. Поэтому безопасный путь — установить плагин (например, Safe SVG или SVG Support) или попросить разработчика добавить разрешение на загрузку с санитизацией кода.

Почему я почти не вижу SVG в интернете, если он такой хороший?

На самом деле вы видите его постоянно: иконки соцсетей, логотипы, кнопки, графики — всё это часто SVG. Просто вы не различаете форматы глазом. Другая причина: создание сложных SVG требует навыков работы в редакторах вроде Illustrator или Inkscape, а автоматическая конвертация фото в SVG даёт посредственный результат. Но для веб-элементов SVG — стандарт индустрии.

Раздел 1. Растровая графика: как она устроена и где её слабые места

1.1. Что такое пиксель и сетка

Растровое изображение — это матрица из крошечных цветных квадратиков — пикселей. Файл хранит координаты каждого пикселя и его цвет (RGB или другой модели).

Популярные растровые форматы:

JPEG / JPG — фотографии, сложные сцены, градиенты. Сжатие с потерями.
PNG — графика с прозрачностью, скриншоты, логотипы с чёткими краями. Сжатие без потерь.
GIF — анимация (но с ограничением в 256 цветов).
BMP — несжатый формат, в вебе почти не используется из-за большого веса.

1.2. Проблема масштабирования

Когда вы увеличиваете растровое изображение, программа не «дорисовывает» детали. Она просто растягивает пиксели, делая их крупнее. Результат — «лесенки» на диагональных линиях, размытие, потеря резкости.

Пример из документации MDN: возьмём красную звезду в формате PNG. Увеличим её — края становятся пиксельными. Та же звезда в SVG остаётся идеально гладкой.

1.3. Вес файла

Файл в 1000×1000 пикселей содержит 1 миллион пикселей. Для каждого нужно хранить цвет (3 байта для RGB или 4 для RGBA). Итог — несколько мегабайт. Сжатие уменьшает размер, но не радикально.

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

Раздел 2. Векторная графика: алгоритмы вместо пикселей

2.1. Как это работает

Векторное изображение описывается математически: «линия от точки A (x1, y1) до точки B (x2, y2), толщина 2, цвет синий». Или: «круг с центром в (cx, cy), радиусом R, заливка красным».

При отображении браузер или программа пересчитывает эти формулы под нужный размер экрана или масштаб. Поэтому качество не страдает.

Ключевые преимущества:

Масштабируемость без потерь. От иконки 16×16 до баннера на весь экран.
Малый вес. Файл весит несколько килобайт, независимо от размера вывода.
Редактируемость. Можно изменить цвет, форму, толщину линии в любой момент.

2.2. Когда вектор бессилен

Векторная графика плохо подходит для фотографий. Фотография — это миллионы случайных цветовых переходов, которые не описать парой формул. Можно попробовать векторизовать фото (функция «Trace Bitmap» в Inkscape), но результат будет далёк от оригинала. Для реалистичных изображений остаётся растр.

Раздел 3. SVG: главный векторный формат для веба

3.1. Что такое SVG

SVG (Scalable Vector Graphics) — это язык разметки на основе XML. Он был разработан специально для использования в браузерах. По сути, SVG-файл — это текстовый документ с тегами, описывающими фигуры, цвета, градиенты, фильтры и анимацию.

Пример простейшего SVG-кода (круг на чёрном фоне):

xml

</svg>

Этот код создаст чёрный прямоугольник с синим кругом внутри. И никаких пикселей — только формулы.

3.2. Основные элементы SVG

Элемент	Описание
<rect>	Прямоугольник (ширина, высота, скругление углов)
<circle>	Круг (центр cx, cy и радиус r)
<ellipse>	Эллипс
<line>	Линия между двумя точками
<polygon>	Многоугольник (замкнутая ломаная)
<path>	Произвольная кривая (самый мощный элемент)
<text>	Текст (с возможностью стилизации)
<g>	Группа элементов (для совместного применения стилей)

3.3. Преимущества SVG для веб-разработчика

1. Текст в SVG остаётся текстом
Поисковые системы не видят текст внутри PNG или JPG. А текст внутри SVG индексируется. Это значит, что логотип с названием компании на SVG будет работать на SEO, а тот же логотип в PNG — нет.

«Текст в векторных изображениях остаётся доступным (что также положительно сказывается на поисковой оптимизации)» — MDN Web Docs.

2. SVG можно стилизовать через CSS
Хотите изменить цвет иконки при наведении мыши? Для PNG пришлось бы грузить второй файл или использовать JavaScript-костыли. Для SVG — просто:

css

.logo-icon svg path {

fill: #ff0000;

}

.logo-icon svg path:hover {

fill: #00ff00;

}

3. SVG можно анимировать
Встроенные элементы анимации (<animate>, <animateTransform>) позволяют создавать движения без JavaScript. Или можно управлять SVG через обычный JS, как любой другой элемент DOM.

4. Малый вес и компактность
Иконка соцсети в SVG весит 1–2 КБ. Та же иконка в PNG 32×32 — 3–5 КБ. Разница в 2–3 раза. На тысяче иконок по всему сайту экономия становится заметной.

3.4. Недостатки SVG

Сложность для сложной графики. Нарисовать реалистичный портрет в SVG можно, но файл станет огромным (сотни тысяч строк кода) и браузер будет долго его обрабатывать. Фотография в JPEG окажется и легче, и быстрее.

Порог входа. Любой дизайнер умеет сохранить PNG. Но не каждый умеет экспортировать чистый, оптимизированный SVG. Тем более — править код вручную.

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

Раздел 4. Как создавать и оптимизировать SVG

4.1. Программы для работы с векторной графикой

Программа	Платформа	Стоимость	Для кого
Adobe Illustrator	Windows / Mac	Платная (подписка)	Профессиональные дизайнеры
Inkscape	Windows / Mac / Linux	Бесплатно	Дизайнеры, веб-мастера, новички
Figma	Веб / приложение	Бесплатно (с ограничениями)	UI/UX-дизайнеры, команды
Sketch	Mac	Платная	Дизайнеры интерфейсов
Affinity Designer	Windows / Mac / iPad	Единоразовая покупка	Альтернатива Illustrator

Inkscape — отличный бесплатный выбор для старта. Он поддерживает трассировку растровых изображений в вектор (Trace Bitmap) и экспорт в чистый SVG.

4.2. Оптимизация SVG перед загрузкой на сайт

Редакторы векторной графики часто генерируют избыточный код: лишние метаданные, ненужные группы, комментарии, пустые атрибуты. Это увеличивает вес файла.

Инструменты для оптимизации:

SVGO (SVG Optimizer) — популярный инструмент командной строки.
SVGOMG — веб-интерфейс для SVGO (бесплатно).
SVG Viewer (приложение для Mac/Windows) с функцией оптимизации.
Плагины для Adobe Illustrator / Inkscape (экспорт с настройками упрощения).

Что делает оптимизация:

Удаляет неиспользуемые атрибуты.
Объединяет стили.
Округляет числа (например, 3.000000 → 3).
Удаляет комментарии и скрытые элементы.

Разница в весе до оптимизации и после может составлять 30–50%.

4.3. Как добавить SVG на сайт: три способа

Способ 1. Через тег <img>

html

Плюсы: просто, кэшируется браузером. Минусы: нельзя стилизовать через CSS (это внешний файл).

Способ 2. Инлайн-код (вставить SVG прямо в HTML)

html

</svg>

Плюсы: полный контроль над CSS-стилями и анимацией, не нужно лишних HTTP-запросов. Минусы: захламляет HTML-код.

Способ 3. Через CSS background-image (для декоративных элементов)

css

.logo {

background-image: url('https://site.ru/logo.svg');

width: 100px;

height: 100px;

background-size: contain;

}

Плюсы: удобно для псевдоэлементов и фонов. Минусы: не подходит для контентных изображений (потеря alt-текста).

Раздел 5. SVG и WordPress: особенности и плагины

5.1. Почему WordPress не разрешает загружать SVG

WordPress по умолчанию блокирует загрузку SVG-файлов из соображений безопасности. Поскольку SVG — это XML, он может содержать JavaScript-код. Злоумышленник мог бы загрузить SVG-файл с вредоносным скриптом в комментарий или медиатеку, а затем выполнить его на странице.

5.2. Безопасный способ разрешить SVG

Используйте плагин, который очищает (санитизирует) SVG-код при загрузке.

Популярные плагины:

Safe SVG — минималистичный, удаляет потенциально опасный код.
SVG Support — добавляет поддержку SVG с возможностью вставлять инлайн-код.
Advanced Custom Fields (ACF) — если используете ACF для загрузки SVG, можно добавить свой фильтр для санитизации.

После установки плагина вы сможете загружать SVG как обычные изображения. Они будут появляться в медиатеке и их можно будет вставлять в контент.

5.3. Что делать, если SVG не отображается

Иногда SVG-файл отображается как пустое изображение или как ссылка на файл. Причины:

Неправильный MIME-тип (сервер должен отдавать image/svg+xml).
Плагин безопасности блокирует SVG (настройте исключение).
В коде SVG есть ошибка (проверьте валидатором, например, W3C SVG Validator).

Раздел 6. Когда использовать SVG, а когда — растровые форматы

Сценарий	Рекомендуемый формат	Почему
Логотип компании	SVG	Масштабируется, лёгкий, текст индексируется
Иконки соцсетей, кнопки, UI-элементы	SVG	Малый вес, стилизация через CSS
Схемы, графики, диаграммы	SVG	Можно анимировать, увеличивать без пикселизации
Инфографика	SVG	Весит меньше PNG, адаптируется под любые экраны
Фотография модели / товара	JPEG, WebP	Тысячи цветов и оттенков, SVG не справится
Сложная иллюстрация с градиентами (реалистичная)	PNG (или WebP)	SVG будет слишком тяжёлым и сложным
Скриншот интерфейса (с текстом)	PNG (или WebP)	Текст на скриншоте — это уже пиксели, SVG не даст выигрыша
Анимационная иконка (не кино, а простая анимация)	SVG (с <animate>)	Легче и контролируемее, чем GIF и даже видео

Простое правило: если изображение можно описать как набор простых фигур (логотип, иконка, схема) — используйте SVG. Если это фото или сложное изображение с тысячами цветов — используйте растровые форматы (WebP, JPEG, PNG).

Заключение

Векторная графика в формате SVG — мощный инструмент для веб-разработчика и владельца сайта на WordPress. Она легче растровых аналогов, не теряет качество при масштабировании и даёт дополнительные возможности по стилизации и анимации. Текст внутри SVG индексируется поисковыми системами — это прямой бонус к SEO.

При этом SVG не заменяет растровые форматы полностью. Для фотографий, сложных иллюстраций и реалистичных изображений остаются JPEG, PNG и WebP.

Начните с малого: найдите на своём сайте основные иконки и логотипы. Замените их SVG-версиями. Вы заметите ускорение загрузки страниц и более чёткое отображение на экранах с высоким разрешением (Retina). А со временем — возможно, начнёте создавать и свои SVG-схемы и инфографику.