Как изменить цвет svg через css

Цвет SVG-изображения можно изменить двумя путями:

  1. Изменение цвета заливки с помощью атрибута fill. Для этого нужно указать значение свойства fill в CSS для нужных элементов SVG:
svg {
  fill: #FF0000;
}

Значение #FF0000 соответствует красному цвету.

  1. Изменение цвета заливки и/или обводки с помощью CSS-свойств stroke и stroke-width. Для смены цвета обводки нужно указать значение свойства stroke:
svg {
  stroke: #00FF00;
  stroke-width: 2;
}

Значение #00FF00 соответствует зеленому цвету, а значение stroke-width задает толщину обводки.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как изменить цвет svg через css

Наш специалист свяжется с вами в ближайшее время и уточнит детали