kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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

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

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

21 Kommentare

  1. Marcos

    Verfasst am 12. Mai 2013 um 10:03 Uhr.

    Danke für die Info! :)

  2. Nelly

    Verfasst am 21. Mai 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

    • Nils

      Verfasst am 11. Dezember 2013 um 15:17 Uhr.

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

      • Alex

        Verfasst am 15. September 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.

  3. Holger

    Verfasst am 26. Mai 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)

    • Michael

      Verfasst am 17. Januar 2015 um 0: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.

  4. Andrea

    Verfasst am 1. April 2015 um 8: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?

    • Jonas Hellwig

      Verfasst am 1. April 2015 um 9:55 Uhr.

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

      • Andrea

        Verfasst am 1. April 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

        Verfasst am 1. April 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.

  5. Andrea

    Verfasst am 1. April 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

    • Jonas Hellwig

      Verfasst am 2. April 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.

  6. Jonas Hellwig

    Verfasst am 29. Juni 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.

    • Dan

      Verfasst am 29. Juni 2015 um 18:54 Uhr.

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

  7. Rainer

    Verfasst am 22. Mai 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

    • Jonas Hellwig

      Verfasst am 22. Mai 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.

      • Rainer

        Verfasst am 22. Mai 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

      Verfasst am 30. Mai 2016 um 9:59 Uhr.

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

  8. Stephan

    Verfasst am 15. September 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.

  9. Steffen Schmitt

    Verfasst am 10. April 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.