Векторная графика: что это и чем вектор отличается от растра

Векторная графика — это способ хранить изображение как набор геометрических объектов (точек, линий, кривых, фигур) с координатами и свойствами: цветом заливки, толщиной и цветом контура. Файл описывает, что нарисовать, а картинку в пикселях программа строит при каждом показе под нужный размер. Поэтому вектор масштабируется без потери четкости, а растр — сетка готовых пикселей — при увеличении становится зернистым.

Ниже — словарь, сравнение таблицей, форматы, редакторы, минимальный SVG и опыт на Python с разницей в размерах файлов.

Три термина, которые путают

• Вектор (векторное изображение) — описание сцены объектами: «круг с центром (50, 50), радиус 40, синяя заливка».
• Растр (растровое изображение) — прямоугольная сетка пикселей, у каждого свой цвет. Так устроены фото, скриншоты, JPEG и PNG.
• Растеризация — перевод вектора в пиксели под конкретное разрешение. Ее выполняет браузер, редактор, драйвер принтера.

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

Вектор и растр: сравнение

Упрощения в таблице стоит понимать с оговорками. Вектор умеет градиенты (в SVG есть линейные и радиальные), тени и полупрозрачность, а в Illustrator и CorelDRAW — сеточные градиенты для реалистичных переходов. Фотореалистичная картинка в векторе возможна, но требует огромного числа объектов, и файл становится тяжелее и медленнее растра того же вида.

Файл тоже не всегда «маленький». Простой логотип в SVG весит сотни байт, а автоматически векторизованная фотография с десятками тысяч контуров может оказаться тяжелее JPEG и заметно дольше отрисовываться.

Как выбрать: вектор или растр

Решение удобно принимать по задаче, а не по формату:

Многие форматы и программы смешанные. PDF может одновременно содержать векторный текст, векторные фигуры и растровые фото. Photoshop работает с векторными фигурами и контурами, Illustrator — встраивает растровые изображения.

Форматы векторной графики

Для обмена надежнее общепринятые форматы: SVG для веба, PDF для печати. AI и CDR удобны как исходники, но без родной программы правка обычно неполная.

Устаревшие форматы Flash — SWF и FLA — в новых проектах не используют. Adobe прекратила поддержку Flash Player 31 декабря 2020 года, браузеры его больше не запускают.

Где применяется векторная графика

• Шрифты: буквы TrueType и OpenType заданы контурами из кривых, текст четкий в любом кегле.
• Веб и интерфейсы: иконки и логотипы в SVG резкие на экранах с любой плотностью пикселей.
• Полиграфия: один макет масштабируется от визитки до баннера.
• Производство: плоттерная и лазерная резка, гравировка — станок идет по векторному контуру.
• Инженерия, карты, графики: чертежи в CAD, векторные тайлы карт, графики matplotlib или D3 в SVG и PDF.

Минимальный SVG-файл

SVG — самый простой способ увидеть вектор своими глазами: это обычный текст. Сохраните код в файл badge.svg и откройте его в браузере.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <rect x="5" y="5" width="90" height="90" rx="16" fill="#1e88e5"/>
  <circle cx="50" cy="42" r="20" fill="#ffffff"/>
  <path d="M20 85 L50 60 L80 85 Z" fill="#ffc107"/>
</svg>

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

Что здесь происходит:

• viewBox="0 0 100 100" задает систему координат рисунка, а width и height — размер на странице. Смените width и height на 400 — рисунок станет больше, координаты фигур менять не нужно.
• rect, circle, path — объекты. Треугольник описан командами пути: M — переместиться в точку, L — провести линию, Z — замкнуть контур.
• Файл весит 265 байт и не зависит от размера, в котором его покажут.

Растеризация этого же файла утилитой rsvg-convert (пакет librsvg) в PNG шириной 64, 512 и 2048 пикселей, затем сравнение размеров в байтах:

rsvg-convert -w 64 badge.svg -o badge64.png
rsvg-convert -w 512 badge.svg -o badge512.png
rsvg-convert -w 2048 badge.svg -o badge2048.png
wc -c badge.svg badge64.png badge512.png badge2048.png

     265 badge.svg
    1535 badge64.png
   11978 badge512.png
   70476 badge2048.png
   84254 total

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

Безопасность: SVG — это XML, и внутри может быть JavaScript. Если сайт принимает SVG от пользователей и отдает их со своего домена, файл, открытый напрямую, может выполнить скрипт. Такие загрузки очищают санитайзером, отдают с другого домена или конвертируют в растр. Через тег img скрипты внутри SVG не выполняются, но это не отменяет проверки при загрузке.

