Je veux utiliser cette technique http://css-tricks.com/svg-fallbacks/ et changer la couleur svg mais jusqu'à présent je n'ai pas pu le faire. Je mets ça dans le css mais mon image est toujours noire, quoi qu'il arrive. Mon code:

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

Vous ne pouvez pas changer la couleur d'une image de cette façon. Si vous chargez SVG en tant qu'image, vous ne pouvez pas changer la façon dont il est affiché en utilisant CSS ou Javascript dans le navigateur.

Si vous voulez changer votre image SVG, vous devez le charger en utilisant <object>, <iframe>ou à l' aide en <svg>ligne.

Si vous souhaitez utiliser les techniques de la page, vous avez besoin de la bibliothèque Modernizr, où vous pouvez vérifier la prise en charge SVG et afficher conditionnellement ou non une image de secours. Vous pouvez ensuite intégrer votre SVG et appliquer les styles dont vous avez besoin.

Voir:

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

Vous pouvez incorporer votre SVG, étiqueter votre image de secours avec un nom de classe ( 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" />

Et en CSS, utilisez la no-svgclasse de Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) pour vérifier le support SVG. S'il n'y a pas de support SVG, le bloc SVG sera ignoré et l'image sera affichée, sinon l'image sera supprimée de l'arborescence DOM ( display: none):

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

Ensuite, vous pouvez changer la couleur de votre élément en ligne:

#time-3-icon {
   fill: green;
}

Réponse 2020

Le filtre CSS fonctionne sur tous les navigateurs actuels

Pour changer la couleur de n'importe quel SVG

1. Ajoutez l'image SVG à l'aide d'une <img>balise.

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

2. Pour filtrer sur une couleur spécifique, utilisez le codepen suivant (cliquez ici pour ouvrir le codepen) pour convertir un code de couleur hexadécimal en filtre CSS:

Par exemple, la sortie pour #00EE00est

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

3. Ajoutez le CSS filterdans cette classe.

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

Pour changer la couleur d'un SVG, vous pouvez directement changer le code svg en ouvrant le fichier svg dans n'importe quel éditeur de texte . Le code peut ressembler au code ci-dessous

<?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>

Vous pouvez observer qu'il ya des balises XML comme chemin, cercle, polygone etc . Là, vous pouvez ajouter votre propre couleur à l'aide de l' attribut de style . Regardez l'exemple ci-dessous

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

Ajoutez l'attribut style à toutes les balises afin d'obtenir votre SVG de la couleur souhaitée

Ajout d'une page de test - pour colorer SVG via les paramètres de filtre:

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

Téléchargez et coloriez votre SVG - Jsfiddle

A pris l'idée de: https://blog.union.io/code/2017/08/10/img-svg-fill/

Uniquement SVG avec des informations de chemin . vous ne pouvez pas faire cela à l'image .. comme chemin, vous pouvez changer les informations de trait et de remplissage et vous avez terminé. comme Illustrator

donc: via CSS, vous pouvez remplacer la fillvaleur du chemin

path { fill: orange; }

mais si vous voulez un moyen plus flexible comme vous voulez le changer avec un texte lorsque vous avez un effet de survol en cours. utilisez

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>

la manière la plus simple serait de créer une police à partir du SVG en utilisant un service comme https://icomoon.io/app/#/select ou autre. téléchargez votre SVG, cliquez sur "générer la police", incluez les fichiers de police et le CSS dans votre côté et utilisez-le et stylisez-le comme n'importe quel autre texte. Je l'utilise toujours comme ça car cela rend le style beaucoup plus facile.

EDIT: Comme mentionné dans l' article commenté par @ CodeMouse92, les polices d'icônes gâchent les lecteurs d'écran (et sont peut-être mauvaises pour le référencement). Alors, tenez-vous plutôt aux SVG.

Le masque SVG sur un élément de boîte avec une couleur d'arrière - plan entraînera:

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

_{Remarque - Les masques SVG ne sont pas pris en charge dans les navigateurs Internet Explorer}

Vous pouvez changer la coloration SVG avec css si vous utilisez des astuces. J'ai écrit un petit script pour ça.

• passer par une liste d'éléments qui ont une image svg
• charger le fichier svg au format xml
• récupérer uniquement la partie svg
• changer la couleur du chemin
• remplacer src par le svg modifié comme image en ligne

$('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')));
  });

});

le code ci-dessus peut ne pas fonctionner correctement, je l'ai implémenté pour les éléments avec une image d'arrière-plan svg qui fonctionne presque de la même manière. Mais de toute façon, vous devez modifier ce script pour l'adapter à votre cas. j'espère que cela a aidé.

Ciblez le chemin dans le svg:

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

Vous pouvez faire en ligne, comme:

<path fill="#ccc">

Ou

svg{
   path{
        fill: #ccc

Pour changer simplement la couleur du svg:

Allez dans le fichier svg et sous styles, mentionnez la couleur de remplissage.

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

Si vous voulez faire ceci à un svg en ligne qui est, par exemple, une image d'arrière-plan dans votre 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");

bien sûr, remplacez le ... par votre code d'image en ligne

Par exemple, dans votre HTML:

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

Utilisez jQuery:

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

En fait, il existe une solution beaucoup plus flexible à ce problème: l'écriture d'un composant Web qui corrigera SVG en tant que texte lors de l'exécution. Également publié dans gist avec un lien vers JSFiddle

👍 filtre: inverti (42%) sépia (93%) saturé (1352%) teinte-rotation (87deg) luminosité (119%) contraste (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>

manière la plus courte compatible avec Bootstrap, pas de 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;
}

et l'utiliser comme:

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

Ouvrez votre image à l'aide d'un navigateur, cliquez avec le bouton droit sur l'image, cliquez sur Afficher la source de la page et vous verrez la balise svg de l'image. Faites face et collez dans votre html, puis changez le remplissage à la couleur de votre choix

Ajoutez simplement fill: "desireColor" dans la balise svg de l'image: exemple:

<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>