Векторная и растровая графика — разница простыми словами
«Пришлите логотип в векторе» — фраза, которая ставит в тупик каждого второго предпринимателя. Что такое вектор? Чем он отличается от обычной картинки? И почему дизайнер морщится от файла logo_final_2.jpg? Объясняем так, чтобы больше никогда не пришлось гуглить.
Растр — это мозаика из цветных точек‑пикселей. Вектор — это инструкция «как нарисовать»: координаты, линии, заливки. Мозаику нельзя увеличить без потерь — точки становятся видны. Инструкцию можно выполнить в любом размере — хоть на визитке, хоть на фасаде здания. Поэтому фото — всегда растр, а логотипы и иконки — всегда вектор.
Растр: мозаика из пикселей
Растровое изображение — это сетка из точек, у каждой свой цвет. Фотография с камеры, скриншот, картинка из Photoshop — всё это растр. Форматы: JPG, PNG, WebP, GIF, TIFF.
У растра есть жёсткая характеристика — разрешение, количество точек по ширине и высоте. В файле 1000×1000 ровно миллион пикселей, и больше их не станет. Уменьшать растр можно безболезненно, а вот при увеличении программе приходится выдумывать недостающие точки — картинка мылится, на краях появляются «лесенки».
Зато растр умеет то, что вектору не под силу: плавные переходы миллионов оттенков. Ни одна формула не опишет фотографию заката эффективнее, чем честная сетка пикселей.
Вектор: инструкция для рисования
Векторный файл не хранит точки. Он хранит описание: «из точки A в точку B провести кривую с таким‑то изгибом, замкнуть контур, залить цветом #21A038». Форматы: SVG, AI, EPS, частично PDF.
Когда вы открываете вектор, программа выполняет инструкцию заново — в том размере, который нужен сейчас. Поэтому одна и та же иконка одинаково чётко выглядит в 16 пикселей и в 16 метров: инструкция не деградирует от масштаба.
Из этого же следуют остальные суперспособности вектора:
- Крошечный вес. Описание «круг + две дуги» занимает сотни байт. Логотип в SVG обычно легче своего PNG‑превью в разы.
- Редактируемость. Цвета, формы и текст можно менять в любой момент — это параметры инструкции, а не запечённые пиксели. Как это использовать на практике, показывали в статье как изменить цвет логотипа.
- Идеальные края. Браузер рендерит вектор под конкретный экран, включая ретину, — никакого мыла.
Наглядное сравнение
| Растр | Вектор | |
|---|---|---|
| Из чего состоит | пиксели | фигуры и кривые |
| Увеличение | теряет качество | без потерь |
| Фотореализм | ✅ да | ⛔ нет |
| Вес логотипа | десятки–сотни КБ | единицы КБ |
| Редактирование цвета | перерисовка | правка одной строки |
| Форматы | JPG, PNG, WebP | SVG, AI, EPS |
Когда что использовать
Логотипы, иконки, схемы, диаграммы, шрифты, иллюстрации с чёткими формами, всё, что будет печататься в большом размере. Правило: если изображение состоит из фигур и линий — оно должно жить в векторе.
Фотографии, скриншоты, сложные текстуры, живопись, всё с плавными фотографическими переходами. Правило: если изображение снято камерой или нарисовано кистью — это растр, и вектор ему не нужен.
Пограничный случай — сложные иллюстрации с градиентами и текстурами. Формально их можно собрать в векторе, но файл распухнет и станет тяжелее растра. Здесь выбирают по назначению: для печати в разных размерах — вектор, для показа на экране — растр.
Как понять, что перед вами
- По расширению: .svg, .ai, .eps — вектор; .jpg, .png, .webp, .gif — растр.
- Увеличением: откройте файл и приблизьте на 800%. Края остались идеальными — вектор. Появились квадратики — растр.
- Хитрый случай: внутри векторного файла может лежать вставленная растровая картинка. Такой файл формально .svg или .eps, но ведёт себя как растр. Откройте SVG текстовым редактором: настоящий вектор состоит из тегов
<path>,<circle>,<rect>; если там один тег<image>— вас обманули.
Как это выглядит в цифрах: анатомия двух файлов
Чтобы разница перестала быть абстракцией, посмотрим на один и тот же кружок с галочкой в двух форматах.
Вектор (SVG): файл — это буквально текст:
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#21A038"/>
<path d="M30 52 L45 66 L72 38" stroke="#fff" stroke-width="8" fill="none"/>
</svg>Три строки, ~200 байт. Открывается блокнотом, цвет меняется правкой шести символов, рендерится в любом размере.
Растр (PNG 500×500): 250 000 пикселей, каждому нужно до 4 байт (RGBA) — до мегабайта сырых данных, после сжатия ~10–30 КБ. Внутри — никакой структуры: нет «круга» и «галочки», есть только точки. Чтобы поменять цвет, нужно перекрасить каждую зелёную точку, аккуратно обходя сглаженные края.
Разница в весе — в 50–100 раз, разница в редактируемости — принципиальная. Именно поэтому дизайнеры так настойчиво просят «вектор, а не картинку»: для них это разница между «поправлю за минуту» и «перерисую за день».
Промежуточные случаи, о которых стоит знать
- PDF — контейнер: внутри может быть и вектор, и растр, и их смесь. PDF из Illustrator — вектор; PDF со сканом договора — растр в обёртке.
- SVG с вложенным растром — формально вектор, фактически картинка в конверте (тег
<image>внутри). Такой файл не масштабируется без потерь, чем и опасен. - Шрифты — это вектор: каждая буква описана кривыми. Поэтому текст в PDF и на сайте чёткий в любом масштабе — пока кто‑нибудь не вставит его скриншотом.
- Иконочные шрифты (Font Awesome и др.) — векторные иконки, упакованные в шрифт. Технология постепенно уступает место чистым SVG‑спрайтам.
- Canvas и WebGL в браузере — растровые технологии: нарисованное на canvas мылится при зуме, как обычная картинка.
Почему «логотип в векторе» не прихоть дизайнера
Логотип живёт десятилетиями и появляется везде: аватарка 40 пикселей, шапка сайта, баннер, вывеска, борт машины. Единственный способ обеспечить одинаковое качество во всех размерах — хранить логотип как инструкцию, а не как мозаику. Растровые версии из вектора генерируются за секунды; восстановить вектор из растра — это ручная перерисовка за отдельные деньги.
Мини‑словарь, чтобы говорить с дизайнером на одном языке
- Кривые (curves, paths) — линии, из которых состоит вектор. «Перевести в кривые» = превратить текст в фигуры, чтобы не зависеть от шрифтов.
- Узлы (nodes, anchors) — точки, через которые проходят кривые. Меньше узлов при той же форме — чище файл.
- Трассировка (trace) — автоматическое преобразование растра в вектор. Работает на простых знаках, портит сложные (подробный разбор — в статье про перевод логотипа в вектор).
- Растеризация — обратный процесс: превращение вектора в пиксели. Происходит при каждом показе SVG на экране и при экспорте в PNG.
- DPI/PPI — плотность точек при печати/на экране. Характеристика растра; у вектора её нет — он растеризуется под нужную плотность в момент вывода.
- Ретина (HiDPI) — экраны с удвоенной и утроенной плотностью пикселей, из‑за которых растровые картинки нужно готовить с запасом 2x.
Десять минут с этим словарём — и переписка с дизайнером или типографией перестаёт быть переводом с иностранного.
Коротко
Растр — точки, вектор — инструкции. Фотографии — растр, логотипы — вектор, и конвертация между ними легко работает только в одну сторону: из вектора в растр. Держите исходники в векторе, а растр генерируйте по мере надобности.
В нашем каталоге логотипов всё устроено ровно по этому принципу: каждый бренд хранится в оригинальном SVG, а PNG нужного размера генерируется при скачивании.