SVG-Dateien in die WordPress-Mediathek hochladen

Das Grafikformat SVG (Scalable Vector Graphics) erfreut sich dank hochauflösender Displays und einem zunehmend flexiblen, Performance optimiertem Webdesign größter Beliebtheit. SVG-Dateien lassen sich verlustfrei skalieren und haben eine verhältnismäßig geringe Dateigröße. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

MIME-Type für SVG hinzufügen

Fügt folgendes Snippet in die functions.php eures Themes ein. Damit wird der MIME-Type für SVG hinzugefügt. Anschließend kennt WordPress den Dateityp und verbietet den Upload nicht länger.

function kb_svg ( $svg_mime ){
	$svg_mime['svg'] = 'image/svg+xml';
	return $svg_mime;
}

add_filter( 'upload_mimes', 'kb_svg' );

Das Hinzufügen von bislang unbekannten Dateitypen ist keine Theme-Funktion. Das Snippet sollte daher eigtl. besser als seitenspezifisches Plugin verwendet werden.

SVG-Datei in der WordPress-Mediathek
SVG-Datei in der WordPress-Mediathek

Nicht jede SVG kann in WordPress importiert werden

Das oben gezeigte Code-Snippet prüft den Dateityp und gibt diesen für den Import frei. Wenn die SVG stark komprimiert wurde – z.B. durch einen automatischen Export von Adobe XD – dann kann es passieren, dass die Datei von WordPress nicht mehr erkannt wird. In diesem Fall muss geprüft werden, ob folgende Info in Zeile 1 der SVG vorhanden ist. Wenn das nicht der Fall ist, kann es helfen diese Zeile zu ergänzen.

<?xml version="1.0" encoding="iso-8859-1"?>

Bug im SVG-Upload ab WordPress 4.7.1

