Ihr wisst ja dass die Bilder im SVG Format sehr genial sind und irgendwann in der Zukunft wohl immer mehr eingesetzt werden können. Dummerweise hat WordPress den Einsetz von SVG Dateien gesperrt. Jetzt könnte man natürlich ein Plugin installieren, mit dem man wieder SVG Bilder in die Mediathek hochladen könnte, oder man verwendet den folgenden Code.

Gebt diesen Code einfach in eure Functions.php Datei ein und danach könnt ihr sofort .svg Dateien hochladen und verwenden.

Ihr könnt ganz unten dann ein Beispiel sehen wie stark der Unterschied ist zwischen einem JPG und eine SVG Bild. Das gleiche Bild ist als JPG fast 20% grösser als das SVG – man kann also damit viel bessere Qualität erzielen bei kleiner Grösse. Und so nebenbei wird auch ein SVG bei hochauflösende Bildschirme viel klarer angezeigt als einfache JPG

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* SVG Aktivieren */
 
function chefblogger_svgimg_types($file_types){
   $new_filetypes = array();
   $new_filetypes['svg'] = 'image/svg+xml';
   $file_types = array_merge($file_types, $new_filetypes );
   return $file_types;
}
add_action('upload_mimes', 'chefblogger_svgimg_types');
 
function chefblogger_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];
                //Media Gallerie
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );
                //Media Einzelbild
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'chefblogger_svg_media_thumbnails', 10, 3);

JPG

Grösse: 93 kB

SVG

Grösse: 74 kB