Einfluss auf Farbgebung mit CSS bei SVG-Icons

Ein Grund für SVG-Icons mag sein, dass sie flexibler sind als Pixelbilder, beispielsweise weil sie sich umfärben lassen und ohne Verluste skalierbar sind. Der Umgang mit SVG ist allerdings eigen, und man muss mithin etwas tricksen, um die Vorzüge von SVG für sich zu nutzen. In diesem Artikel beschränke ich mich ausschließlich auf einfarbige Icons.

Einbinden wie ein Bild

Um ein SVG-Bild wie ein PNG oder JPG hochzuladen und in einen Beitrag einzufügen, muss WordPress erstmal mit Hilfe eines Plugin das SVG-Unterstützung aktiviert, darauf vorbereitet werden. Standardmäßig gehören SVG-Dateien zu jenen, die aus Sicherheitsgründen nicht hochgeladen werden können.

Wird eine SVG-Datei wie ein herkömmliches Bild hochgeladen und eingefügt, ist sie zwar via CSS skalierbar.

.icon img.big {
	width:120px;
	height:auto;
}

Die Farbe allerdings bleibt wie in der Datei festgelegt. Ein Bild ist eben ein Bild – oder?

Mit den richtigen Filtern

/*
 * funktioniert nicht in IE, Edge bringt ein anderes Farbergebnis
 */
img.colorthis{
    -webkit-filter: invert(.5)  sepia(1) saturate(5) hue-rotate(55deg);
    filter: invert(.5)  sepia(1) saturate(5)  hue-rotate(55deg);
}

kann aus einem schwarzen Icon zum Beispiel das werden:

Der Farbton kann sich allerdings von Browser zu Browser unterscheiden, sofern die Filter überhaupt unterstützt werden (aktuelle Versionen gängiger Browser und Edge setzen die Filter um, Internet-Explorer nicht).

SVG-Bilder können wie PNG oder JPG-Bilder als Hintergrundbild definiert sein.

.bgicon {
	position:relative;
	padding-left:48px;
	margin: 20px 0;
	min-height:42px;
}

.bgicon::before {
	position:absolute;
	content:"";
	left:0;
	top:0;
	width:42px;
	height:42px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;	
}

.bgicon.home::before {
	background-image:url("icon.svg");
}

Die Farbe des Icons ist jene, mit der es gespeichert wurde, in diesem Fall schwarz.

/*
 * funktioniert nicht in IE und Edge
 */
.mask::before {
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 100% 100%;	
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100% 100%;
}

.mask.pin::before {
	background-color:orange;
	-webkit-mask-image:url("icon.svg");
	mask-image:url("icon.svg");
}

Die wahre Kunst SVG zu bändigen liegt jedoch in der direkten Einbindung via CSS. Kein Link zu einem Bild, kein Einfügen, sondern direkte Umsetzung des XML-Codes einer SVG-Datei. Damit stehen einem vielfältige Wege zur Verfügung, SVG-Icons dynamisch nicht nur zu integrieren, sondern auch mit passenden Farben zu versehen.

/*
 * funktioniert nicht in IE und Edge
 * Die Anführungszeichen müssen "getauscht" werden
 */
.bgicon.camera::before {
	background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 16 16"><path fill="red" d="M4.75 9.5c0 1.795 1.455 3.25 3.25 3.25s3.25-1.455 3.25-3.25-1.455-3.25-3.25-3.25-3.25 1.455-3.25 3.25zM15 4h-3.5c-0.25-1-0.5-2-1.5-2h-4c-1 0-1.25 1-1.5 2h-3.5c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1v-9c0-0.55-0.45-1-1-1zM8 13.938c-2.451 0-4.438-1.987-4.438-4.438s1.987-4.438 4.438-4.438c2.451 0 4.438 1.987 4.438 4.438s-1.987 4.438-4.438 4.438zM15 7h-2v-1h2v1z"></path></svg>');
}

Auch wenn vielfach als Beispiel gezeigt, wer den Crossbrowsertest macht, wird das rote Camera-Icon nicht überall sehen.

/*
 * funktionert nicht in IE, 
 * die Zeichen < und > müssen dafür durch %3C und %3E ersetzt werden
 * funktionert nicht in Firefox, wenn die Farbangabe ein Hexcode ist, hier muss # durch %23 ersetzt werden
 */
.bgicon.paint::before {
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16' viewBox='0 0 16 16'><path fill='navy' d='M16 9v-6h-3v-1c0-0.55-0.45-1-1-1h-11c-0.55 0-1 0.45-1 1v3c0 0.55 0.45 1 1 1h11c0.55 0 1-0.45 1-1v-1h2v4h-9v2h-0.5c-0.276 0-0.5 0.224-0.5 0.5v5c0 0.276 0.224 0.5 0.5 0.5h2c0.276 0 0.5-0.224 0.5-0.5v-5c0-0.276-0.224-0.5-0.5-0.5h-0.5v-1h9zM12 3h-11v-1h11v1z'></path></svg>");
}

Ist die Farbe (im SVG-Unterelement path, property fill) ein Hexwert mit einem #, erhält man im aktuellen Firefox folgende Fehler:

XML-Verarbeitungsfehler: Ungeschlossenes Token
Adresse: data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'><path%20style='fill:#cc0000'%20d='M8.5%200l-1.5%201.5%201.5%201.5-3.5%204h-3.5l2.75%202.75-4.25%205.635v0.615h0.615l5.635-4.25%202.75%202.75v-3.5l4-3.5%201.5%201.5%201.5-1.5-7.5-7.5zM7%208.5l-1-1%203.5-3.5%201%201-3.5%203.5z'></path></svg>
Zeile Nr. 1, Spalte 61:

Für ein crossbrowserfähiges Ergebnis

• was in der Image-URL-Klammer steht, wird mit doppelten Anführungszeichen umschlossen
• sämtliche Properties innerhalb des SVG-Strings werden hingegen mit einfachen Anführungszeichen umschlossen (IE)
• < und > ersetzen durch %3C und %3E (IE)
• # ersetzen durch %23 (Firefox)

/*
 * funktionert in IE, Edge, Opera, Chrome, Firefox
 */
.bgicon.compatible::before {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='16' height='16' viewBox='0 0 16 16'%3E %3Cpath fill='%230000cc' d='M16 9v-6h-3v-1c0-0.55-0.45-1-1-1h-11c-0.55 0-1 0.45-1 1v3c0 0.55 0.45 1 1 1h11c0.55 0 1-0.45 1-1v-1h2v4h-9v2h-0.5c-0.276 0-0.5 0.224-0.5 0.5v5c0 0.276 0.224 0.5 0.5 0.5h2c0.276 0 0.5-0.224 0.5-0.5v-5c0-0.276-0.224-0.5-0.5-0.5h-0.5v-1h9zM12 3h-11v-1h11v1z'%3E%3C/path%3E %3C/svg%3E ");
}

Am einfachsten erhält man die codierte Variante durch rawurlencode( $svgimagecode); (ohne XML-Tag). Dabei werden dann auch Leerzeichen codiert (%20).