75 / 100

WordPress obsługuje wiele formatów graficznych. Najbardziej Wam znane to PNG I JPG, ale jest jeszcze sporo innych. Zaliczają się one do grupy grafik rastrowych, które w skrócie są obrazami składającymi się z pikseli. Wadą tego formatu jest, iż przy próbie zwiększenia rozmiaru tracą na jakości. Obrazowo tłumacząc, dzieje się to ponieważ piksele próbują się namnożyć. Algorytm nadaje im kolor na podstawie sąsiadujących.

W pewnych przypadkach na ratunek przychodzi grafika wektorowa inaczej nazywaną grafiką obiektową. Spowodowane jest tym, że obraz opisany jest za pomocą figur geometrycznych (w przypadku grafiki dwuwymiarowej) lub brył geometrycznych (w przypadku grafiki trójwymiarowej). Daje to niewyobrażalną elastyczność. Wadą natomiast jest to, że nie da się za jej pomocą stworzyć obrazu przypominającego rzeczywistość. Jednak idealnie się sprawdza do logotypów, ikon, ilustracji czy infografik.

SVG:

webmasterki logo tworzenie stron internetowych 1

JPG:

SVG (ang. Scalable Vector Graphics) oparty jest na XML (ang. Extensible Markup Language), czyli na uniwersalnym języku znaczników. Co daje możliwość umieszczania go na stronach w pierwotnej postaci.

WordPress domyślnie nie obsługuje przesyłania plików SVG ze względu, iż niosą ze sobą pewne niebezpieczeństwa.

Pliki SVG niosą ze sobą z tego powodu pewne niebezpieczeństwo. Dlatego WordPress domyślnie nie obsługuje przesyłania plików SVG.

Jeśli podejmie się próbę przesłania obrazu SVG w WordPress, pojawi się następujący komunikat o błędzie:

Przepraszamy, ze względów bezpieczeństwa ten typ pliku nie jest dozwolony.

Przepraszamy ze wzgledow bezpieczenstwa ten typ pliku nie jest dozwolony

Jest to spowodowane tym, że XML jest podobny do HTML (podstawowy język wykorzystywany w pisaniu stron) i umożliwia to tworzenie luk w bezpieczeństwie.

Poniższe metody będą próbować oczyścić pliki SVG w celu poprawy ich bezpieczeństwa. Jednak te wtyczki nie mogą całkowicie zapobiec przesłaniu lub wstrzyknięciu złośliwego kodu.

Dlatego najważniejsze jest to, aby użyć pliku z pewnego źródła.

Jak dodać obsługę plików SVG w WordPress?

Wtyczka nr 1

SVG Support – WordPress plugin WordPress org

Wtyczka SVG Support umożliwia dodanie plików SVG i wyświetlanie ich w bibliotece mediów.

Zaznaczenie opcji Restrict to Administrators – Ogranicza możliwość dodania plików tylko dla administratora.

Load frontend CSS – bardzo mały fragment kodu, który w niektórych przypadkach pomaga w wyświetlaniu plików SVG na interfejsie użytkownika.

Enable Advanced Mode – domyślnie pliki SVG używane są jako pliki obrazów. Włączenie tej funkcji umożliwia korzystanie z nich w stopniu zaawansowanym.

SVG Support Settings and Usage ‹ Webmasterki pl — WordPress

Tryb zaawansowany daje możliwość:

  • umieszczenie skryptu po zamykającym znacznikiem body zamiast header,
  • użycie rozszerzonego pliku JS zamiast zminimalizowanego pliku JS,
  • nadanie własnej klasy CSS i usunie domyślnie klasy WordPressa.
SVG Support Settings and Usage ‹ Webmasterki pl — WordPress 1 2

Wtyczka nr 2

Safe SVG – WordPress plugin WordPress

Wtyczka SVG safe wyposażona jest w funkcję automatycznego czyszczenia i wyświetla pliki w bibliotece mediów.

Wadą jest to, że ta wtyczka w wersji darmowej umożliwia przesyłanie plików SVG przez wszystkich użytkowników, którzy mogą pisać posty w witrynie WordPress.

Funkcje Pro (premium – £39.00):

  • optymalizacja SVGO – zaoszczędzenie miejsca,
  • ograniczenie przesyłania plików SVG do określonych ról użytkowników witryny WordPress,
  • wsparcie Premium.

BONUS – Optymalizacja pliku SVG samodzielnie i za darmo

  1. Pobierzcie i zainstalujcie darmowy program Visual Studio Coder https://code.visualstudio.com/Download
  2. Uruchomicie program Visual Studio Coder
  3. Należy użyć skrótu klawiszowego ctr+shift+x lub przejdź View>Extensions
optymalizacja SVG
  1. W lewym górnym rogu otworzy się wyszukiwarka rozszerzeń (extensions) – Należy wpisać w nią SVG. Wybierzcie pierwszy od góry składający się jedynie z liter ”SVG”. Po prawej stronie pokaże się żółte logo. Wydawca to jock. Znajduje się tam mały przycisk instal. Należy go kliknąć.
Optymalizacja svg 2
  1. Teraz należy otworzyć własny plik SVG File>Open File.
Optymalizacja svg 3
  1. Teraz niezbędnie jest pozłużenie się skrótem  klawiszowym ctr+shift+p
  2. Otworzy się mała lista. Należy wpisać minify svg, a następnie kliknąć w odszukany wynik na liście.
Optymalizacja svg 4
  1. Po kilku sekundach znikną wszystkie zbędne znaki i spowoduje to zmniejszenie wielkości pliku.

Pierowty plik: 23KB. Po optymalizacji: 12KB.

Istnieją optymalizatory online jednak póki co nie jestem wstanie polecić w 100% bezpiecznego.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Korzystając z formularza zgadzasz się na przechowywanie i przetwarzanie Twoich danych przez tę witrynę w celu umieszczenia na niej Twojego komentarza.