Przewodnik po formacie obrazu Scalable Vector Graphics (SVG)

Jest jeden aspekt Internetu, od którego nie można uciec: obrazy. Na początku istnienia sieci była to ścisła sprawa wyłącznie tekstowa. Jednak teraz mamy dedykowane formaty obrazów, które pomogą nam wyświetlać wyraźne efekty wizualne. Format Scalable Vector Graphics (SVG) jest jednym z najnowszych i najbardziej elastycznych dostępnych.

Wyjaśnimy więcej później, ale SVG to zbiór danych, który jest prezentowany jako obraz w interfejsie użytkownika. Oznacza to, że możesz użyć kaskadowych arkuszy stylów (CSS) do manipulowania obrazem. Co więcej, możesz dowolnie zmieniać jego rozmiar bez utraty jakości.

W tym poście porozmawiamy więcej o skalowalnej grafice wektorowej i o tym, jak mogą ci pomóc. Omówimy również, jak umieścić je w witrynie WordPress.

Szybki podkład na temat najpopularniejszych formatów obrazów internetowych

Zanim przejdziemy do SVG i jak z nich korzystać, warto porozmawiać o podstawowych formatach obrazów, których używamy w Internecie. Należy zwrócić uwagę na trzy:

• Wspólna Grupa Ekspertów Fotograficznych (JPEG). Jak sama nazwa wskazuje, jeśli chcesz wyświetlać zdjęcia zrobione aparatem cyfrowym, jest to format dla Ciebie.
• Przenośna grafika sieciowa (PNG). Będziesz chciał użyć formatu PNG, aby wyświetlić dowolną utworzoną grafikę, taką jak te z programu Adobe Illustrator.
• Format wymiany grafiki (GIF). Hej, każdy lubi śmieszne klipy z programów telewizyjnych, które można wykorzystać jako reakcję w mediach społecznościowych! GIF to idealny format do animowanej grafiki, która jest również przenośna.

Chociaż niektórzy wybiorą dowolny format, który im się podoba, nie będzie to optymalne podejście. Na przykład, jeśli zdecydujesz się na tworzenie każdego obrazu GIF, możesz zobaczyć astronomiczne rozmiary plików i słabą jakość grafiki. W przeciwieństwie do tego, nie będziesz chciał używać JPEGS do grafiki, ponieważ PNG jest bardziej optymalnym formatem.

Czym jest format skalowalnej grafiki wektorowej

Będziesz chciał z nami współpracować w tej sekcji, ponieważ w niektórych obszarach zajmiemy się kwestiami technicznymi. Również koncepcja SVG może być myląca.

Skalowalna grafika wektorowa nie istnieje (tak jakby). W rzeczywistości nie są one wcale grafiką ani obrazem, ale formą Extensible Markup Language (XML). Dla nieświadomych jest to bliski brat HTML, ale bez niektórych aspektów tego języka (takich jak predefiniowane tagi).

Jako porównanie, które możesz już zrozumieć, zastanów się, jak tworzyć kształty za pomocą CSS. To jest coś, o czym porozmawiamy wkrótce. Cóż, wyobraź sobie, że ten kod CSS jest wtopiony w opakowanie dokumentu, które wywołujesz przy użyciu standardowego formatu i struktury pliku (na przykład image.svg ).

Bardziej trafne jest stwierdzenie, że skoro HTML zapewnia strukturę do definiowania nagłówków, akapitów, sekcji, list i nie tylko, SVG zapewnia strukturę do definiowania kształtów, takich jak okręgi i prostokąty. Jednak to nadal nie wyjaśnia, dlaczego mamy (a czasami potrzebujemy) format SVG. Porozmawiamy o tym później.

Dlaczego mamy pliki SVG

Przed SVG, do wyświetlania grafiki używałeś PNG. Wczesne obrazy w sieci mogą być GIF-ami, ale generalnie dominującym formatem obrazów są PNG. Pytanie nie brzmi tak bardzo: „Dlaczego mamy SVG?”, więcej „Czego brakuje obecnym formatom graficznym, a SVG rozwiąże?” Odpowiedź brzmi: dynamizm.

