Как менять цвет svg в css

Чем открыть формат SVG — 10 способов

Windows

Автор fast12v0_viinrar На чтение 15 мин Опубликовано 12.03.2023

Что такое SVG

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — один из видов графики, которые формируются с помощью геометрических объектов: линий, окружностей, прямоугольников, кривых и других элементов.

Сочетание таких деталей позволяет создать практически любой образ. Например, это может быть иконка социальной сети Instagram:

Толчок к развитию этого языка разметки впервые дал Консорциум World Wide Web, который в 1999 году был более известен как W3C. W3C также предоставил концепцию SVG — языка разметки для создания двумерных графических интерфейсов и изображений.

Сегодня SVG используется на всех современных сайтах — это могут быть как иконки социальных сетей, так и полноразмерные иллюстрации. Но чаще всего это логотипы, различные иконки.

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

Обычно, когда они хотят что-то нарисовать в HTML, они используют холст с тегом и рисуют на нем. Но преимущество SVG-графики в том, что для нее не требуется отдельный холст — с помощью тега можно рисовать что угодно в любом месте страницы. Между этими тегами указаны все объекты, которые нам нужно нарисовать.

Например, мы можем поместить любой заголовок на страницу, а затем нарисовать пару зеленых кружков и красную линию прямо поверх него:

Теперь давайте узнаем, как мы это сделали и что для этого нужно.

Линия

Линия — самый простой элемент в графике SVG. Чтобы нарисовать линию, нам нужно знать:

• начальные и конечные координаты,
• толщина линии,
• и ее цвет.

Тег используется для строки

Давайте сложим все вместе:

Теперь давайте завернем эту команду в тег

Круг

Для окружности используется команда, где мы должны указать:

• центр круга,
• радиус,
• цвет заливки,
• толщина контура,
• цвет контура.

Чтобы нарисовать зеленый круг жирной фиолетовой линией, установите следующие параметры:

Давайте соберем это вместе, добавим новый круг и также поместим это внутрь тега :

Прямоугольник

С прямоугольниками тоже все просто — указываем размеры, цвет заливки, а также цвет и толщину контура:

Недостаток стандартного прямоугольника в том, что он всегда рисуется из точки с координатами (0,0). Если прямоугольник нужен в другом месте, используется многоугольник.

Многоугольник

Многоугольник — это форма, которая выглядит следующим образом:

1. Задаем любое количество точек с координатами.
2. Линии проходят через эти точки по порядку, причем последняя точка соединяется с первой.
3. То, что получилось в границах линий, закрашивается выбранным цветом.

Например, вот что нужно, чтобы нарисовать синий треугольник:

Как видите, многоугольник позволяет разместить любую фигуру в любом месте страницы.

Продвинутый уровень

Теперь добавим заголовок, чтобы получилось изображение, как в начале статьи. Пишет после тега

Привет, это журнал Код!

Особенность SVG-формата

неделя знакомства с дизайнерскими профессиями
ИСКРА — бесплатная ИСКРА —
неделя знакомства с дизайнерскими профессиями

Выберите профессию дизайнера, необходимую в IT.

зажечь искру

Основное отличие SVG от других векторных форматов заключается в том, что он широко используется в дизайне веб-сайтов и мобильных приложений благодаря небольшому размеру файлов и возможности настройки. Его можно редактировать не только в графическом редакторе, но и с помощью HTML и CSS прямо на сайте. Поэтому иконки и полноценные иллюстрации для веба очень часто создаются в векторном формате SVG.
Простые SVG-иконки на праздничную тематику от Unblast. Неделя открытия профессий в области дизайна исходного кода
ИСКРА — бесплатная ИСКРА —
неделя знакомства с дизайнерскими профессиями

Выберите профессию дизайнера, необходимую в IT.

Читайте также: Загрузочная флешка с Windows 7 за 10 мин

Достоинства SVG

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

Еще одна особенность SVG — настройка. Предположим, нам нужно загрузить на сайт красную иконку, а у нас под рукой только черная. Если это растровое изображение JPG или PNG, потребуется много усилий, чтобы изменить цвет значка. В случае с SVG достаточно открыть графический редактор, поддерживающий векторные изображения, например Figma, и изменить цвет значка одним кликом. Это похоже на изменение цвета одного элемента.

Также SVG-изображение можно открыть в HTML и CSS, а это значит, что мы можем напрямую изменить как сам объект, так и его цвет через код.

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

Недостатки SVG

Таким образом, у SVG нет недостатков, но есть несколько моментов, о которых вам следует знать:

• SVG нельзя использовать для изображений. Теоретически можно получить изображение в формате SVG, но такой файл будет очень большим. Кроме того, файл останется тем же растровым изображением, которое будет покрыто оболочкой SVG.
• Не поддерживается старыми браузерами.

В целом, формат SVG — лучший вариант для использования иконок, анимации и иллюстраций на веб-сайте.

Как подключить SVG к HTML-странице

В первую очередь стоит отметить, что SVG по внешнему виду часто напоминает полноценную HTML-страницу, снабженную собственными стилями, а иногда и скриптами. Именно из этого следует исходить при выборе способа «прикрепления» изображения к коду.

Самый простой способ — использовать тег
. Подходит, если это статичное сохраненное изображение. Нужно понимать, что никакие скрипты или анимации в данном случае применяться не будут. Этот способ прикрепления изображения является самым простым и требует лишь небольшого знания HTML-разметки. Код будет выглядеть примерно так:

Таким способом удобно прикреплять простые элементы: схемы, графики, логотипы, простые иллюстрации, если они не требуют интерактивности.
Сложные иконки SVG от Premast и Yassmin Moghazy. Источник

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

Как менять цвет SVG-иконки через CSS?

Это очень популярный вопрос среди начинающих и верстальщиков по работе с форматом SVG.

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

0-2 922-.151-3 198 686-3 198 388 0 1 056 192 2 616 1 667 1 783 1 749 2 076 2 532 3 074

0 682 892 4 073 4 148 8 553 2,17 3 058 5 226 4 715 8 006 4 715 1 671 0 1 875–0,368 1 875–1 001

0-.668.306-.668.591 0.622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892

Тег пути задает описание пути с использованием промежуточных координат. Параметр пути d содержит команды в закодированной форме.

Подведем итог. Формат SVG очень популярен в современном дизайне, особенно для создания иконок. При рендеринге лучше не перегружать изображение деталями и элементами, чтобы оно имело небольшой вес и не мешало потом загружать сайт. Вы можете нарисовать SVG-изображение в любом редакторе векторной графики, самым популярным из которых является Adobe Illustrator. А менять наполнение и размер иконок можно не только в редакторе, но и прямо в коде сайта.

Базовые формы SVG

Каждый файл SVG может состоять из таких элементов, как:

• простая линия;
• ломаная линия;
• прямоугольник;
• круг;
• эллипс;
• полигон.

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

Просмотр файлов SVG в веб-браузере

Большинство современных браузеров, включая даже устаревший Internet Explorer, по умолчанию поддерживают формат файлов SVG. Вы можете просматривать файлы SVG онлайн без дополнительных действий в Интернете, потому что такие изображения используются на некоторых веб-сайтах.

Помимо всемирной паутины, ваш браузер подходит в качестве автономного средства просмотра SVG на вашем устройстве. Браузер распознает SVG как файл XML, поэтому этот формат автоматически откроется там.

1 способ, как открыть файл SVG в браузере:

1. Найдите файл SVG на своем компьютере. Файл может отображаться со значком браузера по умолчанию на вашем ПК или может быть просто пустым.
2. Щелкните файл правой кнопкой мыши, в контекстном меню сначала выберите «Открыть с помощью», а затем выберите один из предложенных браузеров, установленных на вашем компьютере.

1. Изображение SVG откроется в вашем браузере. Вы можете видеть, что адресная строка URL-адреса указывает на файл в вашем локальном расположении, а не на веб-страницу.

Просто перетащите SVG-файл в окно браузера, чтобы просмотреть это изображение в браузере (Google Chrome, Яндекс.Браузер, Microsoft Edge, Mozilla Firefox, Opera, Vivaldi и т д).

Как открыть SVG-файл

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

Далее рассмотрим список этих программ и принцип взаимодействия с ними.

Вариант 1: GIMP

Расширенный бесплатный графический редактор. Может открывать SVG и другие «редкие» форматы. Вы также можете вносить и сохранять изменения в этом формате изображения в нем.

Процесс открытия файлов SVG через графический редактор GIMP выглядит следующим образом:

