Jak bezpiecznie używać obrazów wektorowych w WordPress

Dodanie niestandardowej grafiki i ilustracji do projektu witryny Divi może naprawdę pomóc poprawić jej atrakcyjność wizualną. Jednak znalezienie odpowiednich zasobów obrazu lub zatrudnienie projektanta nie zawsze jest wykonalne. Na szczęście Divi ułatwia tworzenie własnych obrazów wektorowych i ilustracji bezpośrednio w kreatorze.

W tym przewodniku przyjrzymy się, jak faktycznie wdrożyć SVG bez narażania Twojej witryny.

Nawet jeśli nie masz doświadczenia w projektowaniu, możesz tworzyć profesjonalne obrazy wektorowe wysokiej jakości, aby naprawdę przenieść swoją witrynę Divi na wyższy poziom wizualny.

Wprowadzenie do SVG i jego zastosowań

SVG oznacza skalowalną grafikę wektorową. Jest to szeroko stosowany format obrazu wektorowego oparty na języku XML, przeznaczony do opisywania dwuwymiarowej grafiki wektorowej. W przeciwieństwie do formatów obrazów rastrowych (takich jak JPEG lub PNG), które wykorzystują piksele do reprezentowania obrazów, SVG wykorzystuje równania matematyczne do definiowania kształtów, linii i kolorów, dzięki czemu jest formatem niezależnym od rozdzielczości i wysoce skalowalnym.

Oto kilka kluczowych zastosowań SVG w projektowaniu stron internetowych:

1. Responsywna grafika: obrazy SVG są niezależne od rozdzielczości, co oznacza, że ​​można je skalować w górę lub w dół bez utraty jakości. Dzięki temu idealnie nadają się do responsywnego projektowania stron internetowych, w których treść dostosowuje się do różnych rozmiarów i rozdzielczości ekranów.
2. Ikony i logo: SVG jest powszechnie używany do ikon, logo i innych elementów graficznych na stronach internetowych. Ponieważ pliki SVG mają niewielki rozmiar i można je łatwo dostosowywać oraz animować za pomocą CSS i JavaScript, są one popularnym wyborem do tworzenia interaktywnych i atrakcyjnych wizualnie interfejsów użytkownika.
3. Wyświetlacze Retina i wyświetlacze o wysokiej rozdzielczości: SVG idealnie nadaje się do wyświetlania wyraźnej i ostrej grafiki na ekranach o wysokiej rozdzielczości (punkty na cal), takich jak wyświetlacze Retina, gdzie tradycyjne obrazy rastrowe mogą wydawać się pikselowane po powiększeniu.
4. Animacja: SVG umożliwia tworzenie złożonych animacji bezpośrednio w kodzie XML przy użyciu narzędzi takich jak animacje CSS lub bibliotek JavaScript, takich jak Snap.svg i GreenSock Animation Platform (GSAP). Dzięki temu możliwe jest dodanie do witryny elementów dynamicznych i interaktywnych.
5. Dostępność: obrazy SVG są łatwo dostępne dla czytników ekranu i technologii wspomagających, ponieważ podstawowa struktura XML może być opatrzona tekstem opisowym, dzięki czemu strony internetowe są bardziej włączające i użyteczne dla osób niepełnosprawnych.
6. Korzyści SEO: Wyszukiwarki mogą analizować i indeksować zawartość plików SVG, co może poprawić optymalizację wyszukiwarek (SEO), zapewniając większy kontekst robotom wyszukiwarek.
7. Interaktywna wizualizacja danych: SVG można wykorzystać do tworzenia interaktywnych wizualizacji danych, takich jak wykresy i wykresy, które mogą pomóc w skutecznym przekazywaniu informacji na stronie internetowej.

Podsumowując, SVG to wszechstronny i wydajny format do tworzenia i wyświetlania grafiki wektorowej na stronach internetowych. Możliwość płynnego skalowania, dobra współpraca z różnymi rozmiarami i rozdzielczościami ekranów oraz obsługa animacji i interaktywności sprawiają, że jest to cenne narzędzie w nowoczesnym projektowaniu i tworzeniu stron internetowych.

Sposoby bezpiecznego korzystania z obrazów wektorowych w WordPress

W tej części przyjrzymy się dwóm metodom korzystania z bezpiecznego SVG w WordPressie: ręcznie i za pomocą wtyczek. Następnie zostanie Państwu przedstawiony wybór najlepszy dla Państwa potrzeb. Zacznijmy teraz!

Dodaj ręcznie obsługę SVG i oczyść swój kod

Za pomocą małego fragmentu kodu obsługę SVG można dodać do WordPressa w ciągu kilku minut. Narażałoby to Cię na potencjalne zagrożenia związane z bezpieczeństwem, o których już wspomnieliśmy. Aby bezpieczniej wdrożyć SVG, wymagane są następujące działania:

