Szybkie wsparcie: 511 280 732 lub czesc@woocado.pl
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak dodać pliki SVG do WordPress?

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.

Czym są pliki SVG?

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.

Dlaczego WordPress nie pozwala na wgranie plików SVG?

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:

brak uprawnień do przesyłania svg

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.

Jak włączyć możliwość dodawania grafik SVG w WordPress?

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ą.

Sposób 1: Dodaj specjalny kod do pliku functions.php

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:

wp code pliki svg

Wystarczy, że go włączysz i zaktualizujesz ustawienia, a kod PHP automatycznie doda się do Twojej strony:

wp code svg

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.

Sposób 2: Zainstaluj wtyczkę SVG Support

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:

svg support plugin

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.

ustawienia svg support

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ę.

Sposób 3: Dla użytkowników Elementora

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:

enable svg uploads elementor

Po kliknięciu Enable, zostaniemy przeniesieni do ustawień zaawansowanych wtyczki:

svg advanced settings elementor

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.

Zadbamy o Twoją stronę internetową

Wypełnij poniższy formularz, a nasz specjalista odezwie się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności