Webdesign

Warum ich SVG-Symbole Icon-Fonts vorziehe

two types of wine 1761613 1920

Unter HTML5 begannen mit CSS3 und @font-face Symbolschriften das Web zu erobern. Icon Fonts erhält man als Webfontkit in mehreren Formaten: True Type: .ttf, Web Open Font Format: .woff2, Web Open Font Format (ältere Version): .woff, Embedded OpenType: .eot – und Scalable Vector Graphics: .svg.

Verlustfrei skalierbare Schriftsymbole als Icons zu verwenden ist eine pixelfreie, glatte Lösung. Farben, Größe und Positionierung sind nur noch eine Frage von CSS. Allerdings beschleunigt das Einbetten einer zusätzlichen Schrift und mehr oder weniger großen CSS-Datei (die alle Symbole berücksichtigt) eine Website nicht grade. An Stellen, an denen Icons eingesetzt werden, ist außerdem eine Anpassung des Markups erforderlich.

no-cors-enabledDaneben verweigern manche Browser die Darstellung von Fonts aus Drittanbieterquellen, wenn kein Cross-Origin Resource Sharing vereinbart wurde. Dieser Screenshot aus Firefox stammt von einer Website, die ansonsten aufwendig und professionell gestaltet, aber offenbar nicht mit betroffenen Browsern getestet worden war.

Social Icons beliebig skalierbar, in jeder gewünschten Farbe und immer in schöner Qualität, das kann einem ein Iconfont geben. Allerdings – SVG direkt zu verwenden erfüllt das auch, ganz ohne @font-face. Da SVG XML-kodiert ist, können die benötigten Symbole genauso gut direkter Bestandteil des Markups sein oder aus den Daten zu beziehen.

SVG-Pfadinformationen können beispielsweise in einem Array (hier beispielsweise die Symbole von Socialmediaplattformen) gespeichert werden, etwa in der Form:

array(
 'facebook' => array(
        'label' =>  'Facebook',
        'pathes' => array(
            'M9.5 3h2.5v-3h-2.5c-1.93 0-3.5 1.57-3.5 3.5v1.5h-2v3h2v8h3v-8h2.5l0.5-3h-3v-1.5c0-0.271 0.229-0.5 0.5-0.5z'
        ),
        'rgb' => array(59, 89, 152),
    ),
...);

Anwendung

foreach ( $socialproviders as $socialprovider => $prop ) {...
$svg = '';
 foreach ($prop['pathes'] as $path) { 
 $svg .= sprintf('<path class="iconpath" d="%1$s"></path>', esc_attr($path));
 }
 $icon = sprintf('<svg class="socialicon %1$s_icon" width="16" height="16" viewBox="0 0 16 16">%2$s</svg>', esc_attr($socialprovider), $svg );
...
}

Entsprechend definierte Customizer-Options legen Farbe und Größe der Icons passend zum restlichen Design fest.

.socialicon { 
fill:'.esc_attr($iconcolor).';
height:'.absint($icon_size).'px;
width:'.absint($icon_size).'px;
}

Das ist nur einer von mehreren Wegen, SVG-Icons zu verwenden. Man benötigt dazu keine Schrifteinbindung, keine Verlinkung auf Bilddateien die man vorher hochladen muss (was man in WordPress mit einer SVG erstmal gar nicht kann), und damit keinen zusätzlichen http-Request.

Gängige Browser unterstützen die Anwendung von SVG.

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.