Chcesz dodać pliki SVG do twojej witryny WordPress?
Domyślnie WordPress umożliwia przesyłanie prawie wszystkich popularnych formatów obrazków, plików audio i filmów. Jednak SVG nie jest wśród nich. Dzieje się tak, ponieważ istnieją potencjalne obawy dotyczące zabezpieczeń związanych z tym formatem obrazków, ale istnieją bezpieczne sposoby ich wykorzystania.
W tym artykule pokażemy, jak łatwo i bezpiecznie dodać SVG w WordPress.
Czym jest SVG?
SVG lub Scalable Vector Graphics to format pliku, który definiuje grafikę wektorową przy użyciu języka znaczników XML. Główną zaletą SVG jest możliwość powiększania obrazków bez utraty jakości i pikselizacji.
Jak działa SVG?
Scalable Vector Graphics (SVG) to technologia wyświetlania dwuwymiarowych rysunków przy użyciu języka XML. Różnią się one od powszechnie używanych formatów obrazków, takich jak PNG, GIF czy JPG.
Jeśli weźmiesz plik obrazu PNG lub JPG i powiększysz go, powiadomienie zacznie się rozmywać, a obrazek stanie się pikselowaty.
Grafika wektorowa nie wykorzystuje pikseli.
Zamiast tego używają dwuwymiarowej mapy, która definiuje zobaczoną grafikę jako współrzędne. W miarę powiększania obrazek nie ulega pikselizacji, bo po prostu nie może.
Włącza to powiększanie grafiki wektorowej bez utraty jakości. Co najważniejsze, obrazy SVG mogą mieć znacznie mniejszy rozmiar niż pliki PNG lub JPG, co czyni je doskonałym wyborem do formatowania obrazków.
Pamiętaj, że możesz również użyć narzędzi do edycji obraz ków, aby skompresować rozmiary plików w celu zwiększenia szybkości i wydajności Twojego WordPressa.
Grafika wektorowa jest powszechnie stosowana w ikonach, krojach pisma ikon, logo witryn internetowych i obrazkach brandingowych. Możesz chcieć dodać pliki SVG do WordPressa dla logo twojej firmy, ikonek lub innych grafik.
Jakkolwiek fajnie brzmią, pliki SVG mogą być nieco niebezpieczne. Dlatego WordPress domyślnie nie obsługuje przesyłania plików SVG.
Jeśli załadujesz obrazek SVG w WordPress, zobaczysz następujący komunikat o błędzie:
Przepraszamy, ten rodzaj pliku nie jest dozwolony ze względów bezpieczeństwa.
Problemy związane z zabezpieczeniami SVG w WordPressie
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ć dane wyjściowe na ekranie.
Otwiera to jednak twoją witrynę internetową na możliwe luki w zabezpieczeniach XML. Może on zostać wykorzystany do uzyskania nieautoryzowanego dostępu do danych użytkownika, wywołania ataków brute force lub ataków cross-site scripting.
Metody, którymi podzielimy się w tym artykule, będą próbowały sanityzować pliki SVG w celu poprawy ich zabezpieczenia. Wtyczki te nie mogą jednak całkowicie zapobiec przesyłaniu lub wstrzykiwaniu złośliwego kodu.
Najlepszym rozwiązaniem jest korzystanie wyłącznie z plików SVG utworzonych przez wiarygodne źródła i ograniczenie przesyłania plików SVG wyłącznie do zaufanych użytkowników.
Aby dowiedzieć się więcej o zabezpieczeniach, zapoznaj się z naszym kompletnym przewodnikiem po zabezpieczeniach WordPress dla początkujących.
Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo i bezpiecznie korzystać z plików SVG w WordPress przy użyciu jednej z 3 metod.
Film instruktażowy
Jeśli wolisz pisemne instrukcje, czytaj dalej.
Metoda 1. Zezwalanie na pliki SVG w WordPress przy użyciu WPCode (zalecane)
Najprostszym i najłatwiejszym sposobem na bezpieczne zezwolenie na przesyłanie SVG do WordPressa jest użycie WPCode, najpotężniejszej dostępnej wtyczki do fragmentów kodu.
WPCode zawiera dużą bibliotekę wstępnie skonfigurowanych fragmentów kodu, które mogą zastąpić wiele wtyczek jednorazowego użytku na twojej witrynie, od wyłączania stron załączników, korzystania z klasycznego edytora wpisów lub zezwalania na przesyłanie plików SVG.
Najpierw należy zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu, powinieneś przejść do Code Snippets ” Add Snippet w twoim panelu administracyjnym WordPress. Po prostu wyszukaj „svg” i najedź kursorem myszy na „Zezwalaj na przesyłanie plików SVG”.
Następnie możesz kliknąć „Użyj fragmentu kodu”.
Następnie zostaniesz przeniesiony na stronę „Edytuj fragment kodu”, gdzie WPCode skonfigurował już wszystkie ustawienia potrzebne do uruchomienia kodu.
Wystarczy kliknąć przełącznik na „Włączanie”, a następnie nacisnąć przycisk „Aktualizuj”.
Teraz będziesz mógł przesyłać pliki SVG bez otrzymywania komunikatu o błędzie lub ostrzeżenia od WordPress.
Następnie możesz traktować go jak każdy inny obrazek na twojej witrynie internetowej WordPress.
Domyślnie fragment kodu WPCode umożliwia dodawanie plików SVG do WordPressa tylko użytkownikom z rolą Administratora.
Możesz również przyznać uprawnienia wszystkim innym rolom użytkowników, po prostu usuwając linie 14-16 fragmentu kodu widocznego na poniższym obrazku.
Ponadto można je „skomentować”, dodając dwa ukośniki „//” na początku każdej z tych linii, zmieniając ich kolor na jasnobrązowy. WPCode nie wykona żadnego fragmentu kodu, który widzi jako komentarz, a nie kod.
Przykład tego można zobaczyć w liniach 11-13 na poniższym obrazku.
Tak czy inaczej, po usuwaniu kodu wszyscy użytkownicy będą mogli przesyłać pliki SVG na twoją witrynę WordPress. Pamiętaj tylko, aby kliknąć „Aktualizuj”, aby zapisać wszelkie wprowadzone zmiany.
Metoda 2. Przesyłanie plików SVG w WordPress przy użyciu pomocy technicznej SVG
Ta metoda wykorzystuje wtyczkę SVG Support i umożliwia wyświetlanie wbudowanych plików SVG we wpisach i na stronach WordPress, a także kontrolowanie, kto ma uprawnienia do ich przesyłania.
Najpierw należy zainstalować i włączyć wtyczkę SVG Support. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu należy przejść na stronę Ustawienia ” Pomoc techniczna SVG, aby skonfigurować ustawienia wtyczki.
Na stronie ustawień należy zaznaczyć pole obok opcji „Restrict to Administrators?”. Pozwoli to tylko administratorowi witryny na przesyłanie plików SVG w WordPress.
Kolejną opcją jest włączenie trybu zaawansowanego. Tę opcję należy zaznaczyć tylko wtedy, gdy chcemy korzystać z zaawansowanych funkcji, takich jak animacje CSS i renderowanie SVG inline.
Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać twoje ustawienia.
Możesz teraz utworzyć nowy wpis lub edytować istniejący. W edytorze wpisów prześlij swój plik SVG tak, jak każdy inny plik z obrazkiem. Wystarczy dodać blok obrazka do edytora, a następnie przesłać plik SVG.
Teraz będziesz mógł przesyłać i osadzać pliki SVG w WordPress.
Metoda 3. Przesyłanie plików SVG w WordPress przy użyciu Safe SVG
Ta metoda również wykorzystuje wtyczkę i pozwala przeprowadzić sanityzację plików SVG przesłanych do WordPressa.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki Safe SVG. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Wtyczka działa po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania. Możesz po prostu zacząć przesyłać pliki SVG.
Minusem jest to, że ta wtyczka pozwala na przesyłanie plików SVG przez wszystkich użytkowników, którzy mogą wpisywać wpisy na twojej witrynie WordPress. Aby kontrolować, kto może przesyłać pliki, należy zakupić wersję premium wtyczki.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak bezpiecznie dodawać pliki SVG w WordPress. Warto również zapoznać się z naszym artykułem na temat poprawek najczęstszych problemów z obrazkami w WordPressie oraz najlepszych wtyczek i narzędzi SEO.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Eugene Velasquez says
I have added all the SVG plugins but still am being blocked from adding SVGs, which I have created on my own so there is no risk or malicious code. Is there another way to add the SVG files to wordpress?
WPBeginner Support says
If even the plugins do not allow you to add SVGs to your site, we would recommend reaching out to your hosting provider to ensure they do not have a security setting that may be overriding your WordPress.
Administrator
Felix Krusch says
Since the inception of Blocks you can just add SVG code in a „Custom HTML Block”. No snippet plugin necessary anymore.
WPBeginner Support says
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
Administrator
sn says
Hi,
Thanks for your articles.
Usually I refer to you website and I learn many things from it.
Here you wrote using svg files in websites is not safe.
My question is that if I create the svg file myself from adobe illustrator or similar software,
is it again unsafe to put it in my website?
and should I use safe svg plugin?
Thanks!
WPBeginner Support says
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.
Administrator
sn says
Do you mean there will be no vulnerabilities in such case?
WPBeginner Support says
The vulnerabilities to worry about would be if you add an SVG from an unknown source that could have added malicious code.
sn says
Thank you very much for your answer.
mr waghela says
thank you sir for share best info
WPBeginner Support says
Glad our guide was helpful
Administrator
Alan Smith says
Thanks a lot
WPBeginner Support says
You’re welcome
Administrator
Amandine says
Hi, I have successfully uploaded the SVG plugin and can upload my SVG file but at the point of cropping the logo, I cannot crop it and therefore it does not appear on my website. It appears nice and crisp on the side customising panel on the left but not on the website. Whereas if I upload a PNG file, the cropping works and it appears on the customising panel as well as the website. Please could you let me know if there’s anything I need to do for my SVG logo to appear on the website? Thank you
WPBeginner Support says
You would need to edit your SVG using something other than your WordPress site to crop it to the size you’re wanting
Administrator
pushkraj says
I want to upload a svgz (svg compressed) but I get an error of security reasons. Although I can upload SVG. format without any problem but I need svgz in order to reduce the file size. Please help me with my query.
Thank you.
WPBeginner Support says
To allow that file type, you would want to take a look at our guide here: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Administrator
Brian says
Hello WPBeginner,
I added the plugin Safe SVG to my website but it seems my SVG files get broken uploaded. I cannot use them. How is this possible?
WPBeginner Support says
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
Administrator
Huu Tai says
Thank for a fully covered info,
I wonder if I could use SVG Support to upload the web logo?
WPBeginner Support says
So long as your theme does not specifically override this, you should be able to.
Administrator
Scott says
I understand the complexity of converting pixel images to mathematical.
Has there come along a fairly simple or automated method or program to convert jpegs and .png images to SVG?
Editorial Staff says
Hey Scott,
Not that we are aware of yet.
Administrator
Cactoos says
As far as I tried, inkscape can do exactly that. It’s free and it works in windows, Mac, and Linux.
Gimp, illustrator, and I’m not that sure, but maybe krita can do this also.
Gimp and krita are also free and multi OS.
Indeed I converted a pretty heavy and high quality photo to svg (previous jpg image direct from the photo camera) and it worked flawlessly, it took his time, but it works. It might be because I’m in a pretty weak system.
Salman Ravoof says
Almost all vector editing software have that functionality. Both Inkscape and Illustrator can do it. However, the results won’t be as good if you have complex shapes and a lot of colours (all real life images come under this) . This functionality is best used for images which have less than 4 colours, the lesser the better.