WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

DIVI: SVG Dateien verwenden

von | Feb 18, 2022 | Design | 0 Kommentare

Schlagwörter: SVG

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





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert