Grafiki w formacie SVG to przydatny element podczas projektowania wyglądu swojej strony internetowej opartej o WordPress. Wszelkie ikony lub ozdobniki często zapisywane są w tym formacie. Jeśli jednak podczas próby dodania ich w Bibliotece Mediów otrzymujesz komunikat o braku uprawnień, oznacza to, że format ten jest wyłączony na Twojej witrynie. Sprawdź, dlaczego WordPress blokuje SVG i czy możesz bezpiecznie włączyć obsługę tych plików.
Pliki graficzne SVG (Scalable Vector Graphics) są zbiorem wektorów, krzywych i kształtów opisanych w znacznikach XML (eXtensible Markup Language). Chociaż brzmi to tajemniczo, SVG pozwalają na wiele czynności, które nie są możliwe z innymi formatami grafik jak JPG, czy PNG.
Największą zaletą SVG jest skalowalność. Grafika wektorowa może być rozszerzana do dowolnego rozmiaru bez utraty jakości. Dzięki temu wszelkie ikony, czy inne elementy w tym formacie wyglądają dobrze na różnych rozdzielczościach ekranu. SVG jest więc podstawą przy responsywnym projektowaniu stron internetowych.
Pliki SVG możesz łatwo też edytować za pomocą darmowych programów takich jak Inkscape. Ponadto, format ten pozwala na edycję wyglądu, a nawet tworzenie animacji za pomocą stylów CSS i skryptów JavaScript. Warto więc wykorzystać jego możliwości.
To nie jest tak, że programiści WordPressa zapomnieli dodać możliwość wgrywania plików SVG na strony użytkowników. Stał za tym bardzo konkretny powód związany z bezpieczeństwem – SVG to zwyczajnie pliki tekstowe w formacie XML. Rodzi to wiele możliwości na wstrzyknięcie złośliwego kodu, otwierając drzwi dla szkodliwych skryptów. Warto więc weryfikować źródło pozyskiwanych grafik SVG.
W związku z tym, próbując dodać obrazek w tym formacie, otrzymasz nieprzyjemny komunikat o braku uprawnień do przesyłania plików tego typu:
WordPress jest systemem zarządzania treścią, który stara się zapewnić stabilność i bezpieczeństwo swoim użytkownikom. Ograniczając typy plików, które można wgrywać, zmniejsza ryzyko potencjalnych problemów.
Jeśli jednak mamy pewność, że nasze ikony, infografiki, czy logo pochodzi z zaufanego źródła, możemy ze spokojem uploudować je na stronę. Największe zagrożenie istnieje, gdy pozwalamy zewnętrznym użytkownikom na wrzucanie grafik – wtedy może pojawić się potencjalny haker, który nie ma czystych intencji.
Istnieją 3 sposoby na włączenie plików SVG w WordPress. Pierwszy z nich wymaga dodania specjalnego kodu do pliku functions.php, drugi natomiast wymaga zainstalowania specjalnej wtyczki. Ostatnia metoda jest odpowiednia tylko dla posiadaczy page buildera Elementor, dlatego potraktujmy ją jako opcjonalną.
W pliku functions.php możesz dodawać różne funkcje, które zmieniają funkcjonalność WordPressa. Jest to jednak bardzo wrażliwy na błędy kod, stąd warto przed edycją wykonać kopię zapasową swojej strony.
Oto kod do wklejenia w pliku:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
Jeśli jednak nie czujesz się bezpiecznie, edytując kod PHP w plikach źródłowych, możesz ewentualnie zainstalować dodatkową wtyczkę WPCode która posiada już gotowy fragment kodu:
Wystarczy, że go włączysz i zaktualizujesz ustawienia, a kod PHP automatycznie doda się do Twojej strony:
Tym sposobem włączysz możliwość dodawania plików SVG przed osoby zalogowane do kokpitu WordPress. Pamiętaj więc, by dawać do niego dostęp tylko zaufanym osobom.
Jak wiadomo, jeśli w WordPress występuje jakiś problem, z dużym prawdopodobieństwem ktoś już napisał plugin, który go rozwiązuje. Tak też jest w tym przypadku – w bibliotece wtyczek znajdziesz szereg rozwiązań dotyczących plików SVG. Ja polecam jednak wtyczkę SVG Support:
W ustawieniach znajdziesz szereg opcji dotyczących m. in. zabezpieczeń – możesz ograniczyć uprawnienia dodawania SVG tylko dla administratorów, czy innego typu użytkowników.
Wtyczka umożliwia też stylowanie grafik SVG za pomocą CSS. Aby to zrobić, włącz tryb zaawansowany – zaznacz opcję Enable Advanced Mode. Aby Twoja grafika była możliwa do ostylowania, dodaj jej specjalną klasę .style-svg. Możesz to też zrobić automatycznie, zaznaczając kolejną opcję:
Jeśli nie widzisz jej podczas edycji ustawień wtyczki, odśwież stronę.
Jeśli Twoja strona oparta jest o kreator Elementor, możesz włączyć obsługę plików SVG z poziomu edycji wyglądu danej strony.
Próbując zrobić upload SVG, otrzymasz komunikat z ostrzeżeniem:
Po kliknięciu Enable, zostaniemy przeniesieni do ustawień zaawansowanych wtyczki:
Tutaj musisz w sekcji Enable SVG Uploads wybrać właściwą opcję, która włączy możliwość wgrywania plików SVG do Twojego WordPressa.
Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.