Прозрачный вход — прозрачный результат
PNG и WebP умеют хранить альфа-канал — прозрачность каждого пикселя. JPEG так не умеет. Когда вы загружаете PNG или WebP, трассировка читает альфа-канал и назначает цвет только тем пикселям, которые непрозрачны больше чем наполовину. Остальные не попадают ни в один цвет и не дают контуров, поэтому пустое пространство вокруг логотипа без фона остается пустым и в SVG. У итогового <svg> нет фонового прямоугольника: сквозь него видно всё, на что вы его положите.
Это легко проверить в предпросмотре: панель результата рисует контуры поверх шахматной клетки, и в прозрачных местах видна клетка, а не белая подложка.
Полупрозрачные пиксели обрабатываются в два шага. Сначала каждый пиксель либо попадает в цвет, либо нет — граница проходит на половине непрозрачности: мягкий сглаженный край логотипа обрезается там, и контур ложится туда, где край закрыт наполовину. Затем каждый цвет сохраняет непрозрачность своей краски, измеренную внутри фигур, а не на мягком краю. Сплошная краска записывается полностью непрозрачной, так что черный текст на прозрачном логотипе остается черным, а не светло-серым. Цвет, который в исходнике просвечивает, — мягкая тень или тонированная подложка — записывается с этой непрозрачностью в fill-opacity, поэтому тень превращается в одну плоскую, равномерно полупрозрачную фигуру (например, с непрозрачностью 54 %). Чего трассировка сохранить не может, так это сам плавный переход: слабая внешняя часть тени с непрозрачностью меньше половины отбрасывается, а получившаяся фигура имеет четкий край и одну равномерную прозрачность вместо постепенного затухания.
Прозрачный PNG нашего логотипа с выдрой, к которому добавлена мягкая тень (слева), SVG после трассировки на шахматном фоне (в центре) и на цветном фоне (справа). Фоновой подложки нет, белки глаз сохранились, а тень стала плоскими фигурами с непрозрачностью 60 % — с четкими краями там, где в PNG был плавный переход.
Почему белые детали переживают удаление фона
«Удалить фон» работает от краев картинки внутрь. Инструмент смотрит на полосу вдоль границы изображения, берет один-два цвета, каждый из которых занимает не меньше 15 % этой полосы, и, начиная от краев, помечает прозрачными все связанные с ними пиксели этих цветов и близких к ним. Затем он убирает и мягкую кайму там, где фон встречается с рисунком (пиксели рядом с удаленной областью, которые еще близки к цвету фона), и мелкие крапинки, касающиеся края изображения. Всё, что с границей не связано, остается нетронутым: белая внутренность буквы «А», белый блик на значке, белый зазор между двумя полосками.
Так задумано: белая деталь логотипа, окруженная более темным рисунком, после удаления фона никуда не денется. Если вы видели, как другие инструменты стирают все белые пиксели подряд, — это другой метод (цветовой ключ), и именно из-за него «удаление фона» в других местах может выесть дизайн изнутри.
Обратная сторона: если замкнутая белая область на самом деле связана с границей — потому что в контуре есть разрыв хотя бы в один пиксель, — удаление проходит через этот разрыв и убирает ее. Заделайте разрыв в исходнике или оставьте удаление фона выключенным и потом удалите фоновый контур в редакторе.
Белая графика на белом фоне
Трассировка не может разделить одинаковые цвета. Белая иконка, экспортированная на белом холсте, для нее — одна белая область, и в результате получится либо один белый прямоугольник, либо пустая конвертация («Не удалось построить векторные контуры»). Исправьте это до загрузки:
- В любом графическом редакторе положите иконку на сплошной, сильно контрастный фон (темно-серый или цвет, которого нет в иконке).
- Загрузите изображение с включенным «Удалить фон». Фон связан с краями, поэтому уйдет, а белая иконка останется.
- Если в иконке есть замкнутые прозрачные области, которые должны остаться прозрачными, лучше экспортируйте ее в PNG с настоящим альфа-каналом — тогда фон вообще не нужен.
Как проверить прозрачность в результате
- Откройте скачанный SVG в браузере: сквозь прозрачные области видно фон страницы (по умолчанию белый).
- Переведите его в растр инструментом «SVG в PNG» — результат будет в RGBA и сохранит прозрачность.
- Откройте файл в текстовом редакторе: фонового контура во весь размер там нет, если только в исходнике не было непрозрачного фона, а удаление фона не было выключено.
Что еще полезно знать
- Пресет «Контурный рисунок / трафарет» оценивает каждый пиксель по яркости так, как он выглядел бы на белой бумаге: темное становится черными чернилами, светлое — белой бумагой, а прозрачные области остаются прозрачными. Поэтому белая графика превращается в белую бумагу, а не в чернила, а полупрозрачный край темной линии на прозрачном фоне отбрасывается, а не превращается в бледный ореол.
- PNG предпросмотра — это растр с водяным знаком; векторные контуры и настоящую прозрачность несет только разблокированный SVG.