1. В верхнем меню программы воспользуйтесь кнопкой «Файл». В появившемся контекстном меню выберите «Открыть». Вы также можете использовать сочетание клавиш Ctrl+O, универсальное для открытия файлов в большинстве программ.
2. Откроется оболочка GIMP для выбора файла для дальнейшей работы. Там во встроенном файловом менеджере выберите папку, в которой находится файл для открытия.
3. Выберите сам файл SVG и нажмите «Открыть». Обратите внимание, что вы можете выбрать несколько файлов. Они открываются в разных рабочих окнах программы.
4. Перед открытием откроется окно «Создать масштабируемую векторную графику». Необходимо внести небольшие изменения на этапе открытия — настройка масштабирования, изменение размера, разрешения и т.д. Здесь ничего менять нельзя и нажать «ОК”.

После произведенных по инструкции манипуляций в рабочем окне GIMP открывается SVG-изображение. Там вы можете сохранить его в другом формате и/или отредактировать.

Вариант 2: Adobe Illustrator

Также продвинутый графический редактор, предназначенный только для создания и редактирования векторной графики. Он также поддерживает изображения SVG. Однако, в отличие от предыдущей версии, она распространяется исключительно на платной основе.

1. откройте иллюстратор. В верхнем меню нажмите кнопку «Файл» и выберите в контекстном меню пункт «Открыть» или используйте универсальную горячую клавишу Ctrl+O.
2. Здесь, в отличие от GIMP, открывается стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Здесь вы также можете выбрать несколько изображений, которые будут открываться одновременно. Для этого зажмите клавишу Ctrl и нажмите на нужное изображение.
3. Перед открытием SVG-изображения вы увидите сообщение об отсутствии встроенного RGB-профиля. В нем можно назначить профиль RGB с помощью предложенных программой вариантов или оставить без изменений (опция выбрана по умолчанию). Нажмите «ОК», чтобы открыть.

Изображения, выбранные на шаге 2, появятся в рабочей области Adobe Illustrator.

Вариант 3: Google Chrome

Изображения SVG легко открываются во многих браузерах. Мы рассмотрим процесс открытия этого файла в самом популярном браузере — Google Chrome:

1. В отличие от ранее рассмотренных программ, в контекстном меню нет кнопки «Файл» и пункта «Открыть», поэтому приходится пользоваться универсальной комбинацией клавиш — Ctrl+O.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Здесь вы также можете выбрать несколько изображений, которые будут открываться одновременно. Для этого зажмите клавишу Ctrl и нажмите на нужное изображение.

Выбранные изображения автоматически откроются в режиме просмотра в новых вкладках браузера. В большинстве других браузеров: Яндекс.Браузер, Opera, Mozilla Firefox, Vivaldi и так далее процесс открытия выглядит точно так же, как в Google Chrome. Кстати, они также поддерживают работу с SVG в режиме отображения.

Вариант 4: OpenOffice Draw

Это простая программа для редактирования изображений, входящая в состав офисного пакета OpenOffice. Функционал здесь в плане редактирования оставляет желать лучшего, но для открытия SVG-изображений вполне достаточно. Кроме того, данный офисный пакет распространяется совершенно бесплатно.

Процесс открытия файла SVG выглядит так:

1. Запустите сам OpenOffice. Появится окно приветствия, в котором вы можете создать новый документ или открыть файл. В нашем случае нужно выбрать пункт «Открыть» в главном меню.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

По умолчанию OpenOffice открывает выбранное изображение SVG в программе Draw.

Вместо того, чтобы следовать инструкциям, описанным в статье, вы можете просто перетащить нужный файл в окно OpenOffice прямо из «Проводника». Программа также откроет его корректно.

Вариант 5: LibreOffice Draw

Это также один из бесплатных пакетов для работы с офисными приложениями. Он очень похож по функционалу и набору встроенных программ на OpenOffice. Однако интерфейс обоих пакетов и некоторых входящих в них программ немного отличается.

Также читайте:
откройте CFG-файл
откройте файл .pptx
Конвертировать файл XPS в PDF онлайн
Конвертировать файл APE в MP3

Процесс открытия файла SVG в этом случае происходит по следующей инструкции:

