Modifier la couleur de remplissage SVG lorsqu'elle est utilisée comme image de fond

En plaçant la sortie SVG directement en ligne avec le code de la page, je peux simplement modifier les couleurs de remplissage avec CSS comme ceci:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

Cela fonctionne très bien, mais je cherche un moyen de modifier l'attribut "fill" d'un SVG lorsqu'il est servi en tant qu'IMAGE DE FOND.

html {      
    background-image: url(../img/bg.svg);
}

Comment puis-je changer les couleurs maintenant? Est-ce même possible?

Pour référence, voici le contenu de mon fichier SVG externe:

<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

Une façon de le faire est de servir votre svg à partir d'un mécanisme côté serveur. Créez simplement un côté serveur de ressources qui génère votre svg en fonction des paramètres GET, et vous le servez sur une certaine URL.

Ensuite, vous utilisez simplement cette URL dans votre CSS.

Parce qu'en tant qu'image de fond, il ne fait pas partie du DOM et vous ne pouvez pas le manipuler. Une autre possibilité serait de l'utiliser régulièrement, de l'intégrer dans une page d'une manière normale, mais de la positionner absolument, de la rendre pleine largeur et hauteur d'une page, puis d'utiliser la propriété z-index css pour la mettre derrière tous les autres éléments DOM sur une page.

J'avais besoin de quelque chose de similaire et je voulais rester avec CSS. Voici les mixins LESS et SCSS ainsi que les CSS simples qui peuvent vous aider. Malheureusement, la prise en charge du navigateur est un peu laxiste. Voir ci-dessous pour plus de détails sur la prise en charge du navigateur.

MOINS mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

MOINS d'utilisation:

.element-color(#fff);

Mélange SCSS:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

Utilisation de SCSS:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Voici plus d'informations sur l'intégration du code SVG complet dans votre fichier CSS. Il a également mentionné la compatibilité du navigateur qui est un peu trop petite pour que cela soit une option viable.

Vous pouvez utiliser des masques CSS. Avec la propriété 'mask', vous créez un masque qui est appliqué à un élément.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Pour plus d'informations, voir cet excellent article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Une autre approche consiste à utiliser un masque. Vous modifiez ensuite la couleur d'arrière-plan de l'élément masqué. Cela a le même effet que de changer l'attribut fill du svg.

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

Vous trouverez un tutoriel complet ici: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (pas le mien). Il propose une variété d'approches (non limitées au masque).

C'est possible avec Sass! La seule chose que vous avez à faire est de coder en url votre code svg. Et cela est possible avec une fonction d'assistance dans Sass. J'ai fait un codepen pour cela. Regarde ça:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

article et démo de codeben

Téléchargez votre svg sous forme de texte.

Modifiez votre texte svg en utilisant javascript pour changer la couleur de peinture / trait / remplissage [s].

Ensuite, incorporez la chaîne svg modifiée en ligne dans votre CSS comme décrit ici .

Vous pouvez maintenant y parvenir du côté client comme ceci:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Jouez ici!

Vous pouvez stocker le SVG dans une variable. Ensuite, manipulez la chaîne SVG en fonction de vos besoins (c'est-à-dire, définissez la largeur, la hauteur, la couleur, etc.). Utilisez ensuite le résultat pour définir l'arrière-plan, par exemple

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

J'ai aussi fait une démo, http://sassmeister.com/gist/4cf0265c5d0143a9e734 .

Ce code fait quelques hypothèses sur le SVG, par exemple que <svg /> élément n'a pas de couleur de remplissage existante et qu'aucune propriété de largeur ou de hauteur n'est définie. Étant donné que l'entrée est codée en dur dans le document SCSS, il est assez facile d'appliquer ces contraintes.

Ne vous inquiétez pas de la duplication de code. gzip la compression rend la différence négligeable.

Pour cela, vous pouvez créer votre propre fonction SCSS. Ajout de ce qui suit à votre fichier config.rb.

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

Ensuite, vous pouvez l'utiliser dans votre CSS:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

Vous devrez modifier vos fichiers SVG et remplacer tous les attributs de remplissage du balisage par fill = "{color}"

Le chemin de l'icône est toujours relatif à votre paramètre images_dir dans le même fichier config.rb.

Semblable à certaines des autres solutions, mais c'est assez propre et garde vos fichiers SCSS bien rangés!

Dans certaines situations (très spécifiques), cela peut être réalisé en utilisant un filtre . Par exemple, vous pouvez changer une image SVG bleue en violet en faisant pivoter la teinte de 45 degrés à l'aide de filter: hue-rotate(45deg);. Le support du navigateur est minime mais c'est toujours une technique intéressante.

Démo

pour l'arrière-plan monochrome, vous pouvez utiliser un svg avec un masque, où la couleur d'arrière-plan doit être affichée

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

et que d'utiliser ce css

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

Utilisez le filtre sépia avec la rotation de la teinte, la luminosité et la saturation pour créer la couleur que nous voulons.

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

Tard dans le spectacle ici, MAIS, j'ai pu ajouter une couleur de remplissage au polygone SVG, si vous êtes en mesure de modifier directement le code SVG, donc par exemple le svg suivant s'affiche en rouge, au lieu du noir par défaut. Je n'ai cependant pas testé en dehors de Chrome:

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


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

C'est ma méthode préférée, mais la prise en charge de votre navigateur doit être très progressive. Avec la propriété mask, vous créez un masque qui est appliqué à un élément. Partout où le masque est opaque ou solide, l'image sous-jacente apparaît à travers. Lorsqu'elle est transparente, l'image sous-jacente est masquée ou masquée. La syntaxe d'une image de masque CSS est similaire à l'image d'arrière-plan. regardez le codepenmask

Beaucoup de FI, mais si votre SVG encodé pré base64 démarre:

<svg fill="#000000

Ensuite, la chaîne encodée en base64 démarre:

PHN2ZyBmaWxsPSIjMDAwMDAw

si la chaîne pré-encodée démarre:

<svg fill="#bfa76e

alors cela code pour:

PHN2ZyBmaWxsPSIjYmZhNzZl

Les deux chaînes codées commencent de la même manière:

PHN2ZyBmaWxsPSIj

La particularité de l'encodage base64 est que tous les 3 caractères d'entrée deviennent 4 caractères de sortie. Avec le SVG commençant comme ceci, la couleur de remplissage hexadécimale à 6 caractères commence exactement sur une «frontière» de bloc de codage. Par conséquent, vous pouvez facilement remplacer JS entre plusieurs navigateurs:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

Mais la réponse tnt-rox ci-dessus est la voie à suivre.