Jeśli spojrzysz wstecz na podstawowe formaty obrazów internetowych, dwa nie pasują do tworzonej grafiki (JPEG i GIF). Pozostawia to PNG, aby odciążyć. Jednak pliki PNG mają kilka problemów, które są widoczne dopiero teraz we współczesnym Internecie:

• Są statyczne, ponieważ tworzysz obraz w trybie offline i eksportujesz go w tym konkretnym formacie. Oznacza to, że jest nieco nieelastyczny.
• Co za tym idzie, nie można zmienić „makijażu” obrazu. Biorąc pod uwagę, że mamy wiele urządzeń do tworzenia i wyświetlania, czasami trzeba dostosować się do tych „obszarów ekranu”. Podejmij wysiłek, którego potrzebujesz, aby utworzyć logo we wszystkich rozmiarach tylko dla komputerów stacjonarnych i głównych urządzeń mobilnych przy użyciu plików PNG.
• Chociaż pliki PNG mogą być lekkie, to projektant i właściciel witryny są odpowiedzialni za zapewnienie optymalizacji obrazu. PNG może być ciężki, czasami przekraczający megabajt, bez żadnej optymalizacji.

Ponadto pliki PNG wypełniały część luki w czasie, gdy było niewiele opcji, które zapewniały wystarczająco wysoką jakość obrazu. W tamtym czasie CSS był w powijakach, a my nie mieliśmy jeszcze takiego zakresu projektowania i rozwoju, jak teraz.

Na przykład możemy używać właściwości border-radius dopiero od 2010 roku. Pozwala to definiować zaokrąglone krawędzie, a nawet okręgi. Często zobaczysz to w akcji na przyciskach:

Będziesz używać CSS do tworzenia kształtów, które można skalować i dostosowywać do ekranu, ale skalowalna grafika wektorowa może zrobić więcej. W rzeczywistości, aby to zrobić, zwrócisz się teraz do SVG, a nie do CSS, chociaż nie są one również magicznym pociskiem.

Zalety skalowalnej grafiki wektorowej

Podobnie jak każdy inny format obrazu, skalowalna grafika wektorowa nie jest idealna. Jest oczywiście wiele pozytywów:

• SVG dopasowuje się do wymiarów urządzenia, często bez dalszej ingerencji z Twojej strony. Skraca to czas rozwoju lub tworzenia.
• Powiązany plik obrazu jest mały, ponieważ potrzebujesz tylko jednego SVG. W przeciwieństwie do tego logo PNG musi oferować kilka różnych rozmiarów i wymiarów. Zajmuje to miejsce na serwerze.
• Co więcej, pliki SVG są bardziej wydajne niż PNG, ponieważ wystarczy załadować tylko jeden plik kosztem kilobajtów. Ten pakiet plików PNG może mieć rozmiar w megabajtach, w zależności od ich jakości, ilości i optymalizacji.

Ogólnie rzecz biorąc, możesz zrobić więcej z plikami SVG niż z jakimkolwiek innym formatem obrazu. Zarówno programista, jak i grafik mogą tworzyć pliki SVG — za pomocą kodu lub eksportując typowe dzieło z dedykowanej aplikacji do rysowania. Ponieważ ściślej wiążą się z rozwojem sieci, adopcja rośnie.

Wady skalowalnej grafiki wektorowej

Jednak nie wszystko jest różowe. Pliki SVG nadal mają pewne problemy, o których warto wiedzieć:

• Technologia rozwija się, w przeciwieństwie do większości innych podstawowych aspektów sieciowych. Ponieważ wiele osób wiele oczekuje od Scalable Vector Graphics, istnieje „przepaść” między tym, co możesz zrobić, a tym, co chcesz zrobić.
• Chociaż podstawowa obsługa SVG jest dostępna w większości przeglądarek, pełny zestaw funkcji nadal nie jest dostępny w zależności od używanej przeglądarki. Ponownie, pliki SVG mają większy potencjał, który nie jest jeszcze widoczny: potrzebujemy lepszej obsługi przeglądarek, aby uzyskać bardziej zaawansowane funkcje, aby zobaczyć, do czego zdolny jest format.
• W niektórych przypadkach może się okazać, że obrazy SVG są mniej dokładne lub po prostu źle wyglądają. Dzieje się tak, ponieważ musisz polegać na ładowaniu witryny zgodnie z oczekiwaniami. Jeśli pamiętasz czas, w którym musiałeś ponownie załadować stronę internetową z powodu błędów, zobrazuj to, używając tylko obrazów SVG.

Powiedzielibyśmy również, że w niektórych przypadkach trudniej jest tworzyć SVG bez znajomości kodowania. Znacznie lepsze wsparcie oferują programy graficzne, takie jak Affinity Designer i Adobe Illustrator. Istnieje również wsparcie dla eksportu SVG w aplikacjach takich jak Google Drawing:

Jest to obszar poprawy, ale nadal jest nieco w tyle w porównaniu z innymi formatami obrazów.

Pomimo tych wad możesz je złagodzić. Z pewnością do podstawowych zastosowań można je wdrożyć niemal od razu. W rzeczywistości WordPress oferuje nawet to wsparcie w kilku krokach i omówimy to dalej.

Jak korzystać z SVG w witrynie WordPress?

Zła wiadomość jest taka, że ​​jeśli chcesz wgrać SVG do WordPressa bez żadnej pracy, nie będziesz w stanie tego zrobić. Dodatkowym problemem związanym z obecną obsługą skalowalnej grafiki wektorowej jest to, że WordPress nie pozwala na standardowe przesyłanie tych obrazów ze względów bezpieczeństwa:

Powody wykraczają poza zakres tego artykułu. Krótko mówiąc, ponieważ format SVG jest dokumentem, a nie rzeczywistym obrazem, złośliwy użytkownik może przeprowadzić potencjalne ataki skryptowe. Oznacza to, że musisz znaleźć bezpieczniejszą alternatywę.

W innym miejscu w sieci znajdziesz instrukcje, jak dodać kod do pliku functions.php, aby umożliwić przesyłanie SVG. Jednak nie przejdziemy przez ten krok, ponieważ nie możemy zagwarantować, że jest bezpieczny. Zamiast tego możesz zrobić to, co często robisz z WordPress: przejdź do wtyczki. Zalecamy obsługę SVG:

Po zainstalowaniu i aktywacji wtyczki przejdź do ekranu Ustawienia> Obsługa SVG w WordPress. Spowoduje to wyświetlenie kilku ekranów, ale wystarczy zaznaczyć opcję Ograniczyć dla administratorów? w panelu Ustawienia.

Domyślnie wtyczka umożliwi wszystkim użytkownikom przesyłanie plików SVG. Może to być zła wiadomość ze względu na nieodłączne problemy z bezpieczeństwem i właśnie dlatego WordPress nie pozwala na przesyłanie tych plików w pierwszej kolejności. Jeśli jednak zaznaczysz to pole, wtyczka ograniczy przesyłanie danych tylko do administratorów witryny, a także standardowo zwiększy bezpieczeństwo korzystania z plików SVG.

W podsumowaniu

Istnieje wiele sposobów wyświetlania obrazów w Internecie, a większość ludzi nie zastanawia się dwa razy nad używanym formatem. Jeśli jednak poświęcisz trochę czasu na dopasowanie formatu do potrzeb, uzyskasz szczegółowe i wyraźne obrazy, które będą wyglądać oszałamiająco na wszystkich ekranach.

W tym poście przedstawiliśmy wiele informacji na temat Skalowalnej Grafiki Wektorowej. Użyjesz CSS, aby dostosować obraz do swoich potrzeb, a zakres manipulacji jest znacznie większy niż w przypadku plików PNG i JPEG. Ponadto są lekkie – więc idealnie nadają się do małych ekranów i słabych połączeń internetowych.

Czy chcesz używać skalowalnej grafiki wektorowej na swojej stronie internetowej, a jeśli tak, czy ten artykuł Ci pomoże? Daj nam znać w sekcji komentarzy poniżej!

Źródło obrazu: GDJ.