Changer la couleur svg

Pour changer la couleur D'un fichier SVG, vous pouvez modifier directement 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 y a de certaines balises XML comme le chemin, cercle, polygone, etc. Là, vous pouvez ajouter votre propre couleur à l'aide de 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 que vous puissiez obtenir votre SVG de votre couleur requise

Ajout d'une page de test-à la couleur SVG via les paramètres de filtre:

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

Téléchargez et colorez votre SVG-jsfiddle

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

Le moyen le plus simple serait de créer une police à partir du SVG en utilisant un service comme https://icomoon.io/app/#/select {[2] } ou tel. téléchargez votre SVG, cliquez sur "Générer la police", inclure les fichiers de police et css dans votre côté et il suffit d'utiliser et de style comme tout autre texte. Je l'utilise toujours comme ça parce que cela rend le style beaucoup plus facile.

EDIT: {[6] } comme mentionné dans l'article commenté par les polices d'icônes @ CodeMouse92 gâchent les lecteurs d'écran (et sont peut-être mauvais pour le référencement). Donc, plutôt bâton à la SVGs.

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

• passer par une liste d'éléments, qui ont une image svg
• charge le fichier svg au format xml
• récupère uniquement la partie svg
• changer la couleur du chemin
• remplacez 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, j'ai implémenté ceci pour les éléments avec une image d'arrière-plan svg qui fonctionne presque similaire à ce. Mais de toute façon, vous devez modifier ce script pour s'adapter à votre cas. espérons qu'il a aidé.

Seulement SVG avec des informations de chemin . vous ne pouvez pas faire ça à l'image.. comme le chemin, vous pouvez changer strock et de remplir les informations et vous avez terminé. comme Illustrator

Donc: via CSS, vous pouvez remplacer chemin fill valeur

path { fill: orange; }

Mais si vous voulez un moyen plus flexible que vous voulez le changer avec un texte lorsque vous avez un effet de survol en cours.. utiliser

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>

Pour simplement changer la couleur du svg:

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

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

Si vous voulez faire cela à 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, remplacer le ... avec votre code d'image en ligne