Как сохранить прозрачный фон при конвертации в SVG

Вот деталь, из-за которой все так путаются: у SVG по умолчанию вообще нет фона. Он прозрачный, пока что-то не поместит за вашей графикой сплошную форму. Поэтому, когда после конвертации SVG появляется с белым прямоугольником вокруг, правильный вопрос такой: откуда взялся белый цвет? Обычно причина одна из трех: фоновая форма внутри дизайна, настройка экспорта, которая заливает холст, или конвертер, который трассировал пустую область как белый блок вместо того, чтобы оставить ее пустой. Исправление зависит от того, какой именно случай у вас, и от того, была ли в исходном файле настоящая прозрачность с самого начала. Давайте разберемся.

Коротко

• SVG по умолчанию прозрачный. Белый фон означает, что что-то его добавило.
• Конвертируете прозрачный PNG? Используйте конвертер, который учитывает альфа-канал: он трассирует объект и оставляет остальное пустым. Конвертируйте PNG в SVG и проверьте результат.
• Начинаете с JPG? Он не умеет быть прозрачным, поэтому сохранять нечего. Сначала удалите фон, затем конвертируйте.
• Экспортируете из Illustrator или Inkscape? Удалите белый фоновый прямоугольник на холсте и проверьте настройки экспорта.
• Всегда проверяйте: поместите SVG на цветной фон. Если белое все еще видно, значит, оно есть в файле.

Сначала разберитесь, что именно добавляет белый фон

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

Ваша ситуация	Почему фон белый	Как исправить
Конвертация прозрачного PNG в SVG	Конвертер залил пустую область или трассировал ее как форму	Используйте конвертер, который сохраняет прозрачность; удалите любую случайную фоновую форму, если она появилась
Конвертация JPG или PNG со сплошным белым фоном	Прозрачности никогда не было	Сначала удалите фон, затем конвертируйте
Экспорт SVG, созданного в Illustrator или Inkscape	На холсте есть фоновый прямоугольник или настройка экспорта добавляет заливку	Удалите фоновую форму; проверьте опцию прозрачности при экспорте

Откуда берется белый фон

Чаще всего людей сбивает с толку средний вариант, поэтому начните с него.

Если файл на самом деле не прозрачный, конвертер это не исправит

Вот часть, которую часто пропускают на форумах. JPG не может хранить прозрачность, никогда. Если ваш логотип в JPG, фон уже запечен в пиксели, даже если он белый и выглядит как "ничего". Конвертация в SVG не уберет его сама по себе. Трассировка либо включит фон как форму, либо оставит графику прямо поверх него. (В целом конвертация JPG — немного другая задача, о ней рассказывает материал как конвертировать JPG в SVG.)

С некоторыми PNG бывает та же проблема. PNG может хранить прозрачность, то есть альфа-канал, но многие такие файлы сохранены с обычной белой заливкой. Если вы не уверены, что у вас, откройте файл на темном фоне. Видите белый прямоугольник вокруг логотипа? Значит, он не прозрачный. Он просто выглядел так на белой странице.

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

Конвертация действительно прозрачного PNG в SVG

Если исходник — по-настоящему прозрачный PNG, сохранение прозрачности при конвертации в основном зависит от выбранного конвертера. В принципе задача простая: трассировать видимый объект в векторные контуры, а прозрачную область оставить пустым пространством, а не белой формой. Хороший конвертер именно так и делает. Неаккуратный вместо этого делает одну из двух неприятных вещей:

• Заливает прозрачную область белым, и вы получаете сплошной прямоугольник.
• Трассирует край прозрачной области как отдельный контур, и вокруг дизайна появляется невидимый, но настоящий прямоугольник, который проявляется, как только вы кладете файл на цветной фон или отправляете его на режущую машину. Мейкеры сталкиваются с этим постоянно. Это тот же самый лишний прямоугольник вокруг дизайна для Cricut.

Поэтому правильный ход — конвертировать инструментом, который чисто обрабатывает альфа-канал, а затем проверить результат (ниже расскажем как). Самый частый вариант такой задачи — прозрачный логотип.