1. Запустите программу запуска LibreOffice. Выберите Открыть в меню слева. Вы также можете вызвать интерфейс открытия через меню «Файл» или с помощью сочетания клавиш Ctrl+O.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

Ваше изображение SVG откроется в интерфейсе Draw. Вместо того, чтобы следовать инструкциям, описанным в статье, вы можете просто перетащить нужный файл в окно OpenOffice прямо из «Проводника». Программа также откроет его корректно.

Вариант 6: XnView

XnView — универсальный просмотрщик изображений. Встроенная функциональность позволяет легко просматривать содержимое файлов SVG. Это платная программа, но ее можно использовать и бесплатно. Процесс открытия файлов SVG с его помощью выглядит следующим образом:

1. Запустите программу XnView. Там в верхнем меню воспользуйтесь кнопкой «Файл». В контекстном меню выберите пункт «Открыть» или воспользуйтесь универсальной горячей клавишей Ctrl+O.
2. Откроется файловый менеджер программного обеспечения. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

Выбранный файл SVG открывается в режиме просмотра в интерфейсе XnView.

Изображение SVG также можно просмотреть через файловый менеджер программы, но только в режиме предварительного просмотра.

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

Чуть ниже выбранное изображение SVG открывается в режиме предварительного просмотра.

Вариант 7: IrfanView

Это еще один универсальный просмотрщик файлов. В отличие от ранее обсуждавшегося здесь варианта, в некоторых версиях подключаемый модуль CAD Image DLL не может быть предварительно установлен. Чтобы избежать возможных проблем в будущем, рассмотрим, как установить указанный плагин в IrfanView:

1. Скачайте плагин CAD Image DLL с официального сайта разработчика.
2. Перейдите в корневую папку IrfanView. Если вы не знаете, как это сделать, щелкните правой кнопкой мыши ярлык программы и выберите параметр «Показать расположение файла». Windows автоматически откроет корневую папку программы.
3. Здесь найдите и перейдите в папку «Плагины». Перетащите туда загруженный ранее файл CADImage.dll. На этом установка плагина в IrfanView завершена.
4. Теперь перейдите в интерфейс самой программы, чтобы открыть SVG-изображение.
5. В верхнем меню нажмите кнопку в виде папки со стрелкой или используйте клавишу O (английская раскладка). В данной программе этот ключ отвечает за открытие новых файлов.
6. Откроется файловый менеджер программного обеспечения. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

После проделанных манипуляций файл SVG нужно открыть в интерфейсе IrfanView. Вместо того, чтобы следовать инструкциям, описанным в статье, вы можете просто перетащить нужный файл в окно OpenOffice прямо из «Проводника». Программа также откроет его корректно.

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

Формат SVG в Inkscape

Inkscape — бесплатный редактор векторной графики. В программе можно просматривать и редактировать файлы SVG, а также конвертировать их в другие графические форматы.

1. В главном окне Inkscape перейдите в меню «Файл».
2. Нажмите «Открыть…».
3. В окне «Выберите файл для открытия» откройте изображение SVG.

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами, кроме Internet Explorer 8. Но это можно исправить с помощью JavaScript-библиотеки Raphael.js. Вы можете преобразовать файл SVG в формат этой библиотеки на веб-сайте ReadySetRaphael.

Как изменить цвет элемента SVG?

Я хочу использовать эту технику http://css-tricks.com/svg-fallbacks/ и изменить цвет SVG, но до сих пор я не смог этого сделать. Я положил это в CSS, но мое изображение всегда черное, несмотря ни на что. Мой код:

.change-my-color  fill: green; >

  class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> 

Выполнить фрагмент кода Скрыть результаты
Я не эксперт SVG, но вы пытались изменить заливку на цвет фона?

@Megan в цвете фона SVG указывается с помощью свойства «заливка» и границы с «обводкой» (как вы сделали бы в Illustrator). w3.org/TR/SVG/propidx.html

CSS из вашего HTML-документа не будет применяться к элементам SVG в

Это возможно сейчас. Простой и функциональный ответ здесь: stackoverflow.com/a/53336754/467240

Вы не можете изменить цвет изображения таким образом. Если вы загрузите SVG как изображение, вы не сможете изменить способ его отображения с помощью CSS или Javascript в браузере.

Если вы хотите изменить SVG изображение, вы должны загрузить его , используя , или используя встроенный.

