Logo i ikony w formacie SVG zachowują ostre krawędzie po zmianie rozmiaru, ale przesłanie tego pliku wymaga kontroli zawartości i uprawnień. Pokażemy, jak dobrać sposób obsługi SVG oraz rozdzielić problem z uploadem od błędu wyświetlania.
Krótka odpowiedź
WordPress domyślnie nie dopuszcza SVG w standardowym uploadzie, więc do obsługi potrzebujesz wtyczki z sanitacją albo własnego mechanizmu, który oczyszcza plik. Samo dopisanie `image/svg+xml` do dozwolonych typów MIME nie sprawdza zawartości SVG.
Ogranicz upload do potrzebnych ról i sprawdź, czy używane formularze oraz integracje przechodzą przez sanitację.
Usługi KC Mobile
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „SVG w WordPress: jak dodać grafikę i bezpiecznie jej używać”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.
Czym różni się SVG od PNG i kiedy warto go użyć?
SVG zapisuje grafikę za pomocą wektorów, czyli matematycznych kształtów i ścieżek, dlatego logo lub ikona może być skalowana bez typowej dla bitmap utraty ostrości. PNG i WebP zapisują obraz jako piksele, więc przy powiększeniu ponad rozdzielczość źródła mogą pokazać miękkie krawędzie. WebP może stosować kompresję stratną i przezroczystość, co czyni go przydatnym dla fotografii i ilustracji rastrowych.
Format wybierz według rodzaju grafiki, wymaganej ostrości i typowego rozmiaru pliku. Rozmiar zależy też od eksportu, zawartości i sposobu osadzenia.
| Format | Skalowanie | Ostrość przy zmianie rozmiaru | Typowy rozmiar pliku | Typowe zastosowanie |
|---|---|---|---|---|
| SVG | Wektorowe, niezależne od rozdzielczości | Zachowuje ostre krawędzie | Często mały dla prostych kształtów | Logo, ikony i proste ilustracje |
| PNG | Rastrowe, zależne od rozdzielczości | Przy powiększeniu mogą być widoczne piksele | Zależy od wymiarów i kolorów | Zrzuty i grafiki z przezroczystością |
| WebP | Rastrowe, zależne od rozdzielczości | Przy powiększeniu mogą być widoczne piksele | Kompresja może zmniejszyć plik | Zdjęcia i ilustracje rastrowe |
SVG wybieraj dla prostych znaków i ikon, a format rastrowy dla fotografii.
Współczesne przeglądarki obsługują te formaty, ale grafikę sprawdź w docelowym motywie i na urządzeniach. SVG nie zawsze będzie mniejszy, ponieważ złożone gradienty, filtry i ścieżki mogą zwiększyć jego rozmiar.
Czytasz poradnik „SVG w WordPress: jak dodać grafikę i bezpiecznie jej używać”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny. Omów temat tego poradnika
Dlaczego WordPress domyślnie blokuje pliki SVG?
WordPress domyślnie blokuje SVG, ponieważ jest to plik XML, który może zawierać aktywny kod i odwołania do zewnętrznych zasobów. Wtyczka dopisująca SVG do dozwolonych typów MIME może dopuścić plik bez oczyszczenia jego zawartości. Samo sprawdzenie rozszerzenia lub nagłówka pliku nie wystarcza.
Uprawnienie użytkownika ogranicza, kto może przesłać plik, ale nie sanitizuje jego zawartości. Safe SVG deklaruje sanitację przesyłanych plików, podgląd w bibliotece mediów i możliwość ograniczenia użytkowników, którzy mogą dodawać SVG. Karta wtyczki ostrzega, że własne ścieżki uploadu innych wtyczek mogą nie przechodzić przez jej filtry; szczegóły podaje karta Safe SVG w katalogu WordPress, sprawdzona w październiku 2026.
Dostęp do dodawania SVG ogranicz do ról, które rzeczywiście publikują grafiki. Typowy podział wygląda tak:
- Administrator konfiguruje i aktualizuje mechanizm obsługi SVG.
- Redaktor może dodawać grafiki, jeśli odpowiada za publikację treści.
- Autor, współpracownik i subskrybent nie otrzymują dostępu bez potrzeby biznesowej.
Zalecamy pozostawić upload administratorom, jeśli tylko ta rola publikuje grafiki, ponieważ każdy dodatkowy uploader może wprowadzić plik na stronę. Gdy redaktorzy muszą dodawać SVG, ogranicz dostęp ustawieniem wtyczki i sprawdź ścieżki opisane w checkliście przed publikacją.
Jak dodać SVG do WordPress krok po kroku?
Bezpieczna ścieżka dodania SVG obejmuje sprawdzenie źródła pliku, kopię zapasową, sanitację oraz test w bibliotece mediów i na stronie. Safe SVG deklaruje oczyszczanie plików przy uploadzie i podgląd w bibliotece, ale jego karta wskazuje ograniczenia dla niestandardowych ścieżek uploadu. Przed użyciem sprawdź zgodność z wersją WordPressa i aktywnymi wtyczkami; stan karty wtyczki sprawdziliśmy w październiku 2026.
1. Sprawdź plik: potwierdź, że pochodzi od znanego projektanta lub z kontrolowanego eksportu. Nie ufaj samemu rozszerzeniu `.svg`.
2. Zabezpiecz witrynę: wykonaj kopię plików i bazy danych albo użyj środowiska stagingowego.
3. Wybierz metodę: zainstaluj wtyczkę z sanitacją albo wdroż własny, przetestowany mechanizm. Instalację z katalogu wykonasz przez Wtyczki > Dodaj nową, a następnie Zainstaluj i Włącz; procedurę opisuje dokumentacja WordPress dotycząca zarządzania wtyczkami, sprawdzona w październiku 2026.
4. Ogranicz role: w ustawieniach wtyczki dopuść tylko użytkowników, którzy potrzebują uploadu.
5. Prześlij plik testowy: użyj Media > Dodaj nowe i sprawdź podgląd oraz komunikaty sanitizera.
6. Sprawdź widok: wstaw grafikę na stronie testowej i obejrzyj ją w edytorze, na froncie i na telefonie.
Poza biblioteką mediów uwzględnij wszystkie miejsca przyjmujące pliki: formularze, importery, integracje REST API, własne endpointy oraz niestandardowy kod motywu lub wtyczki. Safe SVG opisuje ograniczenie dla kodu korzystającego z `_wp_handle_upload()` z własnymi parametrami akcji, ponieważ takie wywołanie może ominąć standardowe filtry sanitacji. Szczegóły testów tych ścieżek znajdują się w checkliście przed wdrożeniem.
Jeśli witryna wymaga uporządkowania uploadu, ról i testów, strony internetowe oparte na WordPressie mogą uwzględniać te wymagania już na etapie prac nad serwisem.
Potrzebujesz pomocy w tym temacie?
Jak wybrać metodę obsługi SVG?
Wtyczka z aktywną sanitacją jest praktycznym wyborem dla typowej witryny, a własny kod ma sens, gdy upload musi obsługiwać niestandardowy proces. Konwersja do PNG lub WebP omija obsługę SVG, ale usuwa skalowanie wektorowe. Wybierz metodę również według wymagań technicznych i tego, kto będzie utrzymywać zabezpieczenia.
| Metoda | Kontrola bezpieczeństwa | Wymagania techniczne | Odpowiedzialny za aktualizacje |
|---|---|---|---|
| Wtyczka z sanitacją | Zależna od zakresu sanitacji i ścieżek uploadu | Instalacja i konfiguracja | Administrator witryny |
| Własny mechanizm | Dopasowana do zdefiniowanych ścieżek i ról | Programista i testy kodu | Właściciel techniczny projektu |
| Konwersja do PNG | Brak SVG do przesłania | Przygotowanie bitmapy | Osoba przygotowująca grafiki |
| Konwersja do WebP | Brak SVG do przesłania | Przygotowanie i kontrola bitmapy | Osoba przygotowująca grafiki |
Wybierz metodę według procesu uploadu i osoby odpowiedzialnej za aktualizacje.
Wtyczka nie zwalnia właściciela strony z aktualizacji ani kontroli uprawnień. Własny kod zwiększa odpowiedzialność za testy po zmianach WordPressa, motywu i integracji.
Jak ograniczyć ryzyko niebezpiecznego pliku?
Ryzyko ogranicza sanitacja przed zapisaniem SVG, kontrola ról i aktualizacja komponentów obsługujących upload. Sanitacja odrzuca lub usuwa niedozwolone elementy, a jej zakres zależy od konkretnej implementacji. Administrator powinien ustalić, czy mechanizm odrzuca cały niezgodny plik, czy modyfikuje jego zawartość.
Safe SVG opisuje sanitację i ograniczanie użytkowników, którzy mogą przesyłać SVG. Karta wtyczki wyjaśnia, że nie gwarantuje sanitacji przy dowolnej niestandardowej ścieżce uploadu: opis ograniczeń bezpieczeństwa Safe SVG, sprawdzony w październiku 2026. Dotyczy to między innymi formularzy z przesyłaniem plików, importerów, integracji REST API i własnych funkcji, które uruchamiają odrębny upload.
Nie odblokowuj SVG wyłącznie przez filtr MIME `upload_mimes`, ponieważ filtr dopuszcza typ pliku, ale sam nie oczyszcza XML. WordPress opisuje działanie filtra w dokumentacji `upload_mimes`, sprawdzonej w październiku 2026. Przed dopuszczeniem SVG w polu formularza lub importerze sprawdź, czy dany komponent wykonuje własną sanitację.
Jeśli plik zachowuje się podejrzanie, usuń załącznik z Media > Biblioteka, a następnie sprawdź, czy nie został osadzony w innych miejscach witryny. Samo usunięcie grafiki z edytowanej strony nie usuwa jej automatycznie z biblioteki mediów.
Co sprawdzić, gdy SVG nie działa lub wygląda inaczej?
Najpierw ustal, czy błąd pojawia się podczas przesyłania, czy dopiero przy renderowaniu grafiki. Komunikat "Przepraszamy, ten typ pliku jest niedozwolony ze względów bezpieczeństwa" zwykle wskazuje na odrzucenie pliku przez kontrolę typu lub brak uprawnień, ale dokładną przyczynę określa konfiguracja i komunikat wtyczki. Jeśli upload się powiedzie, a grafika nie pojawia się na stronie, sprawdź eksport, osadzenie, style i cache.
| Objaw | Co sprawdzić | Następny krok |
|---|---|---|
| WordPress odrzuca upload | Uprawnienie, ustawienie roli i komunikat wtyczki | Sprawdź konfigurację sanitacji |
| Podgląd jest pusty | Zawartość pliku, `viewBox` i błędy przeglądarki | Wyeksportuj prosty plik testowy |
| Kolory są inne niż w projekcie | Atrybuty `fill`, `stroke` i reguły CSS | Sprawdź style motywu i `currentColor` |
| Zmiana nie jest widoczna | Cache witryny, serwera, CDN i przeglądarki | Wyczyść właściwą warstwę cache |
| Grafika znika tylko w jednym miejscu | Sposób osadzenia, filtr treści i ścieżka uploadu | Porównaj bibliotekę z prostą stroną testową |
Rozdziel problem uploadu od problemu renderowania, a następnie sprawdzaj właściwą warstwę.
`viewBox` opisuje wewnętrzny obszar współrzędnych, który pomaga dopasować rysunek do dostępnej przestrzeni. Jeśli grafika jest przycięta albo ma niespodziewane marginesy, porównaj ten obszar z wymiarami eksportu. Gdy zmienia się kolor, sprawdź, czy SVG używa `currentColor` i czy motyw ustawia `color` elementu nadrzędnego.
Jak przetestować SVG przed wdrożeniem na stronie?
Przed publikacją sprawdź ten sam plik w bibliotece mediów, edytorze i na froncie oraz zweryfikuj uprawnienia konta bez prawa uploadu. Test powinien potwierdzić poprawne wyświetlanie i blokadę niedozwolonego przesyłania. Zapisz nazwę pliku testowego, konto i wynik, aby dało się powtórzyć kontrolę.
Checklista obejmuje wszystkie używane sposoby przyjmowania plików:
- Biblioteka mediów: podgląd, wymiary i komunikat sanitizera.
- Edytor i front: rozmiar, wyrównanie, opis alternatywny, kontrast i widok mobilny.
- Uprawnienia: próba uploadu kontem bez wymaganej roli.
- Formularze: pola uploadu wtyczek formularzy, w tym formularze osadzone na stronie.
- Import i integracje: importery mediów, endpointy REST API i własne integracje.
- Cache: aktualny widok po wyczyszczeniu cache, jeśli strona pokazuje starszy plik.
Checklistę wykonaj po wdrożeniu mechanizmu SVG i po zmianie wtyczki, motywu lub integracji obsługującej upload. Dokumentacja Safe SVG opisuje zakres sanitacji i ograniczenia własnych ścieżek, dlatego przed zmianą sprawdź aktualną kartę wtyczki.
Perspektywa KC Mobile
Obsługa SVG jest częścią procesu publikacji mediów, a nie pojedynczym odblokowaniem rozszerzenia. Administrator powinien przypisać właściciela aktualizacji, określić dozwolone role i wskazać formularze oraz integracje przyjmujące pliki. Taki podział ułatwia ustalenie, czy błąd wynika z pliku, uprawnień czy sposobu osadzenia.
Jeśli potrzebujesz uporządkować role, obsługę mediów i proces publikacji, projekt strony internetowej opartej na WordPressie może objąć konfigurację oraz testy po wdrożeniu.
Więcej poradników w tym temacie
Wspomniane narzędzia
Najczęściej zadawane pytania
Jak dodać pliki SVG do WordPress?
Czy przesyłanie SVG do WordPress jest bezpieczne?
Dlaczego WordPress nie pozwala dodać pliku SVG?
Co zrobić, gdy SVG nie wyświetla się na stronie?
Czy do obsługi SVG w WordPress potrzebna jest wtyczka?
Krzysztof Czapnik
Founder & Technical Lead, KC Mobile
Projektuję i rozwijam strony WordPress, sklepy WooCommerce oraz aplikacje internetowe. Łączę projektowanie z programowaniem, integracjami i technicznym SEO. Projekty KC Mobile prowadzę osobiście.
Potrzebujesz pomocy z tym tematem? Napisz - odpowiem osobiście w 24h.
Potrzebujesz pomocy w tym temacie?
Czytasz poradnik „SVG w WordPress: jak dodać grafikę i bezpiecznie jej używać”. Napisz, co chcesz zrobić i na jakim etapie jesteś. Ustalimy, czy możemy pomóc i jaki zakres prac będzie potrzebny.