So verwenden Sie Vektorbilder sicher mit WordPress

Das Hinzufügen benutzerdefinierter Grafiken und Illustrationen zu Ihrem Divi- Website-Design kann wirklich dazu beitragen, die visuelle Attraktivität zu verbessern. Es ist jedoch nicht immer möglich, die richtigen Bildressourcen zu finden oder einen Designer zu engagieren. Glücklicherweise macht es Divi ganz einfach, eigene Vektorbilder und Illustrationen direkt im Builder zu erstellen.

In diesem Leitfaden erfahren Sie, wie Sie SVG tatsächlich implementieren, ohne Ihre Website zu beeinträchtigen.

Selbst wenn Sie keine Designerfahrung haben, können Sie professionelle, hochwertige Vektorbilder erstellen, um Ihre Divi-Website optisch auf die nächste Stufe zu heben.

Einführung in SVG und seine Verwendung

SVG steht für Scalable Vector Graphics. Es handelt sich um ein weit verbreitetes XML-basiertes Vektorbildformat zur Beschreibung zweidimensionaler Vektorgrafiken. Im Gegensatz zu Rasterbildformaten (wie JPEG oder PNG), die Pixel zur Darstellung von Bildern verwenden, verwendet SVG mathematische Gleichungen, um Formen, Linien und Farben zu definieren, was es zu einem auflösungsunabhängigen und hoch skalierbaren Format macht.

Hier sind einige wichtige Einsatzmöglichkeiten von SVG beim Website-Design:

1. Responsive Grafiken: SVG-Bilder sind auflösungsunabhängig, das heißt, sie können ohne Qualitätsverlust vergrößert oder verkleinert werden. Dadurch eignen sie sich perfekt für responsives Webdesign, bei dem sich Inhalte an unterschiedliche Bildschirmgrößen und Auflösungen anpassen.
2. Symbole und Logos: SVG wird häufig für Symbole, Logos und andere grafische Elemente auf Websites verwendet. Da SVG-Dateien klein sind und mit CSS und JavaScript leicht angepasst und animiert werden können, sind sie eine beliebte Wahl für die Erstellung interaktiver und optisch ansprechender Benutzeroberflächen.
3. Retina- und High-DPI-Displays: SVG ist ideal für die Anzeige gestochen scharfer Grafiken auf High-DPI-Bildschirmen (Punkte pro Zoll) wie Retina-Displays, wo herkömmliche Rasterbilder beim Hochskalieren möglicherweise pixelig erscheinen.
4. Animation: SVG ermöglicht die Erstellung komplexer Animationen direkt im XML-Code mithilfe von Tools wie CSS-Animationen oder JavaScript-Bibliotheken wie Snap.svg und GreenSock Animation Platform (GSAP). Dadurch ist es möglich, einer Website dynamische und interaktive Elemente hinzuzufügen.
5. Barrierefreiheit: SVG-Bilder sind für Bildschirmlesegeräte und unterstützende Technologien leicht zugänglich, da die zugrunde liegende XML-Struktur mit beschreibendem Text versehen werden kann, wodurch Websites integrativer und für Menschen mit Behinderungen nutzbarer werden.
6. SEO-Vorteile: Suchmaschinen können den Inhalt in SVG-Dateien analysieren und indizieren, was die Suchmaschinenoptimierung (SEO) verbessern kann, indem den Suchmaschinen-Crawlern mehr Kontext bereitgestellt wird.
7. Interaktive Datenvisualisierung: Mit SVG können interaktive Datenvisualisierungen wie Diagramme und Grafiken erstellt werden, die dazu beitragen können, Informationen effektiv auf einer Website zu vermitteln.

Zusammenfassend ist SVG ein vielseitiges und leistungsstarkes Format zum Erstellen und Anzeigen von Vektorgrafiken auf Websites. Seine Fähigkeit zur nahtlosen Skalierung, die gute Arbeit mit verschiedenen Bildschirmgrößen und Auflösungen sowie die Unterstützung von Animationen und Interaktivität machen es zu einem wertvollen Werkzeug für modernes Webdesign und -entwicklung.

Möglichkeiten zur sicheren Verwendung von Vektorbildern mit WordPress

In diesem Teil betrachten wir zwei Methoden zur Verwendung von sicherem SVG in WordPress: manuell und über Plugins. Anschließend wird Ihnen die beste Auswahl für Ihre Bedürfnisse zur Auswahl vorgelegt. Lass uns anfangen!

Fügen Sie SVG-Unterstützung manuell hinzu und bereinigen Sie Ihren Code

Mit einem kleinen Stück Code kann die SVG-Unterstützung in wenigen Minuten zu WordPress hinzugefügt werden. Dies würde Sie den möglichen Sicherheitsbedenken aussetzen, die wir bereits hervorgehoben haben. Die folgenden Maßnahmen sind erforderlich, um SVG sicherer zu implementieren:

1. Nehmen Sie Änderungen an Ihrer Datei „functions.php“ vor, um die SVG-Unterstützung zu aktivieren.
2. Verhindern Sie, dass die gewünschten Benutzerrollen SVG-Dateien in WordPress hochladen.
3. Bereinigen Sie alle SVG-Dateien, bevor Sie sie hochladen.

Insgesamt ist es nicht schwierig, die Schritte eins und zwei abzuschließen. Der erste Schritt besteht darin, über das File Transfer Protocol (FTP) eine Verbindung zu Ihrer Website herzustellen und den Stammordner für WordPress zu finden. Suchen Sie dort Ihre Datei „functions.php“, öffnen Sie sie und fügen Sie den folgenden Code ein.

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

Damit können Sie SVG-Dateien auf WordPress hochladen und in Ihrer Medienbibliothek ansehen, was zwei Zwecken dient. Schließen Sie nach dem Hinzufügen des Codes Ihre Datei „functions.php“ und speichern Sie die Änderungen.

Da wir nun verhindern müssen, dass Personen, deren Uploads wir nicht vertrauen, beschädigt werden, wird die Sache etwas schwieriger. Sie können beispielsweise darauf vertrauen, dass Ihre Redakteure und Autoren korrekte Dateien hochladen, nicht jedoch auf Ihre Mitwirkenden. Hier gibt es zwei Vorgehensweisen:

1. Richten Sie eindeutige Benutzerrollen für Benutzer mit eingeschränktem oder keinem Zugriff auf die Medienbibliothek ein.
2. Um die Arten von Dateien einzuschränken, die jede Benutzerrolle hochladen kann, installieren Sie ein Plugin wie WP Upload Restriction .

Es stimmt, dass beide Strategien Nachteile haben, was einer der Gründe dafür ist, dass die manuelle SVG-Implementierung möglicherweise eine Herausforderung darstellt. Wenn Sie sich jedoch für eine Strategie zum Stoppen bösartiger SVG-Uploads entscheiden, müssen Sie auch sicherstellen, dass Sie diese nicht versehentlich verwenden.

Idealerweise sollten Sie ein Desinfektionstool verwenden, bevor Sie SVG-Dateien auf Ihre Website hochladen. Dadurch wird Ihre Datei überprüft, um festzustellen, ob sie fragwürdige Inhalte enthält, und sie gegebenenfalls gelöscht. Am Ende erhalten Sie eine aufgeräumte SVG-Datei, die Sie schließlich an WordPress übermitteln können.

Verwendung des Safe SVG-Plugins

Mit der oben genannten Methode wollten wir zeigen, wie schwierig eine sichere SVG-Implementierung sein kann. Dies ist notwendig, damit Sie die Funktionsweise des Safe SVG-Plugins vollständig verstehen können.

das Plugin für Safe SVG. Kurz gesagt, die zuvor genannten Schwierigkeiten werden von diesem Plugin alle angegangen, darunter:

1. Ermöglicht Ihnen das Hochladen von SVGs.
2. Überprüfen Sie, ob Ihre SVGs in der Medienbibliothek sichtbar sind.
3. Bereinigen des Quellcodes jeder von Ihnen hochgeladenen SVG-Datei, um Sicherheitslücken zu vermeiden. Dieses Plugin ist im Wesentlichen Plug-and-Play-fähig und bietet den einfachsten Weg zur sicheren SVG-Implementierung in WordPress. Wir empfehlen Ihnen, es auszuprobieren, wenn Sie entschlossen sind, SVGs zu verwenden.

Animieren von SVGs mit CSS und Plugins

Wenn Sie SVGs in WordPress integrieren, möchten Sie zweifellos Ihre Kapitalrendite maximieren. Das bedeutet, dass Sie Ihre SVGs gegebenenfalls mit CSS animieren sollten. Sie können zwei Ansätze verfolgen, die wir bereits besprochen haben:

• SVGs können wie jedes andere Element manuell mit CSS animiert werden.
• Verwenden Sie Programme wie SVGator , um SVGs zu erstellen und zu animieren.

Wenn Sie bereit sind, neue Dinge auszuprobieren, kann das Hinzufügen einiger Animationen hier und da die Benutzererfahrung auf Ihrer Website erheblich verbessern. Allerdings wäre das Hinzufügen von Videos oder GIFs für mobile Geräte deutlich schlechter als die Verwendung von SVGs und CSS, um dies zu erreichen.

Abschluss

Mit der Möglichkeit, benutzerdefinierte Vektorgrafiken direkt im Divi-Builder zu erstellen, verfügen Sie über eine leistungsstarke Möglichkeit, Illustrationen und Symbole für Ihre Website zu erstellen, ohne dass dafür Designkenntnisse erforderlich sind. Die Implementierung dieser Originalgrafiken kann Ihren Seiten und Beiträgen eine einzigartigere, personalisiertere Ästhetik verleihen. Sie werden überrascht sein, wie professionell Ihre DIY-Vektorgrafiken aussehen können!