Почему SVG выглядит пикселизированным и как это исправить

SVG должен масштабироваться чётко, поэтому при блочных краях начните с трёх распространённых причин. Файл может содержать настоящие пиксели, приложение может растрировать предпросмотр или импорт, либо настоящий вектор просто мягко отображается на крошечной пиксельной сетке. Каждой причине нужно своё исправление; короткая диагностика покажет, с какой вы столкнулись. Эта статья не о логотипе PNG или JPG, который пикселизуется при увеличении. Такой файл никогда не был SVG, и у этой проблемы своё решение.

Причина 1: внутри SVG есть пиксели

Это ловушка встроенного изображения. SVG — формат контейнера, и спецификация SVG 2 позволяет элементу <image> встраивать растровое содержимое или ссылаться на него. Если нужно отличить связанный PNG от встроенных данных или вложенного SVG, используйте проверку смешанного содержимого SVG. Инструменты применяют эту возможность по-разному:

• Псевдопреобразования. Некоторые инструменты «PNG в SVG» ничего не трассируют. Они оборачивают растр тегом <image> и возвращают с расширением .svg. Он масштабируется столь же плохо, как оригинальный PNG, потому что это и есть оригинальный PNG.
• Экспорт с растрированием сложных частей. Приложения экспортируют доступное контурами и незаметно растрируют остальное: падающие тени, размытия, градиентные сетки, заливки изображением. Поэтому логотип остаётся чётким везде, кроме одного изгиба или эффекта: именно эта загадка «частичной пикселизации» заполняет дизайнерские форумы.
• Фотографическое содержимое. Фотография не превращается в чистые контуры, поэтому инструменты «преобразования» фото в SVG часто встраивают их либо создают постеризованное приближение. Инструменты карт делают это намеренно для слоёв светотени; это допустимо, поскольку светотень по природе имеет непрерывные тона.
• Оболочки форматов. Файл может нести векторные данные, читаемые одним приложением и не читаемые другим. Столкнувшись с непонятными данными, приложение использует встроенный растровый предпросмотр: в одной программе видны пиксели, в другой — чистые векторы.

Как подтвердить: откройте .svg в любом текстовом редакторе и найдите <image. Блок base64 — причина. В Inkscape или Illustrator щёлкните размытую область: если выделяется один прямоугольный объект «изображение», а не контуры, вывод тот же. Эта проверка выявляет псевдо-SVG от ИИ-инструментов и экспортеров и занимает меньше минуты.

Исправление: пикселям нужно стать контурами, то есть растровое содержимое нужно действительно векторизовать. Пропустите оригинальное или встроенное изображение через настоящее преобразование изображения в вектор и замените элемент <image> трассированным результатом. Если встроено фото, у векторизации свои ограничения; иногда честное решение — принять растр там, где ему место.

Признак в самом файле

Причина 2: файл исправен, но просмотрщик растрирует

Если браузер или Inkscape показывает чёткие контуры, а одно приложение — блочные, прекратите редактировать файл. Проблема в импорте или предпросмотре приложения:

• Некоторые процессы импорта приложений растрируют SVG в размере импорта или предпросмотра. Последующее увеличение кешированного изображения увеличивает растр. Решение на стороне приложения — импорт или рендеринг в целевом разрешении.
• After Effects может непрерывно растрировать векторные слои при их трансформации; Adobe описывает переключатель Continuously Rasterize для векторных слоёв. Если грубо выглядит только предпросмотр композиции, проверьте его разрешение и переключатель слоя до изменения SVG.
• Illustrator может намеренно показывать рисунок через Pixel Preview. Выключите View > Pixel Preview, прежде чем считать сам контур пикселизированным.
• Миниатюры и предпросмотры. Миниатюры файлового менеджера и быстрые предпросмотры — растрирование низкого разрешения. Они ничего не говорят о файле.

Универсальный тест: откройте тот же файл в браузере или Inkscape. Если там он чёткий, SVG исправен, а решение находится в настройках импорта или предпросмотра другого приложения.

Для игровых ресурсов проверьте процесс импорта SVG и растрирования в Godot или способ импорта SVG в Unity для вашего редактора и системы UI, прежде чем считать, что в исходнике нет векторных контуров.

Причина 3: настоящий вектор выглядит размытым в малом размере