1. Wprowadź zmiany w pliku Functions.php, aby włączyć obsługę SVG.
2. Nie zezwalaj żądanym rolom użytkowników na przesyłanie plików svg do WordPress.
3. Przed przesłaniem jakichkolwiek plików SVG należy je wszystkie oczyścić.

Ogólnie rzecz biorąc, wykonanie kroków pierwszego i drugiego nie jest trudne. Pierwszym krokiem jest połączenie się ze swoją witryną za pomocą protokołu FTP (File Transfer Protocol) i znalezienie folderu głównego WordPress. Znajdź tam swój plikfunctions.php, otwórz go i wklej do niego następujący kod.

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

Dzięki temu możesz przesyłać pliki SVG do WordPress i wyświetlać je w swojej bibliotece multimediów, służąc dwóm celom. Po dodaniu kodu zamknij plik Functions.php i zapisz zmiany.

Teraz, gdy musimy chronić osoby, którym nie ufamy, przed uszkodzeniem, sytuacja staje się nieco trudniejsza. Możesz na przykład ufać swoim redaktorom i autorom, że przesyłają dokładne pliki, ale nie wierzyć współpracownikom. Można tutaj zastosować dwa podejścia:

1. Ustal unikalne role użytkowników z ograniczonym dostępem do Biblioteki multimediów lub bez nich.
2. Aby ograniczyć rodzaje plików, które może przesyłać każda rola użytkownika, zainstaluj wtyczkę taką jak WP Upload Restriction .

Prawdą jest, że obie strategie mają wady i jest to jeden z powodów, dla których ręczne wdrożenie SVG może być trudne. Jeśli jednak wybierzesz strategię mającą na celu zatrzymanie przesyłania złośliwych plików SVG, musisz także upewnić się, że nie użyjesz jej przypadkowo.

Najlepiej byłoby użyć narzędzia do czyszczenia przed przesłaniem dowolnego pliku SVG na swoją witrynę. Spowoduje to pobranie pliku, sprawdzenie, czy nie zawiera niczego podejrzanego, a następnie usunięcie go, jeśli tak. Na koniec otrzymasz schludny plik SVG, który możesz w końcu przesłać do WordPressa.

Korzystanie z wtyczki Safe SVG

Zamierzaliśmy pokazać, jak trudna może być bezpieczna implementacja SVG przy użyciu powyższej metody. Jest to konieczne, abyś mógł w pełni zrozumieć, co robi wtyczka Safe SVG .

wtyczka do Safe SVG. Krótko mówiąc, wszystkie problemy, o których wspomnieliśmy wcześniej, są rozwiązywane przez tę wtyczkę, w tym:

1. Umożliwienie przesyłania plików SVG.
2. Sprawdzanie, czy Twoje pliki SVG są widoczne w Bibliotece multimediów.
3. Czyszczenie kodu źródłowego każdego przesyłanego pliku SVG w celu uniknięcia luk w zabezpieczeniach. Ta wtyczka ma zasadniczo charakter plug-and-play i stanowi najprostszą drogę do zabezpieczenia implementacji SVG w WordPress. Radzimy spróbować, jeśli jesteś zdecydowany używać plików SVG.

Animowanie plików SVG za pomocą CSS i wtyczek

Jeśli zajmiesz się integracją plików SVG z WordPress, niewątpliwie będziesz chciał zmaksymalizować zwrot z inwestycji. Oznacza to, że jeśli to konieczne, powinieneś animować swoje pliki SVG za pomocą CSS. Można zastosować dwa podejścia, które omówiliśmy wcześniej:

• Pliki SVG można ręcznie animować za pomocą CSS, tak jak każdy inny element.
• Użyj programów takich jak SVGator do tworzenia i animowania plików SVG.

Jeśli chcesz wypróbować nowe rzeczy, dodanie kilku animacji tu i ówdzie może znacznie poprawić komfort korzystania z Twojej witryny. Jednak dodanie filmów lub GIF-ów byłoby znacznie gorsze dla urządzeń mobilnych niż wykorzystanie do tego celu plików SVG i CSS.

Wniosek

Dzięki możliwości tworzenia niestandardowej grafiki wektorowej bezpośrednio w kreatorze Divi , masz skuteczny sposób na tworzenie ilustracji i ikon dla swojej witryny bez konieczności posiadania specjalistycznej wiedzy projektowej. Zastosowanie tych oryginalnych grafik może nadać Twoim stronom i postom bardziej wyjątkową, spersonalizowaną estetykę. Będziesz zaskoczony, jak profesjonalnie może wyglądać Twoja grafika wektorowa DIY!