{"id":8447,"date":"2021-02-19T15:19:55","date_gmt":"2021-02-19T14:19:55","guid":{"rendered":"https:\/\/www.lh.pl\/pomoc\/jak-wgrywac-pliki-svg-w-wordpressie\/"},"modified":"2024-06-13T16:36:36","modified_gmt":"2024-06-13T14:36:36","slug":"svg-w-wordpressie","status":"publish","type":"post","link":"https:\/\/www.lh.pl\/pomoc\/svg-w-wordpressie\/","title":{"rendered":"Jak wgrywa\u0107 pliki SVG w WordPressie"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Chcesz doda\u0107 logo lub inn\u0105 grafik\u0119 w formacie SVG do swojego WordPressa, ale biblioteka medi\u00f3w nie przyjmuje takiego rozszerzenia? Domy\u015blnie nie mo\u017cna wgrywa\u0107 plik\u00f3w SVG w WordPressie, ale istnieje spos\u00f3b, aby takie wsparcie doda\u0107 samodzielnie. Jak to zrobi\u0107 i o czym pami\u0119ta\u0107?<\/strong><\/p>\n\n\n\n

SVG jest formatem grafiki wektorowej, idealnie nadaj\u0105cym si\u0119 do logotyp\u00f3w czy ikon. Obrazy w tym formacie wygl\u0105daj\u0105 dobrze w ka\u017cdej rozdzielczo\u015bci i na ka\u017cdym ekranie. Mo\u017cna je powi\u0119ksza\u0107 bez utraty jako\u015bci. Co wi\u0119cej, obrazy SVG cz\u0119sto wa\u017c\u0105 znacznie mniej ni\u017c odpowiedniki w formatach JPG czy PNG.<\/p>\n\n\n\n

Zanim jednak zaczniesz u\u017cywa\u0107 SVG w WordPressie, warto dowiedzie\u0107 si\u0119 wi\u0119cej na temat samego formatu i reprezentowanej przez niego grafiki wektorowej. Czym s\u0105 obrazy zapisane w formacie SVG? Dlaczego SVG w WordPressie jest domy\u015blnie zablokowane? Czym r\u00f3\u017cni\u0105 si\u0119 pliki SVG od grafik w formatach JPG czy PNG i kiedy warto ich u\u017cywa\u0107? Zobaczmy!<\/p>\n\n\n\n

Czym si\u0119 r\u00f3\u017cni grafika rastrowa od wektorowej?<\/h2>\n\n\n\n

Grafika rastrowa<\/strong> to ta, z kt\u00f3r\u0105 mamy do czynienia najcz\u0119\u015bciej na co dzie\u0144. S\u0105 to typowe zdj\u0119cia i obrazy np. w formatach JPG czy PNG. Sk\u0142adaj\u0105 si\u0119 z okre\u015blonego zbioru pikseli w konkretnych kolorach i s\u0105 zachowane w zdefiniowanej przy zapisie rozdzielczo\u015bci (np. 1920x1080px). Je\u015bli spr\u00f3bujemy je powi\u0119kszy\u0107, b\u0119dzie si\u0119 to wi\u0105za\u0142o z pogorszeniem jako\u015bci szczeg\u00f3\u0142\u00f3w. Im bardziej przybli\u017cymy takie zdj\u0119cie, tym bardziej widoczne stan\u0105 si\u0119 pojedyncze piksele, z kt\u00f3rych obraz si\u0119 sk\u0142ada.<\/p>\n\n\n\n

Grafika wektorowa<\/strong> to z kolei inny typ grafiki, kt\u00f3ry nie sk\u0142ada si\u0119 z okre\u015blonego zbioru pikseli w sta\u0142ej rozdzielczo\u015bci. Tu kompozycja jest zbiorem krzywych, linii oraz punkt\u00f3w, kt\u00f3re tworz\u0105 r\u00f3\u017cnego rodzaju figury geometryczne o r\u00f3\u017cnym kolorze wype\u0142nienia. Wszystkie te elementy s\u0105 matematycznie zdefiniowane i posiadaj\u0105 wsp\u00f3\u0142rz\u0119dne wskazuj\u0105ce ich po\u0142o\u017cenie wzgl\u0119dem siebie. Zalet\u0105 „wektor\u00f3w” jest to, \u017ce mo\u017cesz je powi\u0119ksza\u0107 bez ko\u0144ca i zawsze zachowaj\u0105 idealn\u0105 jako\u015b\u0107, a do tego wa\u017c\u0105 mniej, wi\u0119c szybciej si\u0119 wczytuj\u0105. Opr\u00f3cz mo\u017cliwo\u015bci bezstratnego powi\u0119kszania, nadaj\u0105 si\u0119 tak\u017ce znacznie lepiej do druku.<\/p>\n\n\n\n

Kiedy u\u017cywa si\u0119 grafiki wektorowej?<\/h2>\n\n\n\n

Ten typ grafiki najcz\u0119\u015bciej u\u017cywany jest do przedstawiania logotyp\u00f3w, ikon czy te\u017c r\u00f3\u017cnego rodzaju grafik o mniejszym poziomie szczeg\u00f3\u0142owo\u015bci. St\u0105d wi\u0119kszo\u015b\u0107 ozdobnych grafik wektorowych ma „rysunkowy” charakter. Sk\u0142ada si\u0119 bowiem z figur geometrycznych wype\u0142nionych kolorem lub gradientem.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Natomiast grafiki wektorowej raczej nie u\u017cyjesz do przedstawiania obraz\u00f3w fotorealistycznych. Wymaga\u0142oby to ogromnej z\u0142o\u017cono\u015bci i by\u0142oby nieop\u0142acalne, chocia\u017cby pod k\u0105tem wagi takiego pliku. W przypadku klasycznych zdj\u0119\u0107 znacznie lepiej u\u017cy\u0107 grafiki rastrowej, sk\u0142adaj\u0105cej si\u0119 z okre\u015blonej puli pikse li.<\/p>\n\n\n\n

Czym jest format SVG?<\/h2>\n\n\n\n

No dobrze, wiemy ju\u017c czym jest grafika wektorowa. A gdzie w tym wszystkim pliki SVG, o kt\u00f3rych mowa w artykule? Ju\u017c spiesz\u0119 z wyja\u015bnieniem! SVG to nic innego jak jeden z format\u00f3w grafiki wektorowej, w kt\u00f3rym mo\u017cesz przechowywa\u0107 swoje logotypy, ikony czy inne kreacje wektorowe. Format ten jest u\u017cywany najcz\u0119\u015bciej w\u0142a\u015bnie do tego, aby wy\u015bwietla\u0107 grafik\u0119 wektorow\u0105 na stronach internetowych.<\/p>\n\n\n\n

Wa\u017cn\u0105 informacj\u0105 jest to, \u017ce format SVG jest oparty na j\u0119zyku znacznik\u00f3w XML. Oznacza to, \u017ce w pliku SVG w rzeczywisto\u015bci znajduje si\u0119 kod XML, zawieraj\u0105cy instrukcje potrzebne do wygenerowania naszej grafiki wektorowej. Przegl\u0105darka internetowa (lub program do edycji grafiki wektorowej) po otwarciu pliku SVG odczytuje z niego kod XML, w kt\u00f3rym s\u0105 wsp\u00f3\u0142rz\u0119dne i informacje o u\u017cytych liniach, \u0142ukach, figurach i kolorach. Nast\u0119pnie na tej podstawie generuje i wy\u015bwietla obraz.<\/p>\n\n\n\n

Nie jest to zatem klasyczny obrazek typu JPG czy PNG, a bardziej tekstowy zbi\u00f3r informacji i wytycznych, na podstawie kt\u00f3rych przegl\u0105darka generuje grafik\u0119 wektorow\u0105.<\/p>\n\n\n\n

Dlaczego domy\u015blnie nie mo\u017cna wgrywa\u0107 SVG w WordPressie?<\/h2>\n\n\n\n

WordPress domy\u015blnie nie obs\u0142uguje plik\u00f3w SVG (Scalable Vector Graphics).<\/p>\n\n\n\n

Powody braku domy\u015blnej obs\u0142ugi SVG to:<\/strong><\/p>\n\n\n\n

    \n
  1. Bezpiecze\u0144stwo<\/strong>: Pliki SVG mog\u0105 zawiera\u0107 kod XML, kt\u00f3ry potencjalnie mo\u017ce by\u0107 podatny na ataki XSS (Cross-Site Scripting). WordPress, dbaj\u0105c o bezpiecze\u0144stwo u\u017cytkownik\u00f3w, domy\u015blnie blokuje mo\u017cliwo\u015b\u0107 przesy\u0142ania tych plik\u00f3w.<\/li>\n\n\n\n
  2. Walidacja i Sanityzacja<\/strong>: Ze wzgl\u0119du na r\u00f3\u017cnorodno\u015b\u0107 i z\u0142o\u017cono\u015b\u0107 plik\u00f3w SVG, WordPress wymaga odpowiedniej walidacji i sanityzacji tych plik\u00f3w przed ich wgraniem. Brak domy\u015blnej obs\u0142ugi eliminuje ryzyko zwi\u0105zane z niew\u0142a\u015bciw\u0105 walidacj\u0105.<\/li>\n<\/ol>\n\n\n\n

    Nie oznacza to jednak, \u017ce pliki SVG s\u0105 absolutnie, jednoznacznie niebezpieczne w u\u017cyciu i nale\u017cy ich unika\u0107. Mo\u017cna u\u017cywa\u0107 plik\u00f3w SVG na stronach internetowych, r\u00f3wnie\u017c tych opartych na WordPressie, ale trzeba robi\u0107 to w spos\u00f3b odpowiedzialny. Warto wi\u0119c wiedzie\u0107, jak to zrobi\u0107 dobrze i bezpiecznie.<\/p>\n\n\n\n

    Jak bezpiecznie wgrywa\u0107 pliki SVG w WordPressie?<\/h2>\n\n\n\n

    Dodanie mo\u017cliwo\u015bci wgrywania plik\u00f3w SVG do WordPressa nie jest trudne – wystarczy do tego wtyczka. Wa\u017cne jest jednak to, aby nie instalowa\u0107 pierwszej z brzegu wtyczki, gdy\u017c wi\u0119kszo\u015b\u0107 wtyczek dodaje wsparcie dla SVG w WordPressie w nieprawid\u0142owy spos\u00f3b<\/strong>.<\/p>\n\n\n\n

    Dlaczego robi\u0105 to niepoprawnie? Ot\u00f3\u017c wi\u0119kszo\u015b\u0107 wtyczek do SVG dzia\u0142a w taki spos\u00f3b, \u017ce modyfikuje jedn\u0105 warto\u015b\u0107 w ustawieniach WordPressa, dopisuj\u0105c SVG do listy dozwolonych plik\u00f3w. Owszem, pozwala to wgrywa\u0107 i u\u017cywa\u0107 SVG, ale nie rozwi\u0105zuje wspomnianego wy\u017cej problemu z bezpiecze\u0144stwem.<\/p>\n\n\n\n

    Prawid\u0142owym rozwi\u0105zaniem jest skorzystanie z wtyczki, kt\u00f3ra wykona dwie czynno\u015bci:<\/strong><\/p>\n\n\n\n