Jak (i dlaczego) SVG przejmie w 2018 r

/2019-11-08 21:00:22/
Irving
/Grafika/

2018 będzie rokiem SVG. Format pliku obrazu zyskuje na popularności i popularności w ciągu ostatnich kilku lat, ale w 2018 roku naprawdę się przebije.

Masz kombinację użytkowników z wyświetlaczami o wysokiej rozdzielczości i potrzebujesz błyskawicznego czasu ładowania, aby podziękować. I chociaż przejście na SVG może brzmieć jak wielka sprawa; to nie jest.

SVG jest łatwy w użyciu i implementacji i tak naprawdę nie musisz zmieniać istniejących plików; po prostu dodaj nowe obrazy jako SVG. Oto wszystko, co musisz wiedzieć o SVG.

Przeglądaj zasoby projektowe

SVG jest stworzony dla Internetu

Mozilla opisuje to w następujący sposób:

SVG to język oparty na XML do opisywania obrazów wektorowych. Zasadniczo jest to znacznik, taki jak HTML, z tym wyjątkiem, że masz wiele różnych elementów do definiowania kształtów, które chcesz wyświetlić na obrazie, oraz efektów, które chcesz zastosować do tych kształtów. SVG służy do oznaczania grafiki, a nie zawartości. Na najprostszym końcu spektrum masz elementy do tworzenia prostych kształtów, takich jak i. Bardziej zaawansowane funkcje SVG obejmują (przekształcanie kolorów za pomocą macierzy transformacji), (animowanie części grafiki wektorowej) i (nakładanie maski na górę obrazu).

Kluczowe zalety SVG dla projektantów stron internetowych obejmują możliwość tworzenia prostych renderów SVG w edytorze kodu lub tekstu, a złożona grafika może być rysowana w programie takim jak Adobe Illustrator; Tekst SVG jest dostępny; Pliki SVG można łatwo stylizować i pisać; i tworzysz w formacie wektorowym, który dobrze renderuje w dowolnym rozmiarze. Formaty SVG są obsługiwane przez nowoczesne przeglądarki, są przyszłościowe i wysoce kompresowalne.

Niektóre wady polegają na tym, że projektowanie plików SVG może się skomplikować i początkowo jest nieco trudniejsze. Innym problemem jest to, że niektóre zdegradowane przeglądarki po prostu nie rozumieją, czym są.

Potrzebujesz lepszego zrozumienia SVG? Mamy przewodnik dla początkujących na temat SVG.

Jak projektanci używają SVG

Jedną z zalet SVG jest to, że możesz robić z nim wiele różnych rzeczy. SVG może być używany do:

Logo
Tła, wzory i tekstury
Animacja
Responsywne obrazy
Ikony

Projektanci mogą używać SVG do dowolnego elementu w projekcie, w którym format wektorowy jest odpowiednim rozwiązaniem. Mogą zastępować JPG, PNG i GIF, między innymi formatami.

Reguła formatów wektorowych

Istnieje duża szansa, że użyjesz więcej formatów wektorowych. SVG jest niezależny od rozdzielczości. To ogromny bonus, ponieważ wiesz, że Twoje zdjęcia będą wyglądać świetnie w dowolnym miejscu.

Szczególnie miło w pracy z obrazami SVG jest to, że tak naprawdę nie trzeba zmieniać przepływu pracy, aby je zaimplementować. Jeśli projektujesz w oprogramowaniu takim jak Illustrator lub Sketch, proces - inny niż eksport końcowy - jest identyczny. Jedynym haczykiem jest to, że prawdopodobnie będziesz chciał zamienić dowolne elementy tekstowe w kontury w programie Illustrator, ale wiele osób już to robi.

Podczas przygotowywania plików SVG należy pamiętać o jednej kluczowej rzeczy. Aby były jak najmniejsze, usuń niepotrzebne śmieci. (Wyczyść ten karton!) SVG w sieci ma kilka świetnych wskazówek dotyczących rysowania elementów i zapisywania plików SVG w najlepszy możliwy sposób.

Format tekstowy jest dobry dla SEO

Korzystanie z SVG daje również pewną premię dla doświadczonych wyszukiwarek. Ponieważ SVG używa rzeczywistego tekstu do formatowania, wyszukiwarki mogą lepiej czytać obrazy.

Tak, możesz dodać informacje alternatywne do innych obrazów, ale jest tylko tyle miejsca na słowa kluczowe. Za pomocą SVG możesz tworzyć obrazy bardziej przyjazne dla wyszukiwania i po prostu przesyłać. Google indeksuje całą zawartość SVG, w tym samodzielne pliki i kiedy pliki SVG są osadzone bezpośrednio w HTML.

SVG jest lekki

W przeciwieństwie do niektórych innych typów plików opartych na wektorze, które mogą szybko się obciążać, pliki SVG są kodami. Kod jest szybki. To takie proste. Cóż prawie.

Jeśli chodzi o te fantazyjne rysunki wektorowe, które zapisałeś jako SVG, sprawdź rozmiary plików, zanim przejdziesz zbyt daleko. Podczas gdy formaty PNG mogą rosnąć prawie wykładniczo po dodaniu przezroczystości, pliki SVG mają tendencję do powiększania się w zależności od liczby ścieżek i wypełnień obrazu.

Jeśli plik SVG jest ogromny, rozważ jego eksport i plik JPG lub PNG. (Nawet jeśli wydaje się to sprzeczne. Rzeczywistość jest taka, że większość projektantów będzie nadal używać mieszanki typów plików z obrazami; po prostu spodziewaj się, że użyje więcej SVG niż w przeszłości.)

Edycja jest łatwa

Jeśli jesteś przyzwyczajony do rysowania ikon, logo lub czegokolwiek w oprogramowaniu do rysowania wektorowego, nic się nie zmieni w procesie edycji.

Ale jeśli napiszesz SVG, czeka cię uczta. Wystarczy zmienić słowo, współrzędne lub kolor w edytorze tekstu i wysięgniku, zmiana zostanie wprowadzona. Edycja jest trudniejsza.

Twórz nieruchome lub animowane obrazy za pomocą SVG

W przeciwieństwie do większości innych formatów obrazu, które pozwalają mieć nieruchomy lub ruchomy obraz, SVG pozwala na oba. Możesz utworzyć zdjęcie lub animację. I wszystko działa prawie tak samo. (Ten fajny przykład to samouczek na temat animowania elementu wzdłuż ścieżki SVG!)

Te niewielkie korzyści pomagają pchnąć SVG na czoło umysłów projektantów. Nie musisz uczyć się nowego narzędzia lub techniki; masz już do dyspozycji wszystko, czego potrzebujesz dzięki SVG.

Wniosek

Oto wielki powód, dla którego 2018 będzie rokiem, w którym SVG zacznie przejmować: jest to praktyczne.

Ponieważ wszyscy używają wyświetlaczy o wysokiej rozdzielczości, formaty wektorowe naprawdę są do zrobienia. Wszystko skaluje się bezbłędnie i nie musisz się martwić pikselacją. Pliki SVG tworzą świetne logo (statyczne lub responsywne), wykresy i tła, ikony i małe obrazy oraz animacje. Pliki są małe i ładują się szybko i nie ma dużej krzywej uczenia się, jeśli chodzi o wdrażanie plików SVG w projekcie witryny.

Możesz teraz dosłownie zacząć korzystać z obrazów SVG.