Как изменить цвета SVG и исправить частые проблемы

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

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

Где SVG хранит цвета

Файл SVG — это список фигур, записанный текстом. У каждой фигуры может быть fill для внутренней области и stroke для обводки, как описано в руководстве MDN по заливке и обводке SVG. Единого «цвета изображения», который можно заменить в одном месте, нет. То, что на экране выглядит одноцветным рисунком, может быть одним аккуратным контуром или сорока отдельными контурами с одинаковой заливкой.

В этом вся суть. Каждый способ ниже — лишь другой путь поиска фигур и изменения их fill или stroke. Поэтому результаты настолько различаются между файлами: чем меньше фигур и чем они аккуратнее, тем проще изменить цвет.

Выберите способ

Способ 1: онлайн-инструмент замены цветов SVG

1. Откройте в браузере бесплатный инструмент для цветов SVG и загрузите файл; хорошие инструменты также принимают вставленный код SVG.
2. Инструмент покажет найденные цвета. Полезные сервисы группируют одинаковые заливки, поэтому «синий» будет одним образцом, даже если используется в десятках фигур.
3. Нажмите на образец, выберите новый цвет и посмотрите предпросмотр.
4. Скачайте результат и один раз откройте его во вкладке браузера для проверки.

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

Способ 2: векторное дизайнерское приложение

Inkscape бесплатен и умеет всё необходимое для этой задачи; Illustrator и Figma работают аналогично.

1. Откройте SVG и нажмите на часть, которую хотите изменить. Если весь рисунок выделяется одним блоком, это группа: дважды нажмите, чтобы войти в неё, или разгруппируйте.
2. Измените заливку в панели Fill & Stroke в Inkscape или через образец заливки в Illustrator либо Figma.
3. Если один видимый цвет распределён по множеству фигур, не нажимайте на каждую отдельно. Нажмите правой кнопкой на фигуру и используйте Select Same → Fill Color в Inkscape либо документированную команду Illustrator Select → Same → Fill Color. Все фигуры с такой заливкой будут выделены, и одно изменение перекрасит их все.
4. Экспортируйте или сохраните результат как обычный SVG.

Дизайнерское приложение также понадобится для изменений шире цвета: перемещения фигур или правки кривых. Этот более обширный набор инструментов рассмотрен в нашем руководстве по редактированию SVG.

Способ 3: текстовый редактор

SVG — текст, поэтому подойдёт любой редактор: Notepad, TextEdit, VS Code.

1. Откройте файл .svg и найдите fill=.
2. Измените значение, например fill="#1e3a5f" на fill="#c2410c", и сохраните.
3. Обновите файл во вкладке браузера, чтобы проверить результат.

