SVG-Avatar-Icon-Generator mittels PHP

Entwickelt ihr eine Community, beispielsweise ein Forum oder ein soziales Netzwerk, so lebt dieses von der Personalisierung. Da Namen meistens schlechter in Erinnerung bleiben als Bilder, hat es sich durchgesetzt, neben dem Namen ein Profilbild des Benutzer anzuzeigen.

Aber was macht man mit Usern, die noch kein Profilbild hochgeladen haben?

In diesem Artikel zeige ich euch eine simple Methode, wie sich personalisierte Avatar-Icons mittels PHP generieren lassen. Das Ergebnis kann dann so aussehen:

Vom gegeben Namen werden die Initialen extrahiert und es wird basierend auf dem Namen eine zufällige Farbe ausgewählt. Das Ergebnis kann als Kreis neben dem Namen angezeigt werden.

SVG-Bildformat

Für die Generierung der Benutzer-Avatare / Benutzer-Icons, ist das SVG-Bildformat ideal geeignet. Beim SVG-Format wird das Bild als XML Datei definiert. Dies macht die automatische Erstellung und Anpassung mittels PHP besonders einfach.

Wir verwenden dabei folgendes einfache SVG Grafik:

Dieses erstellt eine rechteckige Box mit der Hintergrundfarbe #DC143C. In dieser Box, zentrieren wir den Text PS. Für diesen definieren wir die Textfarbe #000000.

Speichern wird dieses Bild als icon.svg-Datei und rufen es im Browser auf, so sieht das Ergebnis wie folgt aus:

In eine HTML-Datei können wir die Datei wie folgt einbinden:

Durch border-radius: 100% wird das Icon nun als Kreis dargestellt, sofern dies gewünscht ist.

Der Vorteil durch das SVG-Format ist, dass es sich dabei um eine Vektorgrafik handelt: Dieses lässt sich ohne Qualitätsverlust vergrößern oder verkleinern:

Um in einer Benutzer-Lobby, z.B. für ein Pokerspiel für euer Online-Casino (für einen Vergleich siehe Casinoratgeber.de) findet, die Namen korrekt zentriert neben dem Icon darzustellen, könnt ihr den CSS-Code vertical-align: middle verwenden:

SVG-Icons per PHP generieren lassen

Um nun die Icons für jeden Benutzer zu erhalten, passen wir das obige Script an und erstellen die svg-avatar.php Datei:

<?php
//Output ist eine svg-Grafik
header('Content-Type: image/svg+xml');

//Erhalte als GET-Parameter den Namen des Users.
//Extrahiere die Initialen, sprich, den ersten Buchstaben vom 1. und vom letzten Wort des Namens
$name = strtoupper($_GET['name']);
$words = explode(" ", $name);
$initials = $words[0][0];
if(count($words) > 1) {
    $initials .= $words[count($words)-1][0];
}


//Mögliche Hintergrundfarben für unsere Icons 
$bg_colors = ['#F0F8FF', '#FAEBD7', '#00FFFF', '#7FFFD4', '#F0FFFF', '#F5F5DC', '#FFE4C4', '#FFEBCD', '#0000FF', '#8A2BE2', '#A52A2A', '#DEB887', '#5F9EA0', '#7FFF00', '#D2691E', '#FF7F50', '#6495ED', '#DC143C', '#696969'];

//Mappe $name auf eine zufällige Zahl zwischen 0 und 65.535. Der gleiche $name 
//wird stests auf die gleiche Zahl gemappt
$user_id = hexdec(substr(md5($name),0,4));

//Wähle basierend auf der $user_id eine Hintergrundfarbe aus
$bg_color = $bg_colors[$user_id % count($bg_colors)];
?>
<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="48" height="48" style="fill: <?php echo $bg_color; ?>"></rect>
    <text x="50%" y="50%" dy=".1em" fill="#000000" text-anchor="middle" dominant-baseline="middle" style="font-family: 'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif; font-size: 24; line-height: 1"><?php echo htmlentities($initials); ?></text>
</svg>

Ein Beispiel-HTML-Code zur Anzeige verschiedener Icons ist der folgende:

Initialen Generieren

An unser PHP-Script übergeben wir per GET-Parameter den Names des Benutzers. Daraus extrahieren wir die Initialen:

Mittels strtoupper stellen wir sicher, dass ein Name nur aus Großbuchstaben besteht. Mittels explode splitten wir die Eingabe in einzelne Wörter auf.

Den ersten Buchstaben vom ersten Wort erhalten wir mittels: $initials = $words[0][0];

Sollte der Name mehr als nur aus einem Wort bestehen, wird vom letzten Wort ebenfalls der erste Buchstabe verwendet: $initials .= $words[count($words)-1][0];

Das ganze wird dann in der SVG-Grafik an der folgenden Stelle ausgegeben:

Hintergrundfarbe basierend auf dem Namen auswählen

Damit nicht sämtliche Icons identisch aussehen, wird basierend auf dem Namen eine zufällige Farbe ausgewählt. Damit die Farbe zwischen verschiedenen Aufrufen stehts identisch für einen Namen bleibt, nutzen wir einen kleinen Trick.

Mittels md5 wird der Name auf eine 32 stelligen Hexadezimal-String gemappt. Das mapping passiert dabei "zufällig", d.h., ein leicht anderer Name generiert einen komplett anderen md5-Hash.

Da wir keine 2^128 Farben haben, nehmen wir von diesem String nur die ersten 4 Stellen, was uns eine Zahl zwischen 0 und 65535 gibt. Da diese Zahl noch als Hexadezimal-String dargestellt ist, nutzen wir die Funktion hexdec um daraus eine Integer-Zahl zu generieren.

Damit können wir nun eine Farbe aus unserem Array mit Hintergrundfarben auswählen:

Das %-Zeichen ist dabei der Modulo-Operator. Dieser teilt die $user_id durch die Anzahl der definierten Hintergrundfarben und gibt den Rest der Division zurück (Division mit Rest).

Durch diesen Code wird der gleiche Name stets auf die gleiche Hintergrundfarbe gemappt. Eine leicht andere Schreibweise führt aber zu einer anderen Hintergrundfarbe.