Dodawanie plików SVG do witryny WordPress może sprawić, że Twoje obrazy będą wyglądać ostro i wyraźnie.
Jednakże, chociaż WordPress pozwala na przesyłanie wielu typów plików, takich jak obrazy, audio i wideo, domyślnie nie obsługuje plików SVG.
Dzieje się tak, ponieważ pliki SVG mogą stanowić ryzyko bezpieczeństwa. Ale nie martw się. Istnieją bezpieczne sposoby korzystania z SVG.
W tym artykule pokażemy Ci, jak łatwo i bezpiecznie dodawać pliki obrazów SVG do WordPressa.
Co to jest SVG?
SVG, czyli Scalable Vector Graphics, to format pliku definiujący grafiki wektorowe przy użyciu języka znaczników XML. Jego główną zaletą jest to, że pozwala na powiększanie obrazów bez utraty jakości lub pikselizacji.
Jak działa SVG?
Scalable Vector Graphics (SVG) to technologia wyświetlająca dwuwymiarowe rysunki przy użyciu XML. Różni się od powszechnie używanych formatów obrazów, takich jak PNG, GIF lub JPG.
Jeśli powiększysz plik obrazu PNG lub JPG, zauważysz, że obraz stanie się rozmazany i z pikselowany.
Grafika wektorowa nie używa pikseli.
Zamiast tego używają dwuwymiarowej mapy, która definiuje wyświetlaną grafikę jako współrzędne. Obraz nie pikseluje się podczas powiększania, ponieważ po prostu nie może.
Umożliwia to powiększanie grafiki wektorowej bez utraty jakości. Co najważniejsze, obrazy SVG mogą mieć znacznie mniejszy rozmiar pliku niż pliki PNG lub JPG, co czyni je doskonałym wyborem do formatowania obrazów.
Grafika wektorowa jest powszechnie używana do ikon, fontów ikon, logo stron internetowych i obrazów brandingowych. Możesz chcieć dodać pliki SVG do WordPressa dla logo swojej firmy, ikon lub innych grafik.
Jednak pliki SVG mogą być nieco niebezpieczne. Dlatego WordPress domyślnie nie obsługuje przesyłania plików SVG.
Jeśli prześlesz obraz SVG w WordPress, zobaczysz następujący komunikat o błędzie: „Przepraszamy, ten typ pliku nie jest dozwolony ze względów bezpieczeństwa.”
Problemy z bezpieczeństwem dotyczące SVG w WordPress
Pliki SVG zawierają kod w języku znaczników XML, który jest podobny do HTML. Twoja przeglądarka lub oprogramowanie do edycji SVG analizuje język znaczników XML, aby wyświetlić wynik na ekranie.
Jednak otwiera to Twoją witrynę na możliwe luki XML. Może być używane do uzyskania nieautoryzowanego dostępu do danych użytkowników lub wywołania ataków typu brute force lub ataków typu cross-site scripting.
Metody, które udostępnimy w tym artykule, będą próbowały oczyścić pliki SVG w celu poprawy ich bezpieczeństwa. Jednak te wtyczki nie mogą całkowicie zapobiec złośliwemu kodowi przed przesłaniem lub wstrzyknięciem.
Najlepszym rozwiązaniem jest używanie tylko plików SVG stworzonych przez wiarygodne źródła i ograniczanie przesyłania plików SVG do zaufanych użytkowników. Aby dowiedzieć się więcej o bezpieczeństwie, możesz zapoznać się z naszym kompletnym przewodnikiem po bezpieczeństwie WordPress dla początkujących.
Mając to na uwadze, pokażemy Ci, jak łatwo i bezpiecznie używać plików SVG w WordPress za pomocą 3 metod. Po prostu skorzystaj z poniższych szybkich linków, jeśli interesuje Cię konkretna metoda:
- Metoda 1. Pozwól na pliki SVG w WordPress za pomocą WPCode (zalecane)
- Metoda 2. Przesyłanie plików SVG w WordPressie za pomocą SVG Support
- Metoda 3. Przesyłanie plików SVG w WordPress za pomocą Safe SVG
Wskazówka eksperta: Zanim zdecydujesz się na użycie plików graficznych SVG, nie zapominajmy, że możesz również użyć narzędzi do edycji obrazów, aby skompresować rozmiary plików i zwiększyć szybkość i wydajność Twojego WordPressa.
Gotowi? Zacznijmy od samouczka wideo.
Samouczek wideo
Jeśli wolisz instrukcje pisemne, po prostu czytaj dalej.
Metoda 1. Pozwól na pliki SVG w WordPress za pomocą WPCode (zalecane)
Najprostszym sposobem na bezpieczne przesyłanie plików SVG do WordPressa jest użycie WPCode, najpotężniejszej dostępnej wtyczki do fragmentów kodu.
WPCode posiada dużą bibliotekę prekonfigurowanych fragmentów kodu, które mogą zastąpić wiele jednorazowych wtyczek na Twojej stronie. Zawiera fragmenty do wyłączania stron załączników, zachowania Klasycznego Edytora Postów oraz umożliwienia przesyłania plików SVG, a wszystko to bez ryzyka uszkodzenia Twojej witryny.
Aby rozpocząć, musisz zainstalować i aktywować darmową wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź do panelu administracyjnego WordPress w sekcji Fragmenty kodu » Dodaj fragment. Wyszukaj „svg” i najedź kursorem myszy na „Allow SVG Files Upload” (Zezwól na przesyłanie plików SVG).
Kliknij „Użyj fragmentu”, gdy się pojawi.
Następnie przejdziesz do strony „Edytuj fragment”, gdzie WPCode już skonfigurował wszystkie ustawienia potrzebne do uruchomienia kodu.
Wszystko, co musisz zrobić, to kliknąć przełącznik na „Aktywny”, a następnie nacisnąć przycisk „Zaktualizuj”.
Teraz możesz przesyłać pliki SVG bez otrzymywania od WordPressa komunikatu o błędzie lub ostrzeżeniu.
Następnie możesz traktować ją jak każdy inny obraz w swojej witrynie WordPress.
Domyślnie fragment WPCode pozwala na dodawanie plików SVG do WordPress tylko użytkownikom z rolą „Administrator”.
Możesz również nadać uprawnienia wszystkim innym rolom użytkowników, usuwając linie 14-16 fragmentu kodu. Następnie możesz je „zakomentować”, dodając dwa ukośniki, „//”, na początku linii 11-13, co zmieni ich kolor na jasnobrązowy.
WPCode nie wykona żadnej części fragmentu, którą uzna za komentarz, a nie kod. Ten przykład można zobaczyć na poniższym obrazku.
Tak czy inaczej, po usunięciu kodu, wszyscy użytkownicy mogą przesyłać pliki SVG do Twojej witryny. Pamiętaj tylko, aby kliknąć „Aktualizuj”, aby zapisać wszelkie wprowadzone zmiany.
Metoda 2. Przesyłanie plików SVG w WordPressie za pomocą SVG Support
Druga metoda wykorzystuje wtyczkę SVG Support. Pozwala ona na wyświetlanie SVG w postach i stronach WordPressa oraz kontrolowanie, kto może je przesyłać.
Najpierw musisz zainstalować i aktywować wtyczkę SVG Support. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji będziesz chciał przejść do Ustawienia » Obsługa SVG, aby skonfigurować ustawienia wtyczki.
Na stronie ustawień po prostu zaznacz pole obok opcji „Ogranicz do administratorów?”. Pozwoli to tylko administratorowi witryny na przesyłanie plików SVG w WordPressie.
Następnym krokiem jest włączenie trybu zaawansowanego. Musisz zaznaczyć tę opcję tylko wtedy, gdy chcesz korzystać z zaawansowanych funkcji, takich jak animacje CSS i renderowanie SVG w linii.
Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zachować swoje ustawienia.
Możesz teraz utworzyć nowy wpis lub edytować istniejący. W edytorze wpisów będziesz mógł przesłać swój plik SVG, tak jak przesyłałbyś jakikolwiek inny plik obrazu.
Po prostu dodaj blok obrazu do edytora, a następnie prześlij plik SVG.
Metoda 3. Przesyłanie plików SVG w WordPress za pomocą Safe SVG
Ta metoda również wykorzystuje wtyczkę i pozwala na czyszczenie plików SVG przesyłanych do WordPressa.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Safe SVG. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym jak zainstalować wtyczkę WordPress.
Wtyczka działa od razu po instalacji i nie wymaga żadnych ustawień. Możesz po prostu zacząć przesyłać pliki SVG.
Wadą jest to, że ta wtyczka pozwala na przesyłanie plików SVG przez wszystkich użytkowników, którzy mogą pisać posty na Twojej stronie WordPress. Aby kontrolować, kto może przesyłać pliki, musisz kupić wersję premium wtyczki.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak bezpiecznie dodawać pliki SVG w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat jak dodać widżet do nagłówka Twojej strony internetowej oraz naszymi ekskluzywnymi wyborami przydatnych fragmentów kodu dla początkujących.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Dennis Muthomi
Przełączyłem klienta z logo PNG na SVG. Różnica w szybkości była niesamowita, zwłaszcza na urządzeniach mobilnych!
Szybka wskazówka z mojego doświadczenia: Zawsze twórz kopię zapasową w formacie PNG i używaj elementu „picture” w swoim kodzie. W ten sposób masz zapewnioną kompatybilność ze starszymi przeglądarkami, jednocześnie korzystając ze wszystkich zalet SVG w nowoczesnych.
Naprawdę doceniam też wskazówki dotyczące bezpieczeństwa – są one niezwykle ważne podczas pracy z witrynami klientów!
Jiří Vaněk
Kiedyś czytałem ciekawy artykuł o tym, dlaczego pliki SVG mogą być niebezpieczne. Jednak zanim miałem tę informację, ciągle zmagałem się z WordPressem, który odmawiał przesyłania SVG, i byłem bardzo sfrustrowany. Mam ikony dla sieci w formacie SVG. Jednak WPCode i prosty fragment kodu naprawdę mi pomogły. To proste i funkcjonalne rozwiązanie, z którym poradzi sobie każdy, nawet kompletny początkujący.
Eugene Velasquez
Dodałem wszystkie wtyczki SVG, ale nadal nie mogę dodawać plików SVG, które sam stworzyłem, więc nie ma żadnego ryzyka ani złośliwego kodu. Czy jest inny sposób na dodanie plików SVG do WordPress?
Wsparcie WPBeginner
Jeśli nawet wtyczki nie pozwalają na dodawanie SVG do Twojej witryny, zalecamy skontaktowanie się z dostawcą hostingu, aby upewnić się, że nie mają ustawienia bezpieczeństwa, które może nadpisywać Twojego WordPressa.
Admin
Felix Krusch
Od momentu wprowadzenia Bloków możesz po prostu dodać kod SVG w „Bloku niestandardowego HTML”. Wtyczka snippet nie jest już potrzebna.
Wsparcie WPBeginner
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Admin
sn
Cześć,
Dziękuję za Twoje artykuły.
Zazwyczaj odwiedzam Twoją stronę internetową i uczę się z niej wielu rzeczy.
Tutaj napisałeś, że używanie plików SVG na stronach internetowych nie jest bezpieczne.
Moje pytanie brzmi, czy jeśli sam stworzę plik SVG z programu Adobe Illustrator lub podobnego,
czy nadal jest niebezpieczne umieszczenie go na mojej stronie internetowej?
i czy powinienem użyć wtyczki Safe SVG?
Dzięki!
Wsparcie WPBeginner
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Admin
sn
Czy masz na myśli, że w takim przypadku nie będzie żadnych luk?
Wsparcie WPBeginner
Podatności, o których należy się martwić, wystąpiłyby, gdybyś dodał SVG z nieznanego źródła, które mogło dodać złośliwy kod.
sn
Dziękuję bardzo za odpowiedź.
Pan Waghela
dziękuję panu za udostępnienie najlepszych informacji
Wsparcie WPBeginner
Glad our guide was helpful
Admin
Alan Smith
Thanks a lot
Wsparcie WPBeginner
You’re welcome
Admin
Amandine
Cześć, pomyślnie zainstalowałem wtyczkę SVG i mogę przesłać mój plik SVG, ale w momencie przycinania logo nie mogę go przyciąć, dlatego nie pojawia się na mojej stronie internetowej. Wygląda ładnie i wyraźnie na panelu dostosowywania po lewej stronie, ale nie na stronie internetowej. Natomiast jeśli prześlę plik PNG, przycinanie działa i pojawia się zarówno na panelu dostosowywania, jak i na stronie internetowej. Czy mógłbyś mi powiedzieć, czy jest coś, co muszę zrobić, aby moje logo SVG pojawiło się na stronie internetowej? Dziękuję.
Wsparcie WPBeginner
Musiałbyś edytować swoje SVG za pomocą czegoś innego niż Twoja witryna WordPress, aby przyciąć je do pożądanego rozmiaru
Admin
pushkraj
Chcę przesłać plik svgz (skompresowany svg), ale otrzymuję błąd z powodów bezpieczeństwa. Chociaż mogę bez problemu przesłać format SVG, potrzebuję svgz, aby zmniejszyć rozmiar pliku. Proszę o pomoc w mojej sprawie.
Dziękuję.
Wsparcie WPBeginner
Aby zezwolić na ten typ pliku, zapoznaj się z naszym przewodnikiem tutaj: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Admin
Brian
Witaj WPBeginner,
Dodałem wtyczkę Safe SVG do mojej strony internetowej, ale wygląda na to, że moje pliki SVG są uszkodzone po przesłaniu. Nie mogę ich używać. Jak to jest możliwe?
Wsparcie WPBeginner
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Admin
Huu Tai
Dziękuję za wyczerpujące informacje,
Zastanawiam się, czy mógłbym użyć SVG Support do przesłania logo strony internetowej?
Wsparcie WPBeginner
Dopóki Twój motyw nie nadpisuje tego konkretnie, powinieneś być w stanie.
Admin
Scott
Rozumiem złożoność konwersji obrazów rastrowych na matematyczne.
Czy pojawiła się jakaś dość prosta lub zautomatyzowana metoda lub program do konwersji plików jpeg i .png do SVG?
Personel redakcyjny
Hej Scott,
Przynajmniej nic nam o tym nie wiadomo.
Admin
Cactoos
Z tego, co próbowałem, Inkscape potrafi dokładnie to zrobić. Jest darmowy i działa na Windows, Mac i Linux.
Gimp, Illustrator, a nie jestem pewien, ale może Krita też to potrafi.
Gimp i Krita są również darmowe i wieloplatformowe.
Rzeczywiście przekonwertowałem dość ciężkie i wysokiej jakości zdjęcie do formatu SVG (wcześniej obraz JPG bezpośrednio z aparatu fotograficznego) i zadziałało bezbłędnie, zajęło to trochę czasu, ale działa. Może to być spowodowane tym, że mam dość słaby system.
Salman Ravoof
Prawie wszystkie programy do edycji grafiki wektorowej mają taką funkcjonalność. Zarówno Inkscape, jak i Illustrator potrafią to zrobić. Jednak wyniki nie będą tak dobre, jeśli masz skomplikowane kształty i wiele kolorów (wszystkie obrazy z życia codziennego podpadają pod tę kategorię). Ta funkcjonalność najlepiej sprawdza się w przypadku obrazów z mniejszą liczbą niż 4 kolory, im mniej, tym lepiej.