Есть три нюанса. Цвета могут быть записаны именами (fill="black"), а не только шестнадцатеричными кодами. Обводка задаётся в stroke=, а не в fill=. И многие экспортированные файлы вообще не задают цвет на самой фигуре: они используют классы, а код цвета расположен в блоке <style> ближе к началу файла (.st0{fill:#1e3a5f;}). Измените код в блоке стилей, и все фигуры с этим классом изменятся вместе с ним.

Этот способ особенно удобен для одноцветных иконок, где достаточно одной операции поиска и замены, и для пакетной обработки папки. Для иллюстрации с сорока цветами он будет медленным.

Если SVG используется на сайте

Можно изменить цвет SVG через CSS? Самый прямой путь — встроить разметку SVG в HTML. Тогда fill работает как свойство CSS, а значение currentColor позволяет иконке наследовать цвет окружающего текста. SVG, загруженный через внешний <img>, обрабатывается как изображение; MDN отмечает, что в этом случае JavaScript не может управлять структурой SVG, а стили страницы не могут напрямую выбирать его внутренние контуры.

Если встроить файл нельзя, возвращайтесь к способам редактирования выше: измените цвет внутри самого SVG и загрузите его заново. При выборе способа размещения сравните встроенный SVG и внешнее изображение на одном рисунке с проверкой CSS страницы.

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

Для обратимого цветового эффекта сравните feColorMatrix с прямым изменением заливок. Фильтр меняет отображаемые цвета, сохраняя исходную окраску, что важно при передаче редактируемого рисунка.

Почему SVG не меняет цвет

Именно этот раздел инструкции обычно пропускают, хотя здесь возникает большинство проблем перекрашивания. Проверьте строки таблицы по порядку.

Две причины стоит разобрать подробнее.

Неожиданный прямоугольник фона

Некоторые SVG содержат прямоугольник фона размером с изображение, незаметный на белой странице. Перекрасьте «всё», и за рисунком появится цветной блок; некоторые приложения также выделяют его при нажатии. Это обычная фигура, поэтому выделите и удалите её или задайте действительно нужный цвет. Если в другой программе прямоугольник появляется белым, это связанная, но другая проблема, описанная в руководстве по сохранению прозрачного фона.

SVG, который не является вектором

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

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Решение — вернуться к самой картинке, желательно исходному PNG или JPG, и преобразовать её в настоящий вектор с настоящими контурами. В руководстве по SVG, которые всё ещё выглядят пикселизованными, подробно разобрано, откуда берутся такие подмены и как обнаружить их до использования. Когда реальные фигуры появятся, все способы из этой статьи заработают.

Перекрашивание файла для резки: каждый цвет — слой

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

Поэтому для мастеров особенно полезно объединение почти одинаковых цветов. Трассированный рисунок часто содержит три почти одинаковых синих оттенка, которые добавляют слои без видимой пользы. Объедините их в один, и файл будет резаться быстрее, а выбирать лишний материал станет гораздо проще. Процесс сокращения палитры SVG объясняет, как объединять цвета по визуальной роли, сохраняя контраст и смысл операций. Если вы намеренно создаёте многослойный рисунок, наш гид по многослойным SVG охватывает весь процесс, а страница SVG для Cricut описывает подготовку рисунка для режущих машин от начала до конца.

Если после перекрашивания нужны отдельные файлы, сохраните каждый точный цвет как выровненный SVG.

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

Сначала о реальном ограничении: PerfectVector не редактирует уже имеющиеся SVG. Он преобразует изображения PNG, JPG и WebP в SVG. Но удивительно много проблем «как перекрасить этот SVG» возникает именно на этапе преобразования: непослушный файл обычно содержит неаккуратную трассировку или вообще не является настоящим вектором.

Если SVG получен из изображения или у вас остался оригинал, проще всего изменить цвет, начиная с исходника. Преобразуйте изображение в SVG, пригодный для редактирования: аккуратные контуры, мало узлов и каждый цвет как отдельная редактируемая фигура. Затем используйте встроенный редактор цветов перед скачиванием, чтобы заменить любой цвет или объединить похожие по цвету, без поиска отдельных контуров. Одним действием вы получаете нужную палитру и более простой файл; первые преобразования бесплатны, банковская карта не требуется.

Чего не может перекрашивание

• Градиент — не один образец. Это переход между цветовыми точками. Их можно редактировать, но простая операция «заменить этот цвет» может изменить только часть перехода, из-за чего градиентный рисунок после примитивной замены выглядит странно.
• Экранные цвета — не печатные. SVG хранит ориентированные на экран инструкции цвета, а печати может требоваться точный фирменный или плашечный цвет либо определённый состав чёрного. Если экспорт меняет видимый результат, разберитесь со сдвигом цветов SVG до замены палитры; требуемый типографией производственный формат остаётся главным ориентиром для цвета.
• Перекрашивание не исправляет геометрию. Новые заливки не объединят тонкие обломки, не закроют промежутки и не сократят узлы. Неаккуратная трассировка с новыми цветами остаётся неаккуратной.

Перед сохранением

• Заново откройте перекрашенный файл во вкладке браузера и сравните с оригиналом.
• Проверьте обводки: изменились ли они вместе с заливками там, где нужно?
• Найдите случайный прямоугольник фона, который могли нечаянно перекрасить.
• Для файлов резки посчитайте слои после объединения цветов: меньше почти всегда лучше.
• Сохраните нетронутую копию исходного файла.

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

Как изменить цвет SVG без Illustrator или Photoshop? Используйте бесплатный онлайн-инструмент замены цветов SVG: загрузите файл, нажмите на образец и скачайте. Либо используйте Inkscape, бесплатный векторный редактор для компьютера. Для одноцветной иконки также подходит любой текстовый редактор: измените шестнадцатеричное значение после fill=. Все эти способы бесплатны.

Почему SVG остаётся чёрным, что бы я ни делал? На сайте CSS не может изменить стили SVG, загруженного через тег img; встройте его или измените файл. В редакторе проверьте, не мешает ли группа, не задаёт ли цвет обводка и не определены ли цвета в блоке стилей. Если ничего не выделяется, а при увеличении видны пиксели, это растр в оболочке .svg, без фигур для перекрашивания.

Можно перекрасить SVG в Canva? Страница отдельного редактора SVG Canva сообщает, что можно бесплатно загрузить, перекрасить и скачать SVG без водяного знака. Сложные возможности SVG всё же могут отображаться по-разному в разных редакторах, поэтому проверьте скачанный файл перед заменой оригинала.

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

Как изменить цвета SVG для проекта Cricut? Слои можно перекрасить в Cricut Design Space, но там цвет меняется по слоям, а не по фигурам. Чтобы изменить, какие части имеют общий цвет и режутся вместе, отредактируйте SVG до загрузки: объедините цвета для одного слоя и назначьте отдельную заливку всему, что должно резаться отдельно.

Изменение цвета SVG снижает качество? Нет. Цвет вектора — текстовая инструкция, поэтому его замена меняет инструкцию без воздействия на геометрию. В отличие от редактирования PNG, SVG можно перекрашивать сколько угодно без потери качества.

Источники

1. MDN: заливки и обводки SVG — Объяснение fill, stroke, непрозрачности и связанных свойств окраски SVG.
2. MDN: добавление векторной графики на сайт — Сравнение встроенного SVG с SVG, загруженным через <img>.
3. Adobe Illustrator: выделение объектов с одинаковой заливкой и обводкой — Документация по выделению рисунка по общим атрибутам окраски.
4. W3C: встроенное содержимое SVG 2 — Определение растрового содержимого <image> в документах SVG.
5. Canva: редактор SVG — Актуальный источник заявлений Canva о загрузке, перекрашивании и скачивании SVG.

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