Ab der WordPress-Version 4.7.1 funktioniert der oben beschriebene Weg nicht mehr. Es ist davon auszugehen, dass es sich um einen Bug handelt. Aktuell ist uns folgendes Workaround aus dem WordPress-Forum bekannt. Fügt folgenden Code – zusätzlich zum oben beschriebenen Code – in die functions.php ein:

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);

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 22 Kommentare

  1. Alpika digital | Pearltrees
    schrieb am 02.03.2018 um 18:33 Uhr:

    […] Image Maps. SVG-Dateien in die WordPress-Mediathek hochladen. Das Grafikformat SVG (Scalable Vector Graphics) erfreut sich dank hochauflösender Displays und […]

    Antworten
  2. Steffen Schmitt
    schrieb am 10.04.2017 um 21:21 Uhr:

    Hallo Jonas,
    vielen Dank für Deinen Beitrag. Funktioniert im Frontend bei WP 4.7.3. mit dem Zusatz-Snippet einwandfrei.
    Um Seiten einfacher Layouten zu können, nutze ich das PlugIn Shortcodes Ultimate und versehe einfach über das CSS die Images mit Grössen in Prozenten, so werden die SVG’s perfekt angezeigt, egal bei welchem Gerät.
    Das die SVG’s nicht im Admin-Bereich angezeigt werden, stört mich nicht weiter, wenn ich die Seite weiter pflegen soll. Für den Kunden kann das allerdings etwas schwierig werden, dann würde ich wahrscheinlich png´s weiterhin verwenden.
    Viele Grüsse
    Steffen

    Antworten
  3. Stephan
    schrieb am 15.09.2016 um 12:15 Uhr:

    Kann man damit auch jedes andere verweigerte Format erlauben, wenn man im Code das svg durch die entsprechende Extension ersetzt? Oder gibt es Beschränkungen? image/svg+xml lässt eine Beschränkung auf xml-artige Bildformate vermuten.

    Antworten
    • Jonas Hellwig
      schrieb am 15.09.2016 um 13:34 Uhr:

      Ich habe es nicht probiert, aber es sollte klappen, wenn du den MIME-Type angibst.

      Antworten
  4. Rainer
    schrieb am 22.05.2016 um 11:18 Uhr:

    Hallo, danke für das Snippet jetzt klapp es zwar mit dem Hochladen allerdings bekomme ich immer wieder die meldung das die „Beim zuschneiden deines Bildes ist ein Fehler aufgetaucht“ habe auch schon versucht das Memory Limit für WordPress zu erhöhen leider ohne erfolg. der server läuft mit php7

    hat irgendwer eine ahnnung was man machen kann

    Antworten
    • Jonas Hellwig
      schrieb am 22.05.2016 um 13:05 Uhr:

      Ich gehe davon aus, dass WP SVGs nicht beschneiden kann. Im Vergleich zu Pixelgrafiken ist das auch nicht so einfach.

      Antworten
      • Rainer
        schrieb am 22.05.2016 um 13:28 Uhr:

        Das kann ja sein aber wie kann ich es unterbinden ? ich möchte es ja auch nicht bescheiden sondern nur als Header einfügen nicht mehr und nicht weniger.

        MFG
        Rainer

    • herrfischer
      schrieb am 30.05.2016 um 09:59 Uhr:

      das svg kannst du nicht beschneiden da es keine pixelgrafik ist, das musst du verher woanders machen.

      Antworten
  5. Jonas Hellwig
    schrieb am 29.06.2015 um 13:09 Uhr:

    Das Snippet in diesem Beitrag fügt den Mime-Type hinzu. Darüber hinaus scheint das von dir verlinkte Snippet nur mit der Standard-funktions.php von 20XX zu funktionieren.

    Antworten
    • Dan
      schrieb am 29.06.2015 um 18:54 Uhr:

      Naja, es ist nicht wirklich ein Snippet, sondern nur eine zusätzliche Zeile da, wo die Mime-typen stehen.

      Antworten
  6. Andrea
    schrieb am 01.04.2015 um 19:34 Uhr:

    Hallo Jonas,
    ja, Deinen Beitrag hatte ich schon gelesen, aber wiegesagt bin ich totaler Anfänger und weiß noch nicht mal, was Modernizr ist geschweige denn, wie man damit umgeht…
    Außerdem verstehe ich nicht, wie ich genau die svg-Dateien bearbeiten muss. Ich habe z.B. ein jpeg-Bild mit einer Größe von 579kb mit inkscape vektorisiert und nun hat es 2 MB, was viel zu groß für die WordPresseite ist. Es soll als Hintergrundbild dienen(es handelt sich um ein Muster und in meinem Theme gibt es eine Option für Hintergrundbilder; dieses kann man dann auf „repeat“ setzen, so dass das Bild wiederholt wird und somit den Hintergrund füllt). Ich verstehe einfach nicht, wie ich die svg-Datei klein bekomme??

    Vielen Dank,
    Andrea

    Antworten
    • Jonas Hellwig
      schrieb am 02.04.2015 um 11:22 Uhr:

      Hallo Andrea, deine Fragestellung geht über das Thema dieses Beitrags deutlich hinaus. Um Das Problem zu lösen müsste man sich einerseits detailliert mit dem verwendeten WordPress-Theme beschäftigen, andererseits die SVG-Grafik optimieren. Im Rahmen der Blog-Kommentare kann ich dir daher leider nicht weiterhelfen.

      Antworten
  7. Andrea
    schrieb am 01.04.2015 um 08:08 Uhr:

    Hallo,

    sollte man immernoch PNG-Fallbacks für die svg-Dateien einbauen oder ist das heutzutage nicht mehr notwendig? Ich bin mir nicht sicher, wieviele Leute noch alte Browser benutzen…und was ist mit Android?

    Antworten
    • Jonas Hellwig
      schrieb am 01.04.2015 um 09:55 Uhr:

      Das kommt natürlich auf das Projekt an. Aber in aktuellen Projekten setze ich nach wie vor PNG-Fallbacks ein.

      Antworten
      • Andrea
        schrieb am 01.04.2015 um 10:16 Uhr:

        Hallo Jonas,
        danke für die schnelle Antwort! Es geht speziell um eine Website mit Blog und kleinem Woocommerceshop. Ich bin aber totale Anfängerin und verstehe nicht, wie ich solche Fallbacks genau bei WP einrichte… ich habe Deinen und auch andere Artikel dazu gelesen, aber als Laie verstehe ich da nicht so viel…

      • Jonas Hellwig
        schrieb am 01.04.2015 um 12:45 Uhr:

        Hallo Andrea, mit der Art des Projekts meinte ich auch eher die Zielgruppe. Anhand von Statistiken solltest du sehen können, ob der Aufwand für PNG-Fallbacks gerechtfertigt ist. Wie du mit Modernizr einen PNG-Fallback für SVG einrichtest habe ich hier erklärt. Im Editor-Bereich von WordPress wird das allerdings etwas lästiger. Hier wirst du um eine Anpassung von WordPress oder um HTML-Code im Editor nicht herumkommen. Denn du musst ja zwei Grafiken angeben können, die dann ausgetauscht werden.

  8. Holger
    schrieb am 26.05.2014 um 21:50 Uhr:

    Hmmm. Das ist eine Lösung zum Upload – ähnliches hatte ich bereits anderswo gefunden. Leider werden die auf diese Weise hochgeladenen SVGs nach dem Einbinden in Seiten und Beiträge nicht angezeigt … (auch nicht im Editor)

    Das ist bei mir auf verschiedenen Seiten so – scheint also kein serverspezifisches Problem zu sein. Hast du dazu eine Idee, woran das liegt?

    (Aktuelle Entwicklungsumgebung ist Xampp unter Windows 7 ohne irgendwelche Besonderheiten)

    Antworten
    • Michael
      schrieb am 17.01.2015 um 00:02 Uhr:

      Falls noch jemand auf diesen alten Post stößt, hier eine möglich Antwort: WordPress verpasst svg-Dateien beim Einfügen die Angabe width=“1″ height=“1″ (in der Darstellung „Text“ zu sehen) – einfach löschen, und schon wird die svg-Datei dargestellt.

      Antworten
  9. Nelly
    schrieb am 21.05.2013 um 17:51 Uhr:

    Hallo und danke für die Erläuterung. Gibt es denn nicht vlt ein Tool, welches man zum Hochladen verwenden kann. Finde, dass es doch ziemlich aufwändig ist.

    Viele Grüße

    Antworten
    • Nils
      schrieb am 11.12.2013 um 15:17 Uhr:

      Danke für dieses Nice Snippet. Grade jetzt in Retina Zeiten sehr fein!

      Antworten
      • Alex
        schrieb am 15.09.2017 um 12:07 Uhr:

        Gerade in der heutigen Zeit ist es schon beschämend, dass das „Allround-CMS“ sowas noch nicht behoben und integriert hat.

  10. Marcos
    schrieb am 12.05.2013 um 10:03 Uhr:

    Danke für die Info! :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →