Die Vorteile von SVG-Grafiken im responsiven Webdesign

Laut dem Statistischen Bundesamt gehen mittlerweile 81% der Internetnutzer mit dem Handy oder Smartphone ins Internet. Nie war es also wichtiger, Webseiten so zu gestalten, dass sie auf jedem Gerät und jeder Bildschirmgröße optimal dargestellt werden. Gerade bei Grafiken ist die richtige Größe wichtig, bestimmt jedem sind schon mal verpixelte Bilder beim surfen aufgefallen. Eine gute Möglichkeit, um das zu vermeiden, ist die Verwendung von SVG-Grafiken.

Was sind SVG-Dateien?

SVG steht für Scalable Vector Graphics, also skalierbare Vektorgrafik. Der große Vorteil von Vektorgrafiken ist, dass sie aus Pfaden statt aus Pixeln bestehen und somit auch nicht „verpixeln“ können. Dadurch lassen sich die Grafiken ohne Qualitätsverlust auf jede beliebige Größe skalieren. SVG-Dateien lassen sich einfach mit Media Queries und CSS anpassen, sodass man Grafiken nicht mehr in verschiedenen Größen bereitstellen muss. Weitere Vorteile sind die mögliche Indexierung von Suchmaschinen, die kleine Dateigröße sowie die Unterstützung von ICC-Profilen.

Einbinden von SVG-Dateien ins WordPress

Obwohl SVG-Dateien mittlerweile von allen gängigen Browsern unterstützt werden, lassen sie sich (noch) nicht einfach so ins WordPress hochladen. Um das zu ermöglichen, muss man aber nur folgenden Code in die functions.php des aktiven Themes schreiben:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

function kb_ignore_upload_ext($checked, $file, $filename, $mimes){

 if(!$checked['type']){
 $wp_filetype = wp_check_filetype( $filename, $mimes );
 $ext = $wp_filetype['ext'];
 $type = $wp_filetype['type'];
 $proper_filename = $filename;

 if($type && 0 === strpos($type, 'image/') && $ext !== 'svg'){
 $ext = $type = false;
 }

 $checked = compact('ext','type','proper_filename');
 }

 return $checked;
}

add_filter('wp_check_filetype_and_ext', 'kb_ignore_upload_ext', 10, 4);

Sie haben Fragen dazu oder wünschen Beratung zu den Themen WordPress und responsive Webdesign? Als WordPress Agentur Berlin helfen wir Ihnen gerne weiter!