Короткий ответ
Растровое изображение состоит из сетки цветных точек — пикселей. Так устроены фотографии, скриншоты и большинство картинок из камеры. Векторное изображение хранит линии, кривые и фигуры как математические описания, поэтому логотип или схема остаются чёткими при увеличении.
Для фото обычно выбирают JPG, WebP или PNG. Для логотипа, иконки и простой иллюстрации, которую нужно масштабировать, — SVG или исходный векторный файл. Формат выбирают по содержимому и дальнейшей работе: вектор не всегда лучше растра, а сохранение фотографии в SVG не превращает её автоматически в набор фигур.
| Свойство | Растр | Вектор |
|---|---|---|
| Из чего состоит | Из пикселей | Из линий, кривых, фигур и заливок |
| При увеличении | Может стать размытым или «квадратным» | Сохраняет гладкие края |
| Лучше всего подходит | Для фото, скриншотов, сложных текстур | Для логотипов, иконок, схем и простой графики |
| Типичные форматы | JPG, PNG, WebP, GIF, TIFF | SVG, AI, EPS, PDF с векторными объектами |
| Редактирование | Пиксели, области и слои | Отдельные контуры, точки и объекты |
Как устроены растр и вектор
Растровая графика
Изображение имеет фиксированные размеры, например 4000 × 3000 пикселей. Каждый пиксель хранит цвет. Такой способ хорошо передаёт плавные переходы, свет, тени, лица и мелкие случайные детали фотографии.
Векторная графика
Файл описывает объекты: где проходит линия, какой у неё изгиб, цвет и толщина. При показе программа заново строит их под нужный размер, поэтому края не зависят от исходной сетки пикселей.
SVG — распространённый векторный формат для сайтов, иконок и схем. Его возможности и способы открытия подробно разобраны в статье «SVG: что это за формат». Спецификация SVG 2 от W3C описывает векторные формы, текст, растровые изображения и другие элементы, которые может содержать SVG-документ.
Что происходит при увеличении
У растра есть исходная сетка. Если изображение 300 × 300 пикселей растянуть до 1200 × 1200, программе придётся создать промежуточные пиксели. Края могут стать мягкими, а мелкие детали — нечёткими. Увеличение размеров не возвращает информацию, которой не было в исходнике.
Вектор пересчитывается под новый размер: круг остаётся кругом, а кривая — гладкой. Но это преимущество относится к векторным объектам. Если внутрь SVG вставлена обычная фотография, её растровая часть при сильном увеличении всё равно потеряет чёткость.
Размер файла не определяется только типом графики. Простой логотип в SVG обычно компактен, но сложная векторная иллюстрация с тысячами объектов может оказаться тяжелее оптимизированного растра.
Что выбрать для конкретной задачи
| Задача | Обычно подходит | Почему |
|---|---|---|
| Фотография | JPG или WebP | Хорошо передают множество оттенков и деталей при умеренном размере |
| Скриншот с текстом | PNG или WebP без заметных потерь | Сохраняют чёткие буквы и линии |
| Логотип | SVG и отдельная PNG-копия при необходимости | SVG масштабируется, PNG нужен системам без поддержки вектора |
| Иконка или схема | SVG | Объекты остаются резкими на разных экранах |
| Фото для печати | Растр высокого разрешения | Важны достаточные пиксельные размеры и требования типографии |
| Макет для дальнейшего редактирования | Исходный векторный или многослойный файл | Отдельные объекты и слои можно менять без переделки всего изображения |
Если нужно выбрать между JPG и PNG, используйте отдельное сравнение форматов по задачам. Для печати важны не названия «растр» или «вектор» сами по себе, а требования типографии, физический размер и качество исходника.
JPG, PNG, WebP и SVG
- JPG — растровый формат с потерями, удобный для фотографий без прозрачности.
- PNG — растровый формат без потерь, подходящий для скриншотов, графики и прозрачного фона.
- WebP — растровый формат, который поддерживает сжатие с потерями и без, прозрачность и анимацию.
- SVG — векторный формат, но он также может содержать встроенные растровые изображения.
Расширение не гарантирует устройство содержимого. PDF может содержать и векторный текст, и фотографии, а SVG — встроенный растр. Чтобы понять, можно ли свободно менять контуры, откройте файл в подходящем редакторе и проверьте, выделяются ли элементы как отдельные объекты.
Что меняется при конвертации
Из SVG в PNG или JPG
Вектор отрисовывается в сетку заданного размера. Результат становится растровым и уже не масштабируется без ограничений. Выберите достаточную ширину и высоту до сохранения.
Из PNG или JPG в SVG
Простая упаковка растра в SVG не создаёт настоящих контуров. Для этого нужна трассировка — построение фигур по пикселям. Лучше всего она работает с логотипами и графикой из небольшого числа цветов.
В конвертере изображений доступны направления между растровыми форматами и SVG. Для готового SVG можно создать PNG-копию. Если требуется превратить простой PNG в редактируемые контуры, используйте трассировку PNG в SVG и обязательно проверьте края, мелкий текст, число цветов и прозрачность.
Трассировка фотографии обычно создаёт слишком много сложных фигур и не делает её удобным векторным оригиналом. Для фото лучше сохранить качественный растр.
Короткий выбор
- Фото и сложная текстура — растр.
- Логотип, иконка и простая схема — вектор.
- Нужна прозрачная растровая копия — PNG или WebP.
- Нужно масштабирование и редактирование контуров — SVG или исходный векторный файл.
- Не удаляйте исходник после конвертации: обратный путь может не вернуть его структуру.
Частые вопросы о растровой и векторной графике
В чём главное отличие растровой графики от векторной?
Растр состоит из пикселей и имеет фиксированную сетку. Вектор хранит линии и фигуры как описания, поэтому их можно масштабировать без пикселизации.
Что лучше для логотипа: PNG или SVG?
Для основного логотипа обычно удобнее SVG, если исходник действительно векторный. PNG пригодится как растровая копия для систем, которые не принимают SVG.
Можно ли перевести JPG в вектор?
Можно выполнить трассировку, но хороший результат вероятнее у простой контрастной графики. Фотография обычно превращается в множество сложных фигур и не становится удобным векторным оригиналом.
Почему SVG иногда становится размытым?
SVG может содержать встроенную растровую картинку. При увеличении векторные элементы останутся чёткими, а встроенный растр может пикселизоваться.
Векторный файл всегда меньше растрового?
Нет. Размер зависит от содержимого. Простой знак в SVG обычно компактен, но сложный вектор с тысячами объектов может весить больше оптимизированного растра.
