Как поменять цвет иконки svg в фотошопе
Вношу правки в верстку сайта на Laravel , весь CSS код билдится из SCSS .
Код добавления SVG картинки выглядит так:
Почему то не срабатывает
До этого верстал только на голом HTML + CSS сейчас пытаюсь постигнуть новые фишки, сразу видны пробелы в знаниях. Можете подсказать что я делаю не так? Я так понял беда в том, что сначала картинка подтягивается на сайт в своем исходном, а затем я пытаюсь его изменить обычным CSS. Обязательно прибегать к помощи JS?
Это не пробелы в знаниях, а пробелы в технологиях) Проблема в том, что svg работает как отдельный документ, и кажется что js тоже не поможет. Есть поход через якорную ссылку указывать стиль внутри svg и там менять цвет, но не работает в сафари и может еще где-то.
Странно, читал много статей, где явно говорилось что именно в таком формате как у меня svg-изображение реально перекрасить, только почему то именно в моем случае их примеры не работали
@СергейКурамшин добавьте код иконки svg, от её кода, точнее её стилей на 100% зависит решение ваших проблем. Пока информации мало, вы привели код стандартного добавления svg в HTML
3 ответа 3
Наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья Styling SVG Content with CSS - перевод,- оригинал
Для решения вашей задачи, полезен раздел статьи - Каскадирование стилей
Из этого раздела можно сделать вывод, что наивысшим приоритетом обладает внутренние стили svg.
Чтобы устранить доминирование приоритета внутренних стилей svg необходимо:
Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили - fill , stroke
Добавить во внешней таблице стилей path
В шапку файлов *.svg иконок добавить строчку, указывающую на внешнюю таблицу стилей
Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome
Update
Добавляете спрайт с иконками в HTML
вызываете иконку из спрайта по её id с помощью команды
Вот более подробно о нюансах добавления и стилизации иконки из спрайта
Смотрите, пробуйте варианты, уверен, что у вас получится. Так как это получается у многих, кто хочет добиться результата.
В моем случае картинки в формате svg просто лежат в папке images, такие мне отдал дизайнер. А так как я в первый раз имею дело с svg то даже не знаю как их встраивать. Почитал несколько статей, в одной было написано, что вставка через object со ссылкой на картинку - является одним из лучших решений. Как то так. Можно ли поменять стиль если грузить просто картинкой.svg?
Воспользовался вашей инструкцией и все получилось) Спасибо большое. Надоедает, правда идти по всем svg и дописывать xml-stylesheet, но зато раз и навсегда. Можно делать с иконками что угодно. Упустил из виду, что svg это просто path'ы прописанные в коде)
@СергейКурамшин код иконки добавь в вопрос пожалуйста, не понимаю, почему до сих пор не сделали этого. Проще же будет понять причину
@СергейКурамшин Видите, как слова можно понимать по разному.:) Я аж три ответа написал, основываясь на ваших комментариях. А был бы код весь сразу в вопросе, то был бы один, конкретный ответ сразу. Сейчас вижу, что вы смешали два способа вместе 1. инлайн - непосредственное добавление svg кода в Html и добавление спрайта с иконками svg через тег object . Не стоит их смешивать или инлайн или object
Ответ на комментарии
Вот именно такие иконки были до меня) Сказали поменять на десигнерские) А десигнерские являют собой просто картинку в формате SVG и никакие манипуляции с ней не канают
Ховер таким же образом прописанный не работает
Стилизация изображений в формате image/png;base64 при наведении курсора
Представьте такую ситуацию,- дизайнер нарисовал очень красивую картинку, лого и т.д. Выполнил вашу просьбу, чтобы она была в векторном формате.
Но, рисовал её в растровом редакторе и сохранил её, как бы вектор, в формате base64.
То есть встроил растр в векторный формат. Обычная стилизация не работает.
Перерисовать вам в чистом векторе затруднительно.
В этом случае можно заменить стилизацию на обработку SVG фильтрами.
Основная идея - в исходном состоянии на изображение накладывается один фильтр
А при наведении курсора применяются другие цветные фильтры id="RedFilter" , id="GreenFilter"
Давно прошли те дни, когда для иконок в вебе использовались картинки и CSS-спрайты. С развитием веб-шрифтов номером 1 для отображения иконок на сайтах стали иконочные шрифты.
Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть ( rotate ), подчеркнуть ( underline ) или добавить тень ( text-shadow ).
Иконочные шрифты не идеальны, поэтому все большее число людей предпочитает использовать встроенные SVG-изображения. На CSS Tricks есть статья, где описаны моменты, в которых иконочные шрифты уступают SVG-элементам: резкость, позиционирование, сбои кросс-доменной загрузки, особенности браузеров и блокировщики рекламы. Сейчас вы можете обойти большинство этих проблем, что, в целом, делает использование иконочных шрифтов безопасным.
Да, еще одна вещь, которая абсолютно невозможна при использовании иконочных шрифтов: поддержка многоцветности. Только SVG может это сделать.
TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.
Настройка символов SVG-иконок
Проблема встроенных SVG в том, что они сложны. Вы не хотите копипастить все эти координаты каждый раз, когда нужно использовать одну и ту же иконку. Получится повторяющийся, трудно читаемый и тяжело поддерживаемый код.
Использование SVG-символов позволяет иметь лишь один экземпляр каждого SVG-элемента и использовать его где угодно с помощью ссылки.
Начните с добавления встроенного SVG, спрячьте его, оберните содержимое в тег symbol и задайте ему id .
Полная разметка SVG-элемента пишется один раз и скрывается.
Затем все, что вам нужно сделать, это создать копию иконки с помощью элемента use .
Получится точная копия вашей оригинальный SVG-иконки.
Вот она! Довольна милая, правда?
Вы вероятно заметили атрибут xlink:href — это и есть ссылка между вашей иконкой и оригинальным SVG-изображением.
Важно отметить, что xlink:href — устаревший атрибут SVG. Даже если большинство браузеров все еще поддерживает его, вместо него нужно использовать href . Но дело в том, что некоторые браузеры, например, Safari, не поддерживают ссылки на SVG-ресурсы через атрибут href , поэтому вам все равно нужно указывать xlink:href .
Для безопасности используйте оба атрибута.
Добавление цвета
В отличие от шрифтов, свойство color не действует на SVG-иконки: необходимо использовать атрибут fill для указания цвета. Это значит, что они не наследуют родительский цвет текста, но вы все равно можете стилизовать их через CSS.
А следовательно, вы можете создавать другие экземпляры этой же иконки разных цветов.
Это работает, но это не совсем то, что мы хотим. Все, что мы сделали до сих пор, можно сделать и с помощью обычного иконочного шрифта. То, что мы хотим, — это сделать каждую часть иконки разного цвета. Мы хотим залить разными цветами каждую часть одной иконки, не изменяя другие ее экземпляры, и мы хотим, чтобы было возможно переопределять эти цвета при необходимости.
Сначала у вас может возникнуть идея положиться на специфичность.
Это не сработает.
Мы пытаемся задать стили для .path1 , .path2 и .path3 так, если бы они были вложены в .icon-colors , но технически это не так. use элемент это не плейсхолдер, который заменяется на определенный SVG. Это ссылка, которая копирует содержимое того, на что указывает, в shadow DOM.
И что нам тогда делать? Как мы можем повлиять на содержимое детей, когда говорят, что детей нет в DOM?
CSS-переменные помогут
В CSS некоторые свойства наследуются детьми от предков. Если вы укажете цвет текста для body , то весь текст на странице унаследует этот цвет, пока он не будет переопределен. Предок не знает детей, но наследуемые свойства все равно передаются.
В примере выше мы наследуем свойство fill . Посмотрите еще раз и вы увидите, что класс, в котором мы определили этот цвет fill добавляется к экземплярам иконки, а не к ее определению. Так мы смогли получить разноцветные копии одного источника.
Но вот проблема: мы хотим передать разные цвета для разных частей оригинальной SVG-иконки, но есть только один атрибут fill , который мы можем наследовать.
Встречайте CSS-переменные.
CSS-переменные объявляются в наборах правил так же, как и любое другое свойство. Вы можете назвать их как хотите и присвоить им любое допустимое CSS значение. Затем вы определите через эту переменную значение свойства самого элемента или его ребенка, и оно будет наследоваться.
Все дети .parent будут иметь текст красного цвета.
Теперь давайте применим эту концепцию для нашего SVG-символа. Мы будем использовать атрибут fill для каждой части path в определении нашей SVG-иконки и зададим им разные CSS-переменные. Затем мы назначим им разные цвета.
И… это работает!
С этого момента все, что нам нужно для создания копии с другой цветовой схемой, это написать новый класс.
Если вы все еще хотите монохромную иконку, вам не нужно повторять один и тот же цвет для каждой CSS-переменной. Вместо этого вы можете определить одно правило для fill : т.к. в этом случае CSS-переменные не определены, будет использоваться определение свойства fill .
Свойство fill будет работать, потому что атрибут fill исходного SVG задан с неопределенными значениями CSS-переменных.
Как назвать мои CSS-переменные?
Проблема в том, что в нашем случае мы не можем применять атомные классы к элементам, которые хотим стилизовать. Принципы utility-first не применимы, так как у нас есть только ссылка для каждой иконки, а мы должны стилизовать ее через вариации классов.
Использование семантического способа наименований, как например, --cup-handle-color , в нашем случае более уместно. Когда вам нужно изменить цвет какой-то части иконки, вы точно знаете, что и как вам нужно переопределить. Имя класса останется актуальным независимо от того, какой цвет вы назначили.
По умолчанию или не по умолчанию
Заманчивая идея — сделать ваши иконки по умолчанию разноцветными. В этом случае вы сможете использовать их без дополнительной стилизации, и только в случае необходимости добавлять отдельный класс.
Добиться этого можно двумя способами: через :root или через var() default.
Вы можете определить все ваши CSS-переменные в селекторе :root . Это позволит держать их все в одном месте и «делиться» схожими цветами. :root имеет самую низкую специфичность, поэтому его легко переопределить.
Однако, у этого метода есть существенные недостатки. Для начала, хранение определений цвета отдельно от соответствующих иконок может сбить с толку. Когда вы решите переопределить их, вам придется прыгать туда-обратно между селектором класса и :root . Но, что еще более важно, этот метод не позволяет вам изменять ваши CSS-переменные, поэтому вы не можете повторно использовать одни и те же имена.
В большинстве случаев, когда в иконке используется только один цвет, я называю переменную --fill-color . Это просто, понятно и позволяет использовать это наименование для всех одноцветных иконок. Если я определю все переменные в селекторе :root , я не смогу иметь несколько переменных --fill-color . Я буду вынуждена определять --fill-color-1 , --fill-color-2 или использовать пространства имен такие, как --star-fill-color , --cup-fill-color .
var() default
Функция var() , которую вы используете для назначения CSS-переменной для свойства, может принимать значение по умолчанию в качестве второго аргумента.
Пока вы не определите --color-1 , --color-2 и --color-3 , иконка будет использовать значения по умолчанию, установленные для каждого path . Это решает проблему глобального определения, которую мы имеем при использовании :root , но будьте осторожны: теперь у вас есть значение по умолчанию, и оно выполняет свою работу. Таким образом, вы больше не можете написать только одно свойство fill , чтобы сделать иконку монохромной. Вам нужно назначать цвет для каждой CSS-переменной, используемой в иконке, по отдельности.
Установка значений по умолчанию может быть полезна, но это компромисс. Я предлагаю не привыкать к этому, и делать только тогда, когда это имеет смысл для конкретного проекта.
Как это все поддерживается браузерами?
CSS-переменные поддерживаются всеми современными браузерами, но, как вы вероятно догадались, IE не поддерживает их, совсем. Даже IE11, и поскольку его развитие было прекращено в пользу Edge, нет никаких шансов, что он когда-либо будет их поддерживать.
Но только из-за того, что переменные не работают в браузере, который вам нужно поддерживать, не значит, что вы должны полностью от них отказаться. В таких случаях используйте graceful degradation: предлагайте разноцветные иконки современным браузерам, а для старых указывайте запасной цвет.
Все, что вам нужно сделать, — это добавить определение цвета, которое будет работать только, если CSS-переменные не поддерживаются. Этого можно добиться, указав свойству fill резервный цвет. Если CSS-переменные поддерживаются, это объявление не будет учтено. Если же это не так, оно сработает.
Если вы используете Sass, вы можете записать эту проверку в @mixin .
Теперь можно определять цветовые схемы, не беспокоясь о поддержке браузеров.
Передача CSS-переменных в mixin через @content необязательна. Если вы сделаете это снаружи, скомпилированный CSS будет таким же. Но может быть полезно держать все это в одном месте.
Вы можете проверить этот пример в разных браузерах. В последних версиях Firefox, Chrome и Safari последние две чашки будут соответственно красной с серым паром и синей с серым паром. В Internet Explorer и Edge ниже 15 версии третья иконка будет вся красная, а четвертая — вся синяя.
Есть svg иконки, требуется изменить цвет при наведении, как это делается? Натыкался на и другие связанные с ним теги, но понятной статьи по ним не нашел.
- Вопрос задан более трёх лет назад
- 50573 просмотра
Можете разъяснить пример? Я так понимаю из svg файла я вытаскиваю и ? нужен ли где то сам файл при этом как то подключать или где то хранить?
SVG можно размещать как inline-кодом (т.е. SVG-код прямо в дерево HTML), так и как обычное изображение. Первый случай в примере, который я нагуглил. При этом вам доступна возможность управлять стилями SVG-элементов через CSS (Да, там другие свойства, а некоторые просто иначе называются). Кроме того, можно работать и javascript-ом с элементами SVG.
А во втором случае вы получаете просто изображение. И тут для hover вам уже надо делать по-старинке - спрайтами в бэкграунде, например.
Neyury: Если используете первый вариант, то файл как таковой перестаёт существовать. Его SVG-код встраивается в HTML.
Но всё это не дает доступа к SVG.
Но, думаю, того не стоит.
Павел Китьян: Я попробовал разные способы подключения svg, пока самый подходящий вариант, это писать inline-кодом. Но это слишком загромождает html код, как вариант можно вставлять этот код при загрузке страницы с помощью js.
Но я хочу попробовать другой вариант, можно вставить svg через object и прописать в самом файле (внутри тега ), это работает но не очень удобно, так же пишут что можно не писать style, а подключить файл.css (тоже в файле svg), но у меня это не получается. Вы случаем не знаете как это сделать? Заранее спасибо.
Neyury: Разумеется, можно подключить стили CSS-файлом. А вот насчёт включения их в сам SVG - есть сомнения, но категорически "нет" не скажу, надо смотреть стандарт.
Если не нравится загромождение кода, то можно пользоваться инклюдами. Либо серверными, либо клиентскими. Зависит от того, какие фреймворки и шаблонизаторы используете.
Например в случае использования ангуляра, наверное можно использовать ng-include и убить сразу двух зайцев. У вас будут отдельные мальенькие HTML-файлы (не полноценные, только с кучком DOM, содержащим SVG-вставку). А при сборке странице, ангуляр сам распихает эти вставки в дерево и к ним применятся стили из CSS-файла, который прописан для главной HTML-страницы.
Возможно, опытные ангулярщики возразят. Не претендую, поскольку недавно за него взялся.
Neyury, вот кодировка со style внутри.
я правда еще не пробовал всё менять.
но как пример надеюсь поможет
ОТВЕТЫ
Ответ 1
Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.
Если вы хотите изменить изображение SVG, вы должны загрузить его, используя , или inline.
Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.
Ответ 2
Чтобы изменить цвет любого SVG, вы можете напрямую изменить код svg , открыв файл svg в любом текстовом редакторе. Код может выглядеть следующим образом:
Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т.д.. Там вы можете добавить свой собственный цвет с помощью атрибута style. Посмотрите на приведенный ниже пример
Добавьте атрибут стиля ко всем тегам, чтобы вы могли получить свой SVG требуемого цвета
Ответ 3
Ответ 2019
- Добавьте изображение SVG с помощью тега .
- Чтобы выполнить фильтрацию по определенному цвету, используйте следующий Codepen (Нажмите здесь, чтобы открыть codepen), чтобы преобразовать шестнадцатеричный цветовой код в фильтр CSS:
Ответ 4
Добавлена тестовая страница - раскрасить SVG через настройки фильтра:
EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
Ответ 5
Только SVG с информацией о пути. Вы не можете сделать это с изображением. как путь вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор
Итак: с помощью CSS вы можете перезаписать значение fill пути
но если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда есть какой-то эффект зависания.. используйте
Ответ 6
РЕДАКТИРОВАТЬ: Как упомянуто в статье, прокомментированной @CodeMouse92, иконочные шрифты портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.
Ответ 7
Вы можете изменить раскраску SVG с помощью css, если вы используете некоторые трюки. Для этого я написал небольшой script.
- просмотрите список элементов, которые имеют изображение svg
- загрузить файл svg как xml
- выбор только svg part
- изменить цвет пути
- замените src на модифицированный svg как встроенное изображение
приведенный выше код может работать некорректно, я реализовал его для элементов с фоновым изображением svg, который работает почти так же. Но в любом случае вам нужно изменить этот script, чтобы он соответствовал вашему делу. надеюсь, что это помогло.
Ответ 8
Чтобы просто изменить цвет svg:
Перейдите в файл svg и в разделе стилей укажите цвет заливки.
Ответ 9
Целевой путь в SVG:
Вы можете сделать inline, например:
Ответ 10
Если вы хотите сделать это для встроенного SVG, который, например, фоновое изображение в вашем CSS:
Расскажу, как быстро поменять цвет векторной иконки. Кроме того, что векторные иконки хорошо выглядят в любом размере, менять их цвет тоже значительно проще, чем перекрашивать растровую иконку в фотошопе.
Растровая или векторная?
Рекомендую использовать векторные иконки, так как они выглядят хорошо в любом размере (суть формата заключается в том, что изображение формируется из опорных точек и линий между ними, изображения можно увеличить, а качество остается прежним).
Сравните. Справа векторная иконка на увеличении, края у нее ровные. Слева увеличена растровая иконка, при увеличении появляются пиксели и рваные края, а на краях цвет писклей неравномерный, какие-то темные, какие-то светлые.
Сама картинка уже растровая. То есть увеличивая эту картинку, правое изображение начнет терять качество).
Из-за рваных краев и оттенков цвета по краю, будет сложно аккуратно поменять цвет растровой иконки. В зависимости от ваших навыков, может получится хорошо, а может и очень ужасно. С векторной иконкой проще, мы просто задаем цвет линий.
Где взять векторные иконки (да и растровые)
В интернете много поисковиков по иконкам, где их можно скачать, как в растре, так и векторе.
Iconfinder — поисковик по иконкам.
Как поменять цвет векторной иконки
Загружаем иконку, кликаем на элементы иконки и в настройках задаем нужный цвет.
Редактирование цвета векторной иконки
При сохранении оставляем векторный формат SVG.
Как поменять цвет растровой иконки
Используя инструмент выделения «Цветовой диапазон», выделяем все элементы иконки.
Далее, с помощью инструмента «Заливка» нам нужно залить выделение выбранным цветом.
Ресурсы для поиска иконок
Напоследок, несколько популярных ресурсов для поиска иконок:
Не забывайте, что многие бесплатные изображения, в том числе иконки, требуют указания авторства.
Читайте также: