Jak korzystać z SVG w WordPress

Pomimo standaryzacji SVG na początku 2000 roku, bardzo atrakcyjny format obrazu nie ujrzał zbyt wiele światła dziennego z powodu słabej obsługi przeglądarki. Wszystko to zmieniło się drastycznie w ostatnich latach, ponieważ SVG szybko staje się de facto formą obrazu w sieci.

I nie tylko graficy zakochują się w SVG, ale także użytkownicy WordPressa, którzy chcą przyspieszyć swoje blogi poprzez zmniejszenie ogólnego rozmiaru obrazu. W tym poście omówimy temat korzystania z SVG w witrynie opartej na WordPressie.

Co to jest SVG?

SVG (Scalable Vector Graphics) to oparty na XML format obrazu do wyświetlania grafiki w Internecie i aplikacjach. Zasadniczo plik SVG jest po prostu zbiorem kodu XML, który określa różne kształty i kolory używane w obrazie SVG.

A ponieważ możesz otwierać pliki SVG za pomocą edytora tekstu, łatwo jest również dokonywać dostosowań za pomocą podstawowego kodu CSS3 i JS. W rezultacie pliki SVG są bardzo lubiane przez współczesnych użytkowników sieci ze względu na ich wszechstronną elastyczność.

Co najważniejsze, W3C uznaje SVG za wiodący w branży standard. Tak więc SVG współpracuje bezbłędnie z innymi technologiami internetowymi, takimi jak DOM, HTML i tak dalej.

Dlaczego SVG jest ważne?

Obrazy SVG są oparte na wektorach, dzięki czemu obraz SVG może być skalowany w nieskończoność na ekranie bez utraty jakości. Podstawową interakcją w tym zakresie jest XML przeglądarki; gdzie Przeglądarka wykreśla specyfikację XML przy każdym zwiększeniu lub zmniejszeniu.

Nie trzeba dodawać, że pliki SVG są znacznie bardziej elastyczne niż tradycyjne formaty, takie jak PNG czy JPEG. A bezpośrednia interakcja między CSS i JavaScript oznacza, że ​​możesz dostosowywać swoje obrazy SVG w podróży. Ma to kluczowe znaczenie, gdy pracujesz nad nowym projektem lub w inny sposób.

Jeśli chodzi o wydajność, obrazy SVG mają zwykle znacznie mniejszy rozmiar niż jakiekolwiek odpowiedniki. W rezultacie często można zobaczyć ilustracje, logo i ikony zbudowane jako grafika wektorowa. Doprowadziło to również do powstania wielu czcionek ikon, o których pokrótce wspomnimy w dalszej części artykułu.

Krótko mówiąc, pliki SVG zapewniają elastyczność, zmniejszony rozmiar obrazu i mocną podstawę do poprawy wydajności obrazu w witrynie WordPress.

Jak tworzone są obrazy SVG?

Tworzenie obrazów SVG może odbywać się na dwa sposoby: pisanie „kodu” i korzystanie z nowoczesnego oprogramowania do projektowania graficznego. Pierwsza metoda, czyli napisanie skryptu XML, jest tradycyjnym sposobem budowania plików SVG, ale może okazać się techniką powolną i nieefektywną.

Prosty zbiór kwadratów może wyglądać mniej więcej tak w formacie XML:

Jak widać, pisanie tego w sposób powtarzalny dla złożonej grafiki jest tym samym, co strzelanie sobie w stopę.

Inną metodą jest użycie oprogramowania i jest to najszybszy i najbardziej wydajny sposób budowania grafiki SVG. Dzięki oprogramowaniu opartemu na wektorach możesz skupić się na tworzeniu grafiki, a później na eksportowaniu jej jako gotowych plików SVG.

Affinity Designer to dobrze znany profesjonalny program do edycji wektorów, podobnie jak programy takie jak Adobe Illustrator, Sketch, Figma i Inkscape.

Bez względu na to, z jakim oprogramowaniem zdecydujesz się skorzystać, jedyną rzeczą, która naprawdę się liczy, są Twoje plany dotyczące rodzaju grafiki, którą chcesz stworzyć. Funkcjonalność eksportu działa tak samo we wszystkich nowoczesnych programach.

Nie trzeba dodawać, że SVG jest zawsze tą samą strukturą XML. Możesz więc używać obrazów SVG zarówno jako dokumentu, jak i wstawiać go w tekście.

Czy WordPress obsługuje SVG?

Choć może to zabrzmieć dziwnie, platforma z zakresem WordPress w rzeczywistości nie obsługuje formatu pliku SVG. Ale tylko z powodu poważnych obaw o bezpieczeństwo.

Widzisz, w przeciwieństwie do typów plików PNG/JPG/GIF — SVG nie jest zrasteryzowanym obrazem, ale wektorem. W rezultacie SVG jest narażone na ryzyko wykorzystania JavaScript, a WordPress domyślnie nie zezwala na korzystanie z SVG w WordPressie. Ma to sens ze wszystkich punktów widzenia.

Mimo że współtwórcy WordPressa rozmawiali o SVG od wielu lat, istnieje zbyt wiele aspektów, z którymi trzeba się zmierzyć, aby zapobiec problemom z bezpieczeństwem na dużą skalę.

Jedynym sposobem na obejście tego jest użycie wtyczek lub włączenie SVG jako formatu pliku za pomocą funkcji motywu.

Jak włączyć obrazy SVG w witrynie WordPress?

Zanim przejdziemy do części wtyczek, możesz włączyć SVG w WordPressie za pomocą pliku functions.php w katalogu motywów. Jest to zdecydowanie najszybszy sposób, ale także najmniej bezpieczny, ponieważ włączasz SVG w formacie raw.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$new_filetypes = array();
$new_filetypes['svg'] = 'obraz/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );

zwróć $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

A drugą — bezpieczniejszą — opcją jest korzystanie z wtyczek. Oto trzy z najbardziej znanych wtyczek do włączania SVG w WordPress.

Wsparcie SVG

Dodanie obsługi SVG to połowa sukcesu, możesz także dodać niestandardową stylizację, efekty animacji i włączyć ograniczenia. Ale żeby to wszystko zrobić, potrzebujesz wsparcia.

Dzięki obsłudze SVG — możesz zacząć dodawać pliki SVG do swoich postów i stron za pomocą tradycyjnego tagu Image. Np. Możesz dodać nową klasę CSS do swoich obrazów: „style-SVG”, która pobierze przesłany obraz SVG i wyrenderuje jego zawartość na wbudowanym wyświetlaczu.

Główne cechy tej wtyczki to:

• Włącz zarządzanie plikami SVG w Bibliotece multimediów WordPress.
• Konwertuj przesłane obrazy SVG na kod wbudowany.
• Obsługuje widżet obrazu do dodawania znaczników Alt i Caption do wszystkich obrazów SVG.
• Stylizuj poszczególne obrazy SVG za pomocą niestandardowego CSS.
• Implementuj efekty animacji za pomocą CSS3 i JavaScript.
• Szczegółowe strony ustawień w panelu wtyczki.
• Wymuszaj dostęp na podstawie uprawnień. Np. Ogranicz przesyłanie tylko do kont z uprawnieniami administratora.

Słowo ostrzeżenia, że ​​pomimo tego, co oferuje ta wtyczka, ryzyko wykorzystania SVG jest dość realne. Nie włączaj zarządzania plikami SVG dla użytkowników, którym nie ufasz. Dlatego najlepiej byłoby włączyć tę funkcję tylko dla użytkowników na poziomie administratora.

Przypomnijmy, że każdy, kto ma uprawnienia do przesyłania, może przesyłać nowe pliki SVG, ale ponieważ pliki SVG są oparte na XML — są podatne na wykorzystywanie przez złośliwe wstrzyknięcia i inne.

Bezpieczny SVG

Safe SVG to jedna wtyczka, która zapewni Ci spokój ducha, jeśli chodzi o martwienie się o potencjalne zagrożenia bezpieczeństwa. Wtyczka została stworzona specjalnie w celu oczyszczenia wszelkich nowych przesyłanych plików SVG i zapobiegania złośliwym zamiarom. Co więcej, Safe SVG dodaje możliwość sprawdzenia, jakie pliki SVG zostały przesłane za pośrednictwem biblioteki multimediów.

Dzięki 50 000 aktywnych użytkowników możesz liczyć na Safe SVG, aby zapewnić znakomite wyniki w zakresie bezpiecznej wydajności. Warto zauważyć, że istnieją dwie różne wersje tej wtyczki; bezpłatne i płatne.

Darmowa wersja zawiera funkcję oczyszczania nowych przesłanych plików, a także dodaje obsługę przeglądania SVG w Bibliotece multimediów.

Jeśli wybierzesz wersję Pro, otrzymasz dodatkowe funkcje, takie jak optymalizacja SVO. Ta technika optymalizacji jeszcze bardziej zmniejszy rozmiar przesyłanych plików SVG.

Ponadto dzięki Pro możesz wybrać, kto może, a kto nie może przesyłać nowych plików SVG. W rezultacie możesz ograniczyć dostęp tylko do określonych użytkowników. I wreszcie, kupując wtyczkę, uzyskujesz dostęp do wsparcia premium — uzyskaj odpowiedzi na swoje pytania, kiedy najbardziej tego potrzebujesz.

Dodaj pełną obsługę SVG

Pierwsze dwie wtyczki, które wymieniliśmy, powinny osiągać rozsądne wyniki. Ale jeśli podoba Ci się pomysł dodania SVG do swojej witryny za pomocą Shortcodes, sprawdź tę wtyczkę.

Ta wtyczka dodaje trochę funkcjonalności SVG do twojego WordPressa i wykorzystuje technikę SVG opartą na pomyśle Alexeya Tena. Ten sposób włączania obrazów SVG do HTML wydaje się być obecnie najlepszym połączeniem wydajności i kompatybilności.

Dodaj pełną obsługę SVG umożliwia przesyłanie SVG i generowanie krótkich kodów. Ponadto możesz dostosować styl każdego elementu SVG, używając niestandardowego CSS. Na koniec możesz określić zdjęcie zastępcze dla dowolnego lub wszystkich przesłanych plików SVG.

Jakie są inne przydatne wtyczki SVG do WordPressa?

Oprócz dodania obsługi SVG do witryny WordPress, jakie inne wtyczki mogą przynieść korzyści Twojej witrynie? Wszyscy i ich babcia wiedzą, że istnieją znaczne korzyści w zakresie wydajności. Zarówno pod względem rozmiaru pliku, jak i możliwości przeglądarki do renderowania grafiki wektorowej w tekście.

Ikony SVG WP

Ikony są elementem wizualnym, a takie elementy nadają projektom nowe życie. Co ciekawe, wtyczka ta narodziła się z osobistej konieczności. Autor chciał zacząć implementować więcej plików SVG w swoich projektach, ale nie mógł znaleźć na to rozwiązania. Poświęcił więc swój czas i wysiłek i stworzył ikony WP SVG.

Ta wtyczka jest bardzo łatwa w użyciu i możesz zastąpić istniejące ikony w swojej witrynie za pomocą zaledwie kilku kliknięć. Co najlepsze, nie musisz odtwarzać każdego obrazu dla wyświetlaczy Retina, o ile ustawisz maksymalną szerokość, ikona będzie skalować się automatycznie.

Podobnie jak w przypadku autorów, wtyczka ta jest wyjątkowa do wszelkiego rodzaju prac programistycznych, wielostanowiskowych i klienckich. Bez ograniczeń nie musisz się martwić o kompatybilność motywów ani nic w tym rodzaju.

Wygląda również na wersję premium w ofercie z funkcją, która umożliwia przesyłanie niestandardowych ikon. Nie jesteś więc ograniczony do zintegrowanych ikon.

Menu społecznościowe SVG

Jest to wtyczka, która działa jako widżet do wyświetlania ikon mediów społecznościowych za pomocą obrazów SVG. Aby ta wtyczka działała, wystarczy, że utworzysz nowe menu WordPress z linkami do twoich profili w mediach społecznościowych.

Następnie wybierz niestandardową lokalizację menu społecznościowego SVG i zapisz nowe menu. Następnie możesz użyć widżetu SVG Social Menu na pasku bocznym lub w innych obszarach bloga, w których są gotowe widżety.

Obecnie dostępne ikony dotyczą następujących witryn i platform: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logo SVG i efekty tekstowe

SLATE to wtyczka umożliwiająca obsługę krótkich kodów w celu dodawania niestandardowych efektów SVG. Możesz użyć tej wtyczki do promowania silnego wizerunku marki, podkreślenia widżetów CTA lub wyróżnienia elementów na swój sposób. Inteligentne wykorzystanie obsługi krótkich kodów oznacza, że ​​możesz edytować i dostosowywać swoje efekty w dowolnym momencie.

Np. Możesz mieszać ze sobą różne kolory, czcionki, filtry i wykorzystywać liczne wzory wypełnienia, które manifestują się jako przyciągające uwagę efekty projektowe. SLATE oferuje tyle samo swobody twórczej, co oprogramowanie do edycji wektorów, ale tylko bez konieczności używania jakiegokolwiek oprogramowania!

Jakie są więc niektóre kluczowe funkcje?

• Tekst. Generuj skróty, które mogą odtworzyć efekty przyciągających uwagę, ale przyjaznych SEO efektów tekstowych. Podobnie jak to, co widzisz na powyższym zrzucie.
• Czcionki. Nie wiesz, skąd wziąć niestandardowe czcionki? Nie martw się, ponieważ SLATE jest fabrycznie wyposażony w ogromną bibliotekę czcionek Google.
• Wzory wypełnienia. Litery są wypełnione wybranym wzorem wypełnienia. Wzory wypełnienia mają parametry. Kontroluj różne rozmiary, odległości i kolory, aby tworzyć unikalne wariacje, lub pozwól, aby ustawienia domyślne działały dla Ciebie.

I o wiele więcej! Ta wtyczka to potężne narzędzie do stylizowania tekstu i logo z wyjątkową precyzją. A przez SVG, nie mniej.

Gdzie można znaleźć grafikę SVG?

Co możesz zrobić, jeśli nie masz doświadczenia w projektowaniu grafiki wektorowej? Na szczęście znalezienie SVG w dzisiejszych czasach jest proste i proste. Co najwyżej wystarczy link do oryginalnego autora, który stworzył grafikę. Wiele platform udostępnia darmowe obrazy bez wymogu przypisywania autorstwa.

Oto kilka niesamowitych witryn oferujących bezpłatną zawartość SVG:

• FontAwesome — Font Awesome — najwspanialsza biblioteka ikon czcionek na świecie. Projekt ma się dobrze od wielu lat i ma dogłębne wsparcie nie tylko dla przeglądarek, ale także określonych frameworków i oprogramowania do projektowania. Ten pakiet czcionek zorientowany na ułatwienia dostępu jest absolutnym zabójcą i jest tak prosty w użyciu! W rzeczywistości jestem pewien, że istnieje tuzin wtyczek WordPress zapewniających obsługę Font Awesome!
• Vecteezy — Vecteezy to prawdopodobnie największa platforma grafiki wektorowej na świecie. Napędzane niestandardowymi projektami, wkładem społeczności i danymi internetowymi: Vecteezy oferuje wektory dostępne w dowolnej kategorii, kształcie lub formie. Pobieranie plików jest również bardzo łatwe. Wszystko, co musisz zrobić, to połączyć się z powrotem do strony autora, z której dostałeś plik. To jest strona, z której często korzystam.
• Tła SVG — czy nadążasz za najnowszymi trendami w projektowaniu stron internetowych? Jest tak wiele kreatywnych obszarów, w których obecnie bada się projekty. Jednym z tych obszarów są tła SVG. Ty też je widziałeś. Faliste wzory, zakrzywione linie i tak dalej. Użyj tej strony, aby wygenerować łatwo dostępne tła SVG!
• SVG Grabber — To rozszerzenie Chrome jest absolutnym darem niebios do pobierania obrazów SVG z różnych stron internetowych. Wystarczy kliknąć ikonę, a rozszerzenie może pobrać każdy plik SVG na stronie. Oczywiście, gdzie tylko możesz, musisz przestrzegać praw autorskich, ale ogólnie wydaje się, że jest to solidne rozszerzenie do częstego używania.
• Strefa Vector Logo — W zależności od niszy, w której pracujesz, przydatne może być posiadanie kolekcji opartych na wektorach logo wiodących światowych marek. Możesz również użyć tych plików podczas tworzenia konkretnych ogłoszeń lub promocji. A większość edytorów zdjęć w dzisiejszych czasach może konwertować pliki SVG do PNG i w inny sposób.

I tak naprawdę dotykamy powierzchni tego, co tam jest. Osobiście SVG bardzo zmienił sposób, w jaki pracuję z projektowaniem stron internetowych, a nawet tworzeniem polecanych obrazów. Dzięki SVG możesz naprawdę wykorzystać spektrum kolorów, różne wyrównania kształtów itp.

Jasne, to nie to samo, co korzystanie z pięknej, rzeczywistej fotografii, ale na każdej stronie internetowej można znaleźć mnóstwo miejsc, w których JPG można zastąpić grafiką wektorową. I to jest właśnie celem tego posta, aby dać ci szeroki przegląd tego, jak używać SVG z WordPressem.

Niezależnie od tego, czy osiągnęliśmy ten cel, pozwolimy Ci to osądzić. Jeśli masz ochotę dodać coś do tego posta lub masz dodatkowe zasoby do udostępnienia — pamiętaj, że nasza sekcja komentarzy jest zawsze otwarta.