Как это выглядит с PerfectVector

PerfectVector считывает прозрачность вашего PNG и трассирует только то, что действительно есть в изображении. Видимая часть логотипа становится чистыми редактируемыми векторными контурами, а прозрачная область остается прозрачной: без белого прямоугольника и без скрытой рамки по границам. Результат можно положить на любой цветной фон, сайт, лист со стикерами, мат Cricut — и цвет позади просто будет просвечивать. Вы можете конвертировать прозрачный PNG и проверить его на цветной подложке за несколько секунд. Первые конвертации бесплатны, без кредитной карты.

Но важно сказать прямо: PerfectVector сохраняет прозрачность, которая уже есть в вашем файле. Он не может придумать прозрачность там, где ее никогда не было. Если исходник — JPG или PNG с белой заливкой, сначала вырежьте фон, как описано выше, и тогда конвертация останется чистой.

Как проверить, что все действительно сработало

Не доверяйте миниатюре. На белой странице прозрачный SVG выглядит так же, как SVG с белым фоном, поэтому люди и думают, что все в порядке, пока не окажется иначе. Две быстрые проверки:

• Положите его на цвет. Разместите SVG поверх цветного фона в браузере, Figma, Canva или Design Space. Настоящая прозрачность пропустит цвет. Белый прямоугольник — нет.
• Поищите лишний прямоугольник. Откройте SVG и выделите формы. Если за вашей графикой лежит прямоугольник во весь размер, удалите его. В большинстве случаев "он все еще белый" виноват именно он.

Экспорт SVG, который вы нарисовали сами: другой случай

Если вы не конвертируете растр, а экспортируете SVG, который нарисовали сами, белый фон обычно приходит с вашего холста, а не от конвертера:

• Illustrator: удалите любой белый прямоугольник, который играет роль фона. Цвет монтажной области все равно не экспортируется, поэтому, когда фоновая форма исчезнет, сохраните или экспортируйте файл как SVG — он будет прозрачным.
• Inkscape: убедитесь, что не выделен фоновый прямоугольник, скройте или удалите исходный растр, если вы его трассировали, и экспортируйте вектор. SVG из Inkscape прозрачны, если вы сами не добавили заливку.

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

FAQ

Поддерживает ли SVG прозрачный фон? Да, и он прозрачный по умолчанию. У SVG нет фона, если не добавить форму или заливку, поэтому прозрачность — исходное состояние, а не настройка, которую нужно включать. Белый появляется только тогда, когда что-то его добавляет.

Как сохранить SVG с прозрачным фоном? Убедитесь, что в дизайне нет фонового прямоугольника, затем экспортируйте без фоновой заливки (большинство инструментов по умолчанию экспортируют прозрачный SVG). После этого проверьте файл, поместив его на цветной фон. Если видите белый, найдите и удалите фоновую форму.

Почему у моего SVG появился белый фон после конвертации? Либо конвертер добавил белую заливку или трассировал пустую область как форму, либо исходный файл на самом деле не был прозрачным. Сначала проверьте источник: если это JPG или PNG с белой заливкой, прозрачности было нечего сохранять, и перед конвертацией нужно удалить фон.

Можно ли конвертировать JPG в SVG с прозрачным фоном? Не напрямую, потому что JPG не может хранить прозрачность. Его фон запечен в пиксели. Сначала удалите фон (вырежьте объект и экспортируйте прозрачный PNG), затем конвертируйте этот файл в SVG.

Как сохранить прозрачность при конвертации PNG в SVG? Начните с действительно прозрачного PNG и используйте конвертер, который учитывает альфа-канал: он трассирует объект и оставляет остальное пустым. Затем проверьте результат на цветном фоне и удалите любой лишний прямоугольник, если трассировка его добавила.

Как удалить белый фон из SVG? Откройте SVG, выделите формы и удалите полноразмерный белый прямоугольник за вашей графикой. Если белый цвет является частью встроенного растра, а не отдельной формой, лучше заново конвертировать файл из действительно прозрачного исходника.

---

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