Как изменить цвет svg иконки?

@dima2113 · Регистрация: 08.03.2020

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="31" height="25" viewBox="0 0 31 25">
  <image id="logo" width="31" height="25" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAZCAYAAADJ9/UkAAACIUlEQVRIicWWMUscURSF725kEPzAjQiCRRIQK0kliEUKU5oUwSaQ1kZsQsA/ELC2ipWFrd0WWmybxoBgmqRKl6QLghDyVuKywXDhrLzovNk3IubCMnPvOeeeee/dWaYBfDKzx3b38blpZuP/wdhj3M1fK+mb2aKZ3c/4taX5pWs7U7coH7v0BdrABfAeaFQ9LrAsbg94oavny0N0DfV3bjsGpoGfAlYrGowBX8XbVG1TudfHKrSr4rnP9FVwXeApMJVosCXOF2BUtVHlXt9K6KbU1znrZYQm8EGEvRJ8HugLX7qCLanu+HyJdk+492+mtmau7AyBEeCj6rsJ7a5w541E9XhG5kqNI/K1MwQ2VPsBTCR0E8Kdt2GJGRlm/s8ZAo+ArvJXVWLHxetKd21Gch4gPsND3XcytR3xD1MzktNkcIaXK8nUxTuVnJFhTfwMz9XgqKb2SLrz1Ix4lI+9mYUQTs1sR+kC8CTT2HkLSnfU52YBnGgVJ5nm2fzkyqNY0e0k8G6IseOTSlequNkB7Gs1f4CZhPGMcOft5/TOWbnHSzM7Ez/1ynWEn4l/O+YhhN9mtqZ0FngT48pnla6Jf7sBHEevUEvGreiVPK5jmLvtg3imL5HCzA5UO1DeF54d9+qQe71etyjcx56a2YOiKFrR+b4NIWT9BQ+i8pMpFcA3N4/g7yGEh3X71N32QTw3swslfvX87gLY1pBt38jVzP4C6ti8UAIE7mwAAAAASUVORK5CYII="/>
</svg>

Не в графическом редакторе, а в коде

@Iverycool · 10.07.2020, 01:51

Сообщение от dima2113

Как изменить цвет svg иконки?

В вашем случае никак, так как это по сути не svg иконка, а обычное png изображение находящееся в svg контейнере. Поэтому изменить цвет вашей картинки вы можете, только в графическом редакторе.
В "обычном" svg это задаётся атрибутом stroke.

@Kerry_Jr · 10.07.2020, 08:42

Сообщение от Iverycool

В "обычном" svg это задаётся атрибутом stroke.

Смотря цвет чего нужно изменить: stroke - граница, fill - заливка.

Добавлено через 24 минуты
dima2113,

HTML5
1
2
3
4
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="31px" height="25px">
  <path id="logo" d="M2 1h27l-13.5 23zm6.75 11.5l6.75-11.5l6.75 11.5" stroke="#000" stroke-width="2.5" fill="none"/>
</svg>

В вашем случае, как написал Iverycool, цвет изменяется через атрибут stroke.

@dima2113 · 10.07.2020, 12:44 **[ТС]**

Нарисовал ее в илюстарторе сам) Раз никак

Добавлено через 19 минут
Теперь svg код выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 149.3 125.9" style="enable-background:new 0 0 149.3 125.9;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000;stroke-width:10;stroke-miterlimit:10;}
</style>
<title>Безымянный-1</title>
<polygon class="st0" points="74.6,114.9 139.1,8.6 10.2,8.6 "/>
<polyline class="st0" points="104,61.8 74.6,16.8 45.3,61.8 "/>
</svg>

Как мне изменить цвет теперь в css (именно через тег img)? Код html:

HTML5
1
2
3
<div class="header__logo">
    <img src="assets/images/logo.svg" alt="#">
</div>

.header__logo {
stroke: #fff;
}

Не работает!

@Iverycool · 10.07.2020, 12:45

Сообщение от dima2113

Нарисовал ее в илюстарторе сам)

Молодцы, но Kerry_Jr дал вам идентичный векторный вариант, можно было использовать его

Добавлено через 59 секунд

Сообщение от dima2113

Как мне изменить цвет теперь в css (именно через тег img)? Код html:

Никак, stroke атрибут может быть только у самих элементов svg.

@dima2113 · 10.07.2020, 12:50 **[ТС]**

Тема закрыта, всем спасибо, не знал что можна прямо в код svg вставлять!

@Kerry_Jr · 10.07.2020, 13:17

Сообщение от dima2113

не знал что можна прямо в код svg вставлять

А теперь самое интересное: если вставлять напрямую в HTML, то убрав из svg stroke, его можно использоватьв css.

HTML5
1
2
3
4
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="31px" height="25px">
  <path class="logo-icon" d="M2 1h27l-13.5 23zm6.75 11.5l6.75-11.5l6.75 11.5" stroke-width="2.5" fill="none"/>
</svg>

CSS
1
2
3
.logo-icon {
  stroke: #0f0; /* например */
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@dima2113 1 / 1 / 0 Регистрация: 08.03.2020 Сообщений: 42
	10.07.2020, 12:50 [ТС]
	Тема закрыта, всем спасибо, не знал что можна прямо в код svg вставлять! 0

Как изменить цвет svg иконки?

Решение