Если вы хотите использовать методы на странице, вам нужна библиотека Modernizr, где вы можете проверить поддержку SVG и условно отобразить или не использовать запасное изображение. Затем вы можете встроить SVG и применить нужные вам стили.

#time-3-icon  fill: green; > .my-svg-alternate  display: none; > .no-svg .my-svg-alternate  display: block; width: 100px; height: 100px; background-image: url(image.png); >

 width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">  id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>   class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Выполнить фрагмент кода Скрыть результаты

Вы можете встроить SVG, пометить ваше резервное изображение именем класса ( my-svg-alternate ):

 width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">  id="time-3-icon" . />   class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" /> 

А в CSS используйте no-svg класс из Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ), чтобы проверить поддержку SVG. Если поддержка SVG отсутствует, блок SVG будет игнорироваться, и изображение будет отображаться, в противном случае изображение будет удалено из дерева DOM ( display: none ):

.my-svg-alternate  display: none; > .no-svg .my-svg-alternate  display: block; width: 100px; height: 100px; background-image: url(image.png); > 

Затем вы можете изменить цвет вашего встроенного элемента:

#time-3-icon  fill: green; > 

Вы не можете object стилизовать встроенные SVG из документа хостинга.

@JavierRey вы можете добавить стиль в содержимое тега объекта через javascript. Но вы правы, что это не применимо, если вы просто добавите его в таблицу стилей хост-документа.

Я использую решение от @ manish-menaria, и оно отлично работает.
Принятый ответ должен быть изменен на: stackoverflow.com/a/53336754/467240

Ответ 2020

Чтобы изменить любой цвет SVG

1. Добавьте изображение SVG, используя тег.

 src="dotted-arrow.svg" class="filter-green"/>

1. Чтобы отфильтровать по определенному цвету, используйте следующую Codepen (Нажмите здесь, чтобы открыть codepen), чтобы преобразовать шестнадцатеричный цветовой код в фильтр CSS:

Например, вывод для #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

1. Добавьте CSS filter в этот класс.

 .filter-green filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); > 

Это сопровождается обычным предупреждением о том, что он не поддерживается в старых версиях браузера: developer.mozilla.org/en-US/docs/Web/CSS/…

Как отмечалось в CodePen, если ваш SVG не черный (у меня был серый), добавление brightness(0) saturate(100%) в начало списка фильтров сначала сделает его 100% черным, что позволяет другим фильтрам изменить его на правильный цвет.

Кроме того, в этом вопросе StackOverflow содержится много интересных сведений о решении, которое сообщило CodePen.

Мой парень. Поддержка кажется приемлемой caniuse.com/#feat=css-filters .

работает так хорошо, использовал этот независимый кодекс, чтобы вставить мой гекс в фильтр: codepen.io/sosuke/pen/Pjoqqp

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

xml version="1.0" encoding="utf-8"?>   version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">  d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/> /*Some more code goes on*/   

Вы можете заметить, что есть некоторые теги XML, такие как путь, круг, многоугольник и т . Д. Там вы можете добавить свой собственный цвет с помощью атрибута стиля . Посмотрите на приведенный ниже пример

 style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223 C181.113,454.921,171.371,464.663,161.629,474.404z"/> 

Добавьте атрибут style ко всем тегам, чтобы вы могли получить SVG нужного вам цвета

Почему бы просто не использовать fill такой атрибут fill = «#AB7C94» ? Не уверен, зачем style нужен атрибут

Привет, Даниэль, да, это работает. Я не знал, что заливка может использоваться как атрибут. Извините, что так долго не замечал ваш комментарий @ bg17aw

Добавлена ​​тестовая страница — раскрасить SVG через настройки фильтра:

НАПРИМЕР filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Спасибо, ты просто спас меня от себя. .custom-disabled > svg сделал только работу, мне нужно отключить значок.

Только SVG с информацией о пути . Вы не можете сделать это с изображением . как путь, вы можете изменить штрих и заполнить информацию, и все готово. как иллюстратор

Итак: через CSS вы можете перезаписать fill значение пути

path  fill: orange; >

но если вы хотите более гибкий способ, как вы хотите изменить его с текстом, когда происходит эффект зависания .. используйте

path  fill: currentcolor; >

body  background: #ddd; text-align: center; padding-top: 2em; > .parent  width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; > /*** desired colors for children ***/ .parent color: #000; background: #def; > .parent:hover color: #fff; background: #85c1fc; > .parent span font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; > .parent svg max-height: 26px; width: auto; display: inline; > /**** magic trick *****/ .parent svg path fill: currentcolor; >

 class='parent'> TEXT WITH SVG   version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">  d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z">  

Выполнить фрагмент кода Скрыть результаты

Самый простой способ — создать шрифт из SVG, используя такой сервис, как https://icomoon.io/app/#/select или подобный. загрузите SVG, нажмите «создать шрифт», включите файлы шрифтов и CSS на свою сторону и просто используйте и стилизуйте его, как любой другой текст. Я всегда так использую, потому что это делает стиль намного проще.

РЕДАКТИРОВАТЬ: Как упоминалось в статье, прокомментированной @ CodeMouse92, шрифты значков портят программы чтения с экрана (и, возможно, вредны для SEO). Так что скорее придерживайтесь SVG.

Это также портит программы чтения с экрана. См. «Смерть

SVG маска на элементе box с цветом фона приведет к:

.icon --size : 70px; display : inline-block; width : var(--size); height : var(--size); transition : .12s; -webkit-mask-size: cover; mask-size : cover; > .icon-bike background: black; -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg); mask-image: url(hhttps://image.flaticon.com/icons/svg/89/89139.svg); animation: 1s frames infinite ease; > @keyframes frames  50%  background:red; > >

 class="icon icon-bike" style="--size:150px">

Выполнить фрагмент кода Скрыть результаты

_{Примечание. Маски SVG не поддерживаются в браузерах Internet Explorer.}

Большое спасибо, @vsync, это просто лучшее, что мне нужно.

Вы можете изменить окраску SVG с помощью CSS, если вы используете некоторые приемы. Я написал небольшой сценарий для этого.

• просмотреть список элементов, которые имеют изображение SVG
• загрузить файл SVG как XML
• получить только часть SVG
• изменить цвет пути
• замените src измененным svg как встроенное изображение

$('img.svg-changeable').each(function ()  var $e = $(this); var imgURL = $e.prop('src'); $.get(imgURL, function (data)  // Get the SVG tag, ignore the rest var $svg = $(data).find('svg'); // change the color $svg.find('path').attr('fill', '#000'); $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML'))); >); >);

приведенный выше код может работать неправильно, я реализовал это для элементов с фоновым изображением SVG, которое работает почти так же, как это. Но в любом случае вы должны изменить этот скрипт, чтобы он соответствовал вашему случаю. надеюсь, это помогло.

Кстати, если вы являетесь разработчиком RoR, вы можете добавить новый метод для прекомпилятора sass, который тоже может выполнять эту работу. Это намного лучше, потому что в скомпилированном css-файле у вас будет правильное цветное изображение в кодировке base64. JS больше не нужен! Может быть, я мог бы предоставить код, который я написал, поговорить с техническим директором.

+1 за предоставление решения, вместо того, чтобы сказать, что это невозможно сделать. Ответ на этот вопрос также актуален: stackoverflow.com/questions/11978995/.

Целевой путь в SVG:

Вы можете сделать inline, например:

 fill="#ccc">

svg path fill: #ccc

Чтобы просто изменить цвет svg:

Перейдите в файл svg и в разделе стилей укажите цвет заливки.

 .cls-1fill:#FFFFFF;> 

Уже предложили этот ответ

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

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='. '/%3E%3C/svg%3E");

Выполнить фрагмент кода Скрыть результаты

конечно, замените . своим встроенным кодом изображения

Например, в вашем HTML:

  viewBox="" width="" height="">  id="struct1" fill="#xxxxxx" d="M203.3,71.6c-. ">  

$("#struct1").css("fill","");

Это работает, только если вы включаете файл SVG в HTML. Я отредактировал ваш ответ, чтобы прояснить это.

На самом деле, есть более гибкое решение этой проблемы: написание веб-компонента, который будет исправлять SVG как текст во время выполнения. Также опубликовано в Gist со ссылкой на JSFiddle

�� фильтр: инвертированный (42%) сепия (93%), насыщенный (1352%) оттенок с поворотом (87 градусов), контрастность (119%) (119%);

   SVG with color    (function ()  const createSvg = (color = '#ff9933') => ` svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22"> defs/> g> ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/> ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/> path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/> g> svg>`.split('#ff9933').join(color); function SvgWithColor()  const div = Reflect.construct(HTMLElement, [], SvgWithColor); const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan'; div.innerHTML = createSvg(color); return div; > SvgWithColor.prototype = Object.create(HTMLElement.prototype); customElements.define('svg-with-color', SvgWithColor); document.body.innerHTML += `svg-with-color color='magenta' >svg-with-color>`; >)();   

Как поменять цвет svg в css

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

Сперва необходимо подготовить векторное SVG изображение, для этого можно воспользоваться редактором с открытым исходным кодом — Inkscape.
Для того чтобы SVG менял цвет на странице сайта, необходимо в настройках фона и обводки изображения снять заливку цветом (выбрать знак вопроса в настройках фона и обводки), Inkscape 0.48.5:

Далее, для того, чтобы обращаться к объекту внутри svg файла, необходимо задать объекту id сделать это можно в свойствах объекта:

А далее пример того, как изменить цвет и обводку объектов уже на html странице при помощи css:

Как изменить цвет SVG изображения с помощью CSS (замена SVG изображения jQuery)?

Это самостоятельный вопрос и ответ на удобный фрагмент кода, который я придумал.

В настоящее время не существует простого способа вставить SVG-изображение и затем получить доступ к SVG-элементам через CSS. Существуют различные методы использования JS SVG фреймворков, но они слишком сложны, если все, что вы делаете, это простая иконка с состоянием ролловера.

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

Вот в чем вопрос:

Как мне вставить SVG и изменить его цвет в CSS без использования JS-SVG фреймворка?.

Во-первых, используйте тег IMG в HTML для вставки SVG-графики. Для создания графики я использовал Adobe Illustrator.

Это похоже на то, как вы вставляете обычное изображение. Обратите внимание, что вам нужно установить для IMG класс svg. Класс ‘social-link’ приведен для примера. ID не обязателен, но полезен.

Затем используйте этот код jQuery (в отдельном файле или встроенный в HEAD).

Приведенный выше код ищет все IMG’ы с классом ‘svg’ и заменяет их на инлайн SVG из связанного файла. Огромным преимуществом является то, что это позволяет вам использовать CSS для изменения цвета SVG, например, так:

Код jQuery, который я написал, также переносит ID и классы оригинальных изображений. Так что этот CSS тоже работает:

Теперь вы можете использовать свойство CSS фильтр в большинстве современных браузеров (включая, но не ИЕ11). Он работает на SVG изображений, а также другие элементы. Вы можете использовать Хюэ-поворот или инвертировать изменить цвет, хотя они не’т давайте вы измените самостоятельно разные цвета. Я использую следующий класс CSS, чтобы показать и»отключен» по версии значок (где оригинал изображения в формате SVG с насыщенным цветом):

Это делает его светло-серый в большинстве браузеров. В IE (и, возможно, Опера мини, которые я не’т проверено) это заметно потускнел свойством непрозрачности, которая по-прежнему выглядит довольно хорошо, хотя это’s не серый.

Здесь’ы пример с четырех различных CSS-классов для представляет Белл значок: оригинальный (желтый), выше на «отключен» Класс, Хюэ-поворот (зеленый), и инвертировать (синий).

В качестве альтернативы вы можете использовать CSS mask , при условии, что поддержка браузера не очень хороша, но вы можете использовать запасной вариант

Если вы можете включать файлы (PHP include или include через выбранную вами CMS) в вашу страницу, вы можете добавить код SVG и включить его в вашу страницу. Это работает так же, как вставка источника SVG на страницу, но делает разметку страницы более чистой.

Преимуществом является то, что вы можете нацеливать части SVG с помощью CSS для наведения — не требуется javascript.

Вам просто нужно использовать правило CSS, например, такое:

Обратите внимание, что бит !important необходим для переопределения цвета заливки.

@Дрю Бекер дал отличное решение, чтобы решить проблему. Код работает правильно. Однако те, кто использует AngularJS не может найти много зависимость от jQuery. Следовательно, я думал, что это хорошая идея, чтобы вставить для пользователей в AngularJS, код после @Дрю Бекер’ы решение.

В AngularJS способ один и тот же код

1. HTML-код: используйте тег пыльник на вы HTML-файл:

2. Директивы: это будет директива, что вы должны признать тег:

4. Блок-тест с карма-Жасмин:

Я понимаю, что вы’вновь желая достичь этого с помощью CSS, но просто напоминание на случай, если это’s маленький, простой образ — вы всегда можете открой его в Notepad++ и измените путь/whateverelement’ы заполнить:

Это может сэкономить кучу уродливых сценарий. Извините, если это’ов вне базы, но иногда простые решения могут быть пропущены.

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

Я написал директиву, чтобы решить эту проблему с AngularJS. Она доступна здесь — ngReusableSvg.

Он заменяет SVG элемента после его’ы были оказаны, и помещает его в див элемент, делая его экране легко меняются. Это позволяет, используя один и тот же файл SVG в разных местах, используя различные размеры/цвета.

Использование очень простое:

После этого, вы можете легко:

Здесь’ы на версию для knockout.js на основе принятого ответа:

Важно: она действительно требуют jQuery и тоже за замену, но я думал, что это может быть полезно для некоторых.

Затем привязать данные просто применить =»и svgConvert: правда» в своей тега img.

Это решение полностью заменяет тег ИМГ с SVG и никаких дополнительных Привязок не будет соблюдена.

Здесь’ы без рамки код, только чистом JavaScript :

Есть библиотека с открытым исходным кодом под названием SVGInject, который использует атрибута onload , чтобы вызвать инъекции. Вы можете найти проект на GitHub в https://github.com/iconfu/svg-inject

Вот минимальный пример, используя SVGInject:

После того, как изображение загружено на события onload list-decimal list-inside mb-6 ml-4″>

Свгс могут быть скрыты до инъекций закончила. Это важно, если стиль уже применен во время нагрузки, которая бы в противном случае привести к кратковременному то «не применять стили флэш-контент и».

В ` элементы впрыснуть автоматически themselved. Если вы добавляете динамически Свгс, вы Дон’т придется беспокоиться о том, чтобы позвонить еще раз, функция впрыска.

Случайная строка добавляется для каждого идентификатора в SVG, чтобы избежать иметь тот же ID несколько раз в документе, если СВГ вводят более чем один раз.

SVGInject это обычный JavaScript и работает во всех браузерах, которые поддерживают СВГ.

Changing SVG icon color and size via CSS? #235

Is it possible to change an icon’s color and size via CSS?

Currently, the svg icons I generated have an inline width / height declaration, something like:

as well as a color specification, e.g. fill=»000″ .

I tried to remove color and width/height information from the svg-files and then tried to apply different CSS styles, e.g.:

However, this is not working.

Any idea how to achieve different sizes and colors?

The text was updated successfully, but these errors were encountered:

jefflembeck commented Mar 2, 2015

@4DiGITS — yeah, the icon needs to be styled on the svg itself in the case of an embedded svg instead of the wrapping div

scottjehl commented Mar 2, 2015

So, this depends a bit on the svg markup too, fwiw.

CSS fill will cascade from HTML elements into child SVG shapes that don’t have a fill specified via their svg fill attribute.

Here’s a red CSS fill on a element parent:

Here’s a blue CSS fill on a element parent:

So basically, if you want to style a path fill with css, I think you just need to skip the inline fill attribute.

Создаём и используем символьный SVG-спрайт

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

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

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

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

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

Если использовать SVG-иконку таким способом, можно будет задать цвет иконки через CSS, и получится сделать плавное изменение цвета при наведении. Но если придется использовать эту же иконку в другом месте, то это будет дополнительная нагрузка на браузер, так как иконка будет отрисовываться заново при каждом использовании

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

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

Вторая часть — код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

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

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Похожие публикации:

1. Как оптимизировать css код
2. Как отключить горизонтальную прокрутку css
3. Что выбрать arduino или raspberry
4. Что лучше css v34 или css v91

Не могу изменить цвет у svg

Даже когда изображение в формате base64 добавлено инлайн, его можно покрасить только фильтрами.

Ниже пример с работой SVG фильтров

.R1:hover < filter:url(#RedFilter); >.G1:hover < filter:url(#GreenFilter); >.B1:hover

Пример покраски CSS фильтрами

.R1:hover

Отслеживать
ответ дан 7 июл 2022 в 19:51
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака

• css
• svg

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.