WordPress ist seit fast zwei Jahrzehnten auf dem Markt und erlaubt aus Sicherheitsgründen immer noch nicht den direkten Upload von SVG-Dateien. Es gibt jedoch mehrere Möglichkeiten, SVG-Dateien auf Ihre WordPress-Website hochzuladen.
Was ist SVG
Das Dateiformat Scalable Vector Graphics (SVG) wird im modernen Webdesign immer häufiger eingesetzt. Die Dateien ermöglichen es, Bilder mit kleinen Dateigrößen einzubetten, die ohne Qualitätsverlust auf jede visuelle Größe skalierbar sind. Denn im Gegensatz zu pixelbasierten Rasterdateien wie JPEGs werden in Vektordateien Bilder über mathematische Formeln gespeichert, die auf Punkten und Linien in einem Raster basieren. Das bedeutet, dass Vektordateien wie SVG in ihrer Größe erheblich verändert werden können, ohne an Qualität zu verlieren, was sie ideal für Logos, Illustrationen und Diagramme macht.
Sie können eine SVG-Datei leicht an ihrer .svg-Erweiterung erkennen. In einem früheren Beitrag sind wir bereits ausführlich auf das Datenformat eingegangen.
Vor- und Nachteile von SVG-Dateien
Es lohnt sich, einen Blick auf die Vor- und Nachteile von SVG-Dateien zu werfen, bevor Sie Ihre Bilder in diesem Dateiformat speichern.
Vorteile von SVG-Dateien
- Im Gegensatz zu Rasterdateien, die aus Pixeln bestehen, behalten Vektorgrafiken wie SVGs immer ihre Auflösung bei – egal, wie groß oder klein sie sind.
- Einfache SVG-Dateien sind oft kleiner als Rasterbilder, die aus vielen farbigen Pixeln bestehen.
- Da SVG-Dateien Text als Text (und nicht als Design) behandeln, können Screenreader alle in SVG-Bildern enthaltenen Wörter verstehen. Dies ist sehr nützlich für Personen, die Hilfe beim Lesen von Webseiten benötigen. Auch Suchmaschinen können SVG-Bildtexte lesen und indizieren.
Nachteile von SVG-Dateien
- Aufgrund des Mangels an Pixeln ist es schwierig, Digitalfotos darzustellen. JPEG- oder WebP-Dateien sind besser für detaillierte Fotos geeignet.
- Der Hauptgrund dafür, dass dieser Dateityp noch nicht in WordPress integriert wurde, sind Sicherheitsprobleme. Da SVG-Dateien auf XML basieren, sind sie unter anderem für External-Entity-Angriffe anfällig.
- SVG-Bilder werden von alten Browsern nicht unterstützt.
SVG-Dateien vor dem Upload optimieren
Bevor Sie eine SVG-Datei auf Ihre Website hochladen, lohnt es sich, die SVG-Datei mit einem Online-Tool wie SVGOMG zu optimieren. In den meisten Fällen reduzieren Sie so die Dateigröße.
SVG-Uploads durch ein Plug-in ermöglichen
Das beliebteste Plug-in, das sowohl die Anzeige von SVG-Dateien in der Mediathek ermöglicht als auch SVG-Dateien vor dem Hochladen optimiert, ist SVG-Uploads.
Die wichtigsten Eigenschaften des Plug-ins SVG-Uploads in Kürze:
- SVG-Unterstützung für Ihre Mediathek
- SVG-Dateien verkleinern
- SVG-Upload nur für Administratoren möglich
Manuelles Aktivieren von SVG-Datei-Uploads
Wenn Sie gern Plug-ins vermeiden und sich mit der Bearbeitung der functions.php auskennen, können Sie SVG-Uploads für Ihre WordPress-Website auch manuell aktivieren.
Öffnen Sie dazu die Datei functions.php Ihrer Website (am besten, in einem Child-Theme) und fügen den folgenden Codeschnipsel ein (Sichern Sie zunächst Ihre functions.php, falls Probleme auftreten):
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
Danach können Sie SVG-Bilder in Ihre Medienbibliothek hochladen. Dort können sie wie andere Bilddateitypen anzeigt und bearbeitet werden.
Fazit
Die Verwendung von SVG-Dateien ist eine ausgezeichnete Wahl, wenn auf der Website transparente Vektordateien verwendet werden sollen, und es lohnt sich auch, SVG-Dateien für Website-Logos zu verwenden, denn sie sind auf allen Bildschirmauflösungen knackscharf.
Bei der Erstellung von Websites für unsere Kunden verwenden wir gern das empfohlene Plug-in und deinstallieren es aus Sicherheitsgründen vor der Übergabe der Website wieder. Die Darstellung der SVG-Dateien beeinflusst das nicht.