Почему перекрашивать SVG, а не PNG?
В PNG цвет размазан по тысячам пикселей, включая сглаженные края, поэтому изменить его — значит перерисовать. В SVG из залитых контуров цвет — это просто значение у каждой фигуры: меняете значение, а все края остаются ровно там, где были. Поэтому вторую палитру бренда, версию для темной темы или одноцветную версию для печати лучше делать из SVG.
Как перекрасить одну часть?
Откройте файл в SVG-редакторе. Векторизованное изображение открывается так, что каждый объект — отдельный слой; внутри него фигуры вложены по тому, что внутри чего находится (глаз внутри лица).
- На вкладке «Слои» в каждой строке видны ее цвета маленькими образцами: один — у одноцветной фигуры, несколько рядом — у группы.
- Кликните по образцу. Рядом откроется выбор цвета с готовыми цветами, цветами самого рисунка, полем для hex и пипеткой.
- Наведите на цвет, чтобы посмотреть его на холсте. Клик применяет его ко всем заливкам внутри этой строки (ко всему слою, группе или одной фигуре) одним шагом отмены. Esc возвращает прежний цвет.
Строку с несколькими цветами можно сделать одноцветной или изменить в ней только один цвет. Чтобы вместо этого выделить что-то на холсте: клик выделяет весь объект, двойной клик — входит внутрь, а панель над холстом показывает, где вы находитесь («Рисунок › Объект 2 › Фигура»). Один клик там возвращает на уровень выше.
Как заменить один цвет везде?
Откройте вкладку «Цвета». Там показана палитра рисунка. Клик по образцу выделяет все фигуры с этим цветом — так видно, где он используется, а «Заменить везде на» меняет его во всем рисунке одним шагом отмены.
Один из наших примеров, перекрашенный заменой двух его цветов везде. Все фигуры и края не изменились — отличаются только два значения заливки.
На той же вкладке — заливка и обводка выделенного (с пипеткой, чтобы взять цвет с холста), а для прямоугольника — его углы. Положение, размер, порядок, выравнивание и сетка — в разделе «Еще».
Как сделать одноцветную версию?
По очереди примените «Заменить везде на» к каждому цвету, задав всем один и тот же цвет краски. Или выделите всё и задайте заливку выделенного. Затем поищите фигуры, которые были видны только благодаря своему цвету: глаз, белый на темном лице, исчезнет, когда оба станут черными. Удалите такие фигуры или оставьте им второй цвет — например, цвет бумаги, — чтобы рисунок по-прежнему читался.
Как проверить результат?
- Контраст. Тексту и мелким деталям нужен достаточный контраст с тем, на чем они лежат. WCAG требует не меньше 4,5:1 для обычного текста.
- Маленькие размеры. Экспортируйте из редактора PNG в 32 и 64 px и посмотрите на них в этом размере, без увеличения.
- Темный фон. Логотипу, сделанному для белого фона, на темной странице часто нужна более светлая версия его самого темного цвета.
Сохранение и экспорт
«Сохранить» создает в вашем аккаунте новую версию SVG, а прежние версии остаются доступными. «Экспорт PNG» отрисовывает рисунок нужной ширины — от 16 до 4096 px. Несохраненные изменения хранятся в браузере как черновик и предлагаются снова, когда вы в следующий раз откроете тот же файл. Для редактора нужен аккаунт. Файлы в нем, включая отредактированные версии, хранятся столько, сколько длится срок хранения в вашем аккаунте, — он указан у каждого файла.