Значки живут в размере от 16 до 24 пикселей, и математически идеальная кривая должна попасть на грубую пиксельную сетку. Сглаживание делает пограничные пиксели серыми, поэтому результат кажется «слегка размытым», особенно при тонких обводках и положении на полупикселе. Увеличение показывает идеально чёткие векторные края — так вы понимаете, что проблема не во встроенном изображении.

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

Причина и исправление с первого взгляда

Как не допускать пиксели в SVG

Предотвращение в основном относится к моменту преобразования или экспорта. Прежде чем полагаться на SVG, один раз выполните проверку текстовым редактором: элементы <path> — хорошо; блоки <image> — не вектор. При преобразовании используйте конвертер, который трассирует, а не создаёт оболочку, и подтвердите результат выделением отдельных фигур. При экспорте из дизайнерского инструмента сначала сведите или раскройте эффекты в контуры: всё, что экспортер не выражает векторами, уйдёт в пиксели. Помните, что на самом деле представляет собой SVG: расширение обещает формат, а не содержимое.

Как это работает в PerfectVector

PerfectVector обходит эту ловушку: трассирует изображение в настоящие контуры и никогда не создаёт оболочку. Загрузите PNG или JPG — получите фигуры, которые можно выделять, перекрашивать и бесконечно увеличивать; каждый цвет является отдельным редактируемым объектом, а элемента <image> в файле нет. Если вы только что обнаружили, что ваш «SVG» — замаскированный растр, правильно преобразуйте исходное изображение и выполните ту же проверку текстовым редактором для результата. Увидеть различие один раз — самый быстрый способ больше не попасться. Первые преобразования бесплатны, банковская карта не требуется.

Встроенное изображение с увеличением

Настоящий вектор с увеличением

Частые вопросы

Почему SVG выглядит пикселизированным при увеличении? Одно увеличение не доказывает наличие пикселей в SVG: некоторые приложения растрируют предпросмотр. Откройте файл в браузере или Inkscape, затем проверьте исходный текст на элемент <image> либо выделите размытую область и посмотрите, является ли она прямоугольным объектом изображения. Если проверки подтверждают встроенный растр, векторизуйте содержимое и замените элемент изображения.

Как узнать, есть ли в SVG встроенное изображение? Откройте его в любом текстовом редакторе и найдите <image. Длинная строка data:image/png;base64 — растр, встроенный в файл. Также можно щёлкнуть размытую область в Inkscape или Illustrator: если выделяется один прямоугольный объект изображения вместо контуров, оно встроено.

Почему SVG пикселизирован в одном приложении, но нормально выглядит в браузере? Приложение растрирует его. Игровые движки растрируют SVG в размере импорта, предпросмотр After Effects — в разрешении композиции, а некоторые приложения по умолчанию показывают встроенные изображения с блочной интерполяцией. Если браузер или Inkscape показывает чётко, файл исправен; измените настройки приложения.

Можно ли исправить SVG со встроенным изображением? Да. Возьмите исходный растр или извлеките встроенный, пропустите через настоящий векторизатор, затем замените элемент изображения трассированным результатом. Если встроено фото, ожидайте стилизованного векторного приближения, а не точной копии: фото не сводится к чистым контурам.

Почему значки SVG размыты в малом размере? Обычно это размытость из-за пиксельной сетки, а не встроенное изображение. При размере от 16 до 24 пикселей сглаживание превращает невыровненные края в серые пиксели. Выровняйте края и толщину обводок по целым пикселям в целевом размере, и значки станут чётче. Увеличьте, чтобы подтвердить чёткость самих контуров.

Всегда ли преобразование PNG в SVG создаёт настоящие векторы? Нет. Некоторые инструменты действительно трассируют изображение в контуры, другие лишь оборачивают PNG контейнером SVG. Результат масштабируется чётко только в первом случае. Проверяйте преобразованные файлы на теги изображений и предпочитайте конвертер, показывающий редактируемые фигуры в результате.

Источники

1. W3C: встроенное содержимое SVG 2 — Определяет элемент SVG <image> и растровое содержимое внутри документа SVG.
2. Adobe Illustrator: просмотр рисунка — Документирует Pixel Preview и другие режимы отображения.
3. Adobe After Effects: слои — Документирует переключатель Continuously Rasterize для векторных слоёв.
4. Adobe Illustrator: создание рисунка с точностью до пикселя — Объясняет выравнивание по пиксельной сетке для маленьких рисунков.

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