SVG in Wor­d­Press einbinden

Die­se An­lei­tung gilt auch für an­de­re Web-CMS.

War­um sind SVG-Da­tei­en, also ska­lier­ba­re Gra­fi­ken so interessant?
Weil die­se schnel­ler im In­ter­net trans­por­tiert wer­den und sich so­mit die Web­sei­te schnel­ler öff­nend. Au­ßer­dem ent­las­tet es die Datenbank.

Vor­sicht, nur selbst er­stell­te SVG-Da­tei­en hoch­la­den, den SVG-Da­tei­en wer­den be­wusst ge­sperrt um aus­führ­ba­ren Code, der in SVG-Da­tei­en ver­steckt wer­den kann, kei­nen Zu­gang zur Web­sei­te und so­mit auch zu den Web­sei­ten-Be­su­chern zu gewähren.

Hier am Bei­spiel des Farb­ra­des mit 256 Farben.
Colorwheel-small

150 kB die Original-SVG-Datei
 65 kB als komprimierte PNG-Datei
 17 kB als optimierte JPEG-Datei
 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei

Nun sieht es so aus, das JPEG die kleins­te Da­tei ist und nicht die ver­lust­freie kom­pri­mier­te SVGZ-Da­tei, aber JPEG hat die schlech­tes­te Qua­li­tät und SVG ist das Ori­gi­nal. Ge­ra­de für Zeich­nun­gen und Lo­gos sind Ar­te­fak­te wie in JPEG-Da­tei­en kei­ne Option!
Bei JPEG-Da­tei­en be­steht noch das Pro­blem die Ori­gi­nal-Da­tei auf­zu­he­ben, zu­sätz­lich zur ein­ge­setz­ten Da­tei mit den spe­zi­el­len Ab­mes­sun­gen für die je­wei­li­ge Webseite.

Um SVG-Da­tei­en und auch kom­pri­mier­te SVGZ-Da­tei­en in Wor­d­Press zu nut­zen, wer­den zwei Ar­beitschrit­te benötigt.

1. muss dem Apa­che-Ser­ver mit­ge­teilt wer­den das die­se Da­tei­for­ma­te, die zu Recht als ge­fähr­lich ein­ge­stuft wer­den, zu­läs­sig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird Wor­d­Press die­sel­be Mit­te­lung ge­macht über das ak­ti­vier­te Theme.

/wor­d­press-web­sei­te/wp-con­ten­t/­be­nutz­tes-the­me/
functions.php

/* MIME-Type svg und svgz zulassen */
    function custom_mtypes( $uwd ){
        $uwd['svg'] = 'image/svg+xml';
        $uwd['svgz'] = 'image/svg+xml';
        return $uwd;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

3. Im Hea­der der Sei­te muss ein even­tu­el­les “no-svg” ge­löscht oder aus­kom­men­tiert werden.