SVGs im Hintergrund: Paint it black – oder in jeder anderen beliebigen Farbe

Früher hat man gerne mit png oder Sprites für die Darstellung von Icons auf einer Webseite gearbeitet, dann kam FontAwesome mit einer großen Sammlung standarisierter Icons – und manchmal schafft man halt auch mit SVG.

Die Farbe von inline eingebundenen SVG lassen sich ja recht einfach anpassen:

Bsp. für ein SVG mit direkter Einbindung in HTML, das SVG stellt eine Lupe dar.

<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" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<path class="st0" d="M63.3,59.8L52.5,49l0.1-0.2c1.9-2.7,3-5.9,3-9.3c0-8.8-7.2-16-16-16s-16,7.2-16,16s7.2,16,16,16
	c3.3,0,6.5-1,9.3-3l0.2-0.1l10.8,10.8c1,1,2.5,1,3.5,0l0,0c0.5-0.5,0.7-1.1,0.7-1.7C64,60.9,63.7,60.2,63.3,59.8z M39.6,52.2
	c-7,0-12.6-5.7-12.6-12.6S32.6,27,39.6,27s12.6,5.7,12.6,12.6S46.5,52.2,39.6,52.2z" style="
    fill: #000000;
"></path>

</svg>

CSS

svg .st0 {
    fill: #FF0000;
}

Und schon ist die Lupe rot statt schwarz.

Möchte man SVG jedoch als Hintergrundgrafik nutzen und bei Hover die Farbe ändern, hat man keinen Zugriff auf das SVG an sich. Viele weichen an der Stelle auf die klassische Einbindung aus und erledigen dies durch Icons (einzelne oder Sprites). Das hat jedoch den Nachteil dass man jeden Status vorsehen muss.

Dabei kann man dies recht einfach mit LESS durch ein mixin erledigen. Denn LESS kann

.icon-fill(@src, @fill) {
   @data-uri: data-uri('image/svg+xml;charset=UTF-8', "@{src}");
   @replace-src: replace("@{data-uri}", "fill\%3D\%22\%23[\w]{3,6}\%22", escape('fill="@{fill}"'), "g");
   background-image:e(@replace-src);
}

LESS

a {
   &:before {
      .icon-fill("../images/icons/ICON.svg", "#FFFFFF");
   }
   &:hover {
      &:before {
         .icon-fill("../images/icons/ICON.svg", "#000000");
      }
   }
}

Übergeben wird nur der Pfad zum SVG sowie die gewünschte Farbe. In oben aufgeführten Fall ersetzt LESS bei der Generierung der späteren CSS Datei sämtliche Farbangaben im SVG, welche im „fill“-Attribut stehen, zunächst durch #FFFFFF (weiß). Für den :hover-Status werden diese dann durch #000000 (schwarz) ersetzt. Somit muss man nur eine einzige Grafik erstellen. Die gewünschte farbliche Anpassung kann dadurch extrem schnell ausgeführt werden. Man trägt die gewünschte Farbe ein, kompiliert mit gulp oder grunt, fertig.

Wenn die Farbangaben als CSS im SVG hinterlegt sind, funktioniert das oben aufgeführte Script nicht – hierfür muss es angepasst werden.

Gefunden bei zslabs.com

 


Beitrag veröffentlicht

in

,

von

Schlagwörter: