Изменить цвет SVG-иконки онлайн: замена fill и stroke
Находит цвета заливки и обводки в SVG и позволяет заменить каждый — из палитры или по HEX-коду, с живым превью. Перекраска происходит на вашем устройстве, на сервер ничего не загружается.
Перетащите SVG-файлы
Или вставьте код SVG через Ctrl+V. До 50 файлов по 10 МБ — файлы не покидают ваш компьютер.
Возьмите иконку из каталога
Как пользоваться
Как изменить цвет SVG
- Откройте SVG: перенесите файл мышью, выберите на диске или вставьте код иконки клавишами Ctrl+V.
- Инструмент соберёт список цветов из атрибутов fill и stroke.
- Нажмите на цвет и выберите новый в палитре или введите HEX, например #2563EB.
- Проверьте превью и скачайте SVG, а пачку файлов — ZIP-архивом.
У монохромных иконок каталога цвет меняется прямо на странице иконки — палитрой из 12 цветов или любым HEX. Этот инструмент нужен для собственных файлов, многоцветных SVG и пакетной перекраски. Передать сюда иконку из каталога без скачивания поможет блок «Возьмите иконку из каталога».
Как устроен цвет в SVG
Цвет фигуры задают два свойства: fill — заливка и stroke — обводка. Они записываются отдельными атрибутами, внутри атрибута style или CSS-правилами в теге <style>. Если после замены часть фигур осталась прежней, откройте файл в редакторе SVG и найдите, где задан их цвет.
Линейные иконки нарисованы обводкой, поэтому им меняют stroke, а залитым — fill. У двухцветных иконок два тона: основной и дополнительный, часто полупрозрачный. Меняйте их по отдельности и следите, чтобы второй тон оставался светлее первого.
Перекраска без загрузки на сервер
Разбор SVG и замена цветов выполняются в браузере: файл читается локально, поэтому фирменные иконки из закрытого макета не покидают компьютер. За раз можно обработать до 50 файлов по 10 МБ, набор скачивается ZIP-архивом.
Советы и ошибки
- Белая подложка. Если в иконке есть белый фон, не заменяйте белый вместе с основным цветом — получится сплошной квадрат.
- Контраст. Иконкам интерфейса нужен контраст с фоном не ниже 3:1 — это требование WCAG к нетекстовым элементам.
fill="none"оставляйте как есть: это отсутствие заливки, и если подставить вместо него цвет, линейная иконка превратится в залитый силуэт.- Растровая версия. Для PNG перекрасьте SVG здесь и переведите его в PNG нужного размера; для значка сайта используйте генератор favicon.
Для кнопок «Поделиться» пригодятся иконки соцсетей в цветах сайта, для контактов — иконки связи и почты, а праздничные иконки легко перекрасить под сезонную акцию. Способы менять цвет через CSS описаны в статье как изменить цвет SVG.
Частые вопросы
- Как поменять цвет SVG-иконки?
- Загрузите файл, выберите цвет, который нужно заменить, и задайте новый — из палитры или HEX-кодом. Превью обновится сразу, останется скачать готовый SVG.
- Почему часть иконки не перекрашивается?
- Цвет может быть задан градиентом или встроенной растровой картинкой — такие элементы меняются иначе. Другой частый случай — у фигур нет fill, и они чёрные по умолчанию: задайте fill корневому тегу svg, и его унаследуют все фигуры.
- Что такое currentColor?
- Это значение «взять цвет из CSS-свойства color». При вставке SVG кодом в HTML оно удобно, а в файле, который открывают как картинку или импортируют в редактор, currentColor превращается в чёрный — там его лучше заменить на HEX.
- Можно ли перекрасить сразу много иконок?
- Да: загрузите до 50 SVG по 10 МБ, задайте замену цвета — и весь набор скачается одним ZIP-архивом. Так иконки быстро приводятся к фирменному цвету.
- Как получить перекрашенную иконку в PNG?
- Сначала перекрасьте SVG, потом откройте его в конвертере SVG в PNG и задайте размер — растровая копия получится с чёткими краями.