Опыт: как растеризация влияет на размер файла

Скрипт на Python (только стандартная библиотека) описывает круг вектором и сам переводит его в пиксели: для каждого пикселя проверяет, попадает ли его центр в круг, и пишет PNG.

import struct
import zlib

# Векторное описание: круг задан центром и радиусом в условных единицах 0..100
SVG = ('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">'
       '<circle cx="50" cy="50" r="40" fill="#1e88e5"/></svg>')


def rasterize(size):
    """Растеризация: для каждого пикселя решаем, внутри круга его центр или нет."""
    rows = []
    for y in range(size):
        row = bytearray([0])  # байт фильтра PNG для строки
        for x in range(size):
            # переводим пиксель в координаты viewBox 0..100
            cx = (x + 0.5) * 100 / size
            cy = (y + 0.5) * 100 / size
            inside = (cx - 50) ** 2 + (cy - 50) ** 2 <= 40 ** 2
            row += bytes((30, 136, 229)) if inside else bytes((255, 255, 255))
        rows.append(bytes(row))
    return b"".join(rows)


def png_bytes(size):
    def chunk(kind, data):
        body = kind + data
        return struct.pack(">I", len(data)) + body + struct.pack(">I", zlib.crc32(body))
    header = struct.pack(">IIBBBBB", size, size, 8, 2, 0, 0, 0)  # 8 бит, RGB
    return (b"\x89PNG\r\n\x1a\n" + chunk(b"IHDR", header)
            + chunk(b"IDAT", zlib.compress(rasterize(size), 9)) + chunk(b"IEND", b""))


with open("circle.svg", "w", encoding="utf-8") as f:
    f.write(SVG)
print(f"SVG, любой размер на экране: {len(SVG.encode())} байт")

for size in (100, 1000, 3000):
    data = png_bytes(size)
    with open(f"circle_{size}.png", "wb") as f:
        f.write(data)
    print(f"PNG {size}x{size}: {len(data)} байт, пикселей {size * size}")

Результат прогона на Python 3.14:

SVG, любой размер на экране: 115 байт
PNG 100x100: 383 байт, пикселей 10000
PNG 1000x1000: 7412 байт, пикселей 1000000
PNG 3000x3000: 44684 байт, пикселей 9000000

В папке появятся circle.svg и три PNG. Векторное описание не меняется, а растр растет вместе с числом пикселей. Здесь рост умеренный, потому что у круга две сплошные заливки и PNG хорошо их сжимает; у фотографии того же разрешения файл был бы намного больше.

Граница примера: это учебная растеризация без сглаживания, поэтому край круга ступенчатый. Настоящие растеризаторы (браузеры, librsvg, Skia) делают антиалиасинг — частично закрашивают граничные пиксели.

Редакторы векторной графики

Для первых шагов хватит Inkscape или Figma. Перевести растр в вектор можно трассировкой (Image Trace в Illustrator, Trace Bitmap в Inkscape), но результат хорош для простых логотипов и плох для фотографий: контуров получается много, детали упрощаются.

Выводы

• Вектор хранит объекты с координатами, растр — сетку пикселей; на экране вектор все равно растеризуется, но под нужный размер, поэтому остается резким.
• Вектор выбирают для логотипов, иконок, шрифтов, схем и макетов под резку и печать, растр — для фото и текстур.
• Для обмена надежнее SVG (веб) и PDF (печать); AI и CDR — рабочие исходники своих редакторов, SWF и FLA устарели.
• Размер векторного файла зависит от сложности рисунка, растрового — от разрешения и сжатия: простой SVG весит сотни байт, векторизованная фотография может быть тяжелее JPEG.
• SVG — текст на XML, поэтому его можно писать руками и генерировать кодом, но загружаемые пользователями SVG нужно проверять из-за встроенных скриптов.

Где применяется / связь с практикой

Смежная тема: основы работы с SVG.

FAQ

Можно ли сделать из JPEG векторный файл, просто пересохранив его в SVG?
Нет. Такой SVG будет содержать внутри тот же растр и при увеличении останется зернистым; настоящий вектор получают трассировкой или перерисовкой контуров.

Почему логотип в PDF иногда размывается при увеличении?
PDF может содержать и вектор, и растр. Если логотип вставили в макет как PNG или JPEG, внутри PDF он остался растровым.

Какой формат отправлять в типографию?
Чаще всего PDF с векторными элементами и встроенными шрифтами, но требования к профилю (например, PDF/X), цветовой модели и вылетам задает конкретная типография.