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

.change-my-color {
  fill: green;
}

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

Ви не можете змінити колір зображення таким чином. Якщо ви завантажуєте SVG як зображення, ви не можете змінити спосіб його відображення за допомогою CSS або Javascript у браузері.

Якщо ви хочете змінити SVG зображення, ви повинні завантажити його , використовуючи <object>, <iframe>або використовуючи <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);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path 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"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

Ви можете вбудувати свій SVG, позначити своє запасне зображення за назвою класу ( my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image 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;
}

Відповідь 2020 року

CSS Filter працює у всіх поточних браузерах

Щоб змінити будь-який колір SVG

1. Додайте зображення SVG за допомогою <img>тегу.

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

2. Щоб відфільтрувати певний колір, використовуйте наступний Codepen (натисніть тут, щоб відкрити codepen), щоб перетворити шістнадцятковий кольоровий код у CSS-фільтр:

Наприклад, вихід для #00EE00є

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

3. Додайте CSS filterдо цього класу.

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

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

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg 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">
    <g>
        <path 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*/
    </g>
    </svg>

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

<path 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"/>

Додайте атрибут стилю до всіх тегів, щоб ви могли отримати свій SVG потрібного кольору

Додано тестову сторінку - для кольорового SVG за допомогою параметрів фільтра:

EG filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Завантажте та розфарбуйте свій SVG - Jsfiddle

Ідею взяли з: https://blog.union.io/code/2017/08/10/10/img-svg-fill/

Тільки SVG з інформацією про шлях . Ви не можете зробити це для зображення .. як шлях ви можете змінити обведення та заповнити інформацію, і ви закінчили. як Illustrator

так: за допомогою 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;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <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">
<path 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"></path>
</svg>
</div>

найпростішим способом було б створити шрифт із SVG за допомогою такої служби, як https://icomoon.io/app/#/select чи іншого. завантажте свій SVG, натисніть «створити шрифт», включіть файли шрифтів та css у свій бік та просто використовуйте та стилюйте його, як і будь-який інший текст. Я завжди використовую його так, тому що це значно спрощує стилізацію.

EDIT: Як згадується у статті, коментованій @ CodeMouse92, шрифти значків псують читачі екранів (і, можливо, погані для SEO). Тож скоріше дотримуйтесь СВГ.

SVG маска на елементі коробки з фоновим кольором призведе до:

.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;  }
}

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

_{Примітка - SVG маска не підтримується в Internet Explorer браузерів}

Ви можете змінити 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, яке працює майже подібним до цього. Але все одно, ви повинні змінити цей сценарій, щоб відповідати вашому випадку. сподіваюся, що це допомогло.

Націліть шлях у SVG:

<svg>
   <path>....
</svg>

Ви можете робити вбудований, наприклад:

<path fill="#ccc">

Або

svg{
   path{
        fill: #ccc

Щоб просто змінити колір svg:

Перейдіть до файлу svg та під стилями, відзначте колір заливки.

<style>.cls-1{fill:#FFFFFF;}</style>

Якщо ви хочете зробити це для вбудованого 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:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Використовуйте jQuery:

$("#struct1").css("fill","<desired colour>");

Насправді, є досить гнучкіше рішення цієї проблеми: написання веб-компонента, який буде виправляти SVG як текст під час виконання. Також опубліковано в gist із посиланням на JSFiddle

👍 фільтр: інвертований (42%) сепія (93%) насичення (1352%) відтінок-обертання (87deg) яскравість (119%) контраст (119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (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>`;

    })();

  </script>
</body>

</html>

найкоротший спосіб сумісного завантаження, без JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

і використовувати його так:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

Відкрийте своє зображення за допомогою браузера, клацніть правою кнопкою миші на зображенні, натисніть на джерело сторінки перегляду, і ви побачите тег svg зображення. Зробіть копію та вставте у свій HTML, а потім змініть заливку на обраний вами колір

Просто додайте fill: "desireColor" у тег svg зображення: example:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>