Редактирование SVG онлайн: перекраска и удаление фона без установки программ

1. Что умеет онлайн-редактор SVG

К мысли о редактировании SVG часто приходит установка Illustrator, но для простых задач — перекраски, удаления фона или элементов — онлайн-редактора более чем достаточно. Онлайн-редактор SVG от PolySVG работает в браузере, бесплатен, не требует установки и регистрации и поддерживает работу на уровне путей: удаление щелчком, удаление фона в один клик, рисование кистью, стирание маской, перекраску, отмену и повтор, а в конце — экспорт SVG или PNG. Можно загрузить SVG напрямую или перетащить результат конвертации одним щелчком из инструмента «Изображение в SVG». Для дизайнера это удобный способ финальной уборки перед сдачей, а для разработчика — быстрый способ подправить цвет и размер иконок перед вставкой в страницу, без переключения туда-обратно в графическую программу.

2. Перекраска: новый цвет темы для иконки

Щёлкните по цветовому блоку на холсте, чтобы выбрать соответствующий путь, затем измените заливку в панели цвета. Типичные сценарии: переключение набора иконок между светлой и тёмной темами, калибровка векторизованного логотипа к фирменному цвету и унификация палитр у ассетов из разных источников. По сравнению с поиском атрибута fill в коде перекраска щелчком куда нагляднее и гораздо реже повреждает другие пути.

3. Удаление фона: автоматика плюс ручная доработка

Нажмите «удаление фона в один клик», и движок определит доминирующий цвет по краям и удалит фоновый слой — SVG на белом фоне станет прозрачным за секунды. Любой оставшийся фоновый путь можно выбрать мышью и удалить. Если под рукой пока только растр, воспользуйтесь инструментом «Изображение в прозрачный вектор», чтобы за один шаг конвертировать и убрать фон, а уборку закончить в редакторе.

4. Кисть и ластик: рисование и стирание

Кисть добавляет: она рисует недостающие штрихи, и те автоматически векторизируются в новые пути, сливаясь с исходным рисунком — идеально для восстановления разорванных штрихов векторизованного логотипа. Ластик вычитает: он скрывает область маской, не разрушая исходные данные путей, и если стереть слишком много, действие можно отменить. Оба инструмента работают вместе с отменой и повтором, так что можно пробовать свободно. Штрихи кисти добавляются в файл как самостоятельные пути, и их позже можно перекрасить щелчком; масочный эффект ластика применяется при экспорте, поэтому экспортированный SVG совпадает с тем, что видно на холсте.

5. Отмена, повтор и экспорт

Редактор хранит полную историю действий: отмените ошибку и повторите, если передумали. Когда работа готова, выполните экспорт SVG для веба или дальнейшего редактирования либо экспорт PNG для документов и превью. О том, как открывать и смотреть SVG-файлы, читайте в Как открыть SVG-файл; прямая ссылка на редактор — /editor. При экспорте PNG выбирайте разрешение достаточно высоким, чтобы рисунок остался чётким в документе; для веба экспортируйте SVG, чтобы сохранить векторные свойства.

6. Краткий справочник по типовым задачам

• Перекрасить иконки под тему: щёлкните по пути, измените заливку и экспортируйте версию для светлой и версию для тёмной темы;
• Сделать ассет с белым фоном прозрачным: удаление фона в один клик, удаление оставшихся путей, экспорт прозрачного SVG;
• Починить разорванные штрихи логотипа: проведите кистью по разрыву, чтобы штрихи векторизировались автоматически, затем выровняйте цвет;
• Удалить ненужные элементы: щёлкните по каждому ненужному цветовому блоку и удалите его, а для мелких деталей по краям используйте ластик;
• Картинки для документов: когда редактирование закончено, экспортируйте PNG и вставьте его в Word, PowerPoint или окно чата.