SVG dla programistów: zrozumienie podstaw, zalet i wad

Grafiki wprowadzają unikalne wyrażenia na stronach internetowych, a także pomagają programistom bez wysiłku komunikować użytkownikom głębokie idee i koncepcje. Jest to kluczowy element w Internecie, a od 1999 r. stał się skryptowalny, co pozwala na bardziej złożoną prezentację obrazów w sieci.

Być może dobrze znasz różne typy plików obrazów rastrowych: JPG, PNG i GIF. Przypomnijmy trochę. Dzięki obsłudze 256 kolorów (8-bitów), GIF (Graphic Interchange Format) jest znakomitym formatem animacji i przezroczystości, nie licząc przezroczystości alfa. Format PNG (Portable Network Graphic) jest znacznie lepszy z obsługą ponad 16 milionów kolorów (24-bity) i wszystkich rodzajów przezroczystości, pod warunkiem, że nie potrzebujesz animacji.

Najczęściej używany format obrazu w sieci JPG lub JPEG (Joint Photographic Experts Group), głównie dlatego, że jest kompresowalny, obsługuje ponad 16 milionów kolorów; 24-bity lub 8-bitów na piksel dla skali szarości, ale brak obsługi animacji lub przezroczystości. Dlatego JPG jest głównym formatem graficznym używanym przez twórców statycznych fotografii. Nie wspomniałem o bitmapie (BMP), ponieważ zazwyczaj nie jest to format obrazu w Internecie. BMP przechowuje dokładne dane każdego piksela w obrazie, co sprawia, że ​​pliki są naprawdę duże (ponad 150 razy większe od JPG przy tej samej rozdzielczości) i nie są idealne do grafiki na stronie.

Te formaty graficzne zależne od rozdzielczości są świetne, głównie wtedy, gdy są odpowiednio używane. Jednak wszystkie mają wspólną wadę, która doprowadziła do wprowadzenia SVG – jedynego formatu grafiki wektorowej w Internecie.

Co to jest SVG?

Scalar Vector Graphics (SVG) to format obrazu oparty na Extensible Markup Language (XML), który opisuje grafikę dwuwymiarową, taką jak ścieżki, linie, okręgi, wzory, kolory tekstu itp. W prostszej definicji odnosi się do formatu obrazu z obsługą dwuwymiarowości, której całe zachowanie i istnienie kontrolowane jest przez plik tekstowy XML.

Kolejną interesującą cechą jest jego skalowalność; możesz przenosić obrazy SVG w dowolnej skali bez utraty ich rozdzielczości. Dzieje się tak, ponieważ pliki SVG renderują obrazy z kształtami, liczbami i współrzędnymi, a nie pikselami, jak w formatach obrazów rastrowych, które renderują obrazy poprzez zdefiniowanie koloru, jaki powinien być pomalowany każdy piksel.

Zobaczmy, jak możesz tworzyć obrazy SVG i kilka powodów, dla których powinieneś rozważyć użycie SVG w swoich projektach.

Jak tworzyć obrazy SVG

Możesz tworzyć obrazy SVG za pomocą dowolnego edytora tekstu, chociaż proces ten jest trochę techniczny i wymaga pewnej wiedzy z zakresu projektowania i matematyki, zwłaszcza jeśli tworzysz złożone kształty. Wyobraź sobie, że rysujesz samolot na płótnie, używając tylko linii kodów. Jest jednak prostszy sposób, ale wykorzystajmy go do zrozumienia podstawowych pojęć SVG.

Używamy elementów graficznych SVG do tworzenia obrazów SVG w edytorze tekstu. Proces polega po prostu na wstawieniu elementów graficznych wewnątrz znaczników <svg> i </svg>, określając ich współrzędne, wymiary, kolor itp. Na przykład element <rect> może być użyty do narysowania prostokąta, jak widać w następujący przykład.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

Powyższy kod narysuje niebieski prostokąt o wymiarach 300 x 300 pikseli w lewym górnym rogu przeglądarki, jeśli zostanie zapisany jako plik .svg i otwarty w przeglądarce. Teraz możesz się zastanawiać, dlaczego w dokumencie mamy dwie wysokości i szerokości. Rozumiem cały kod, aby zobaczyć dlaczego. Jak wspomniano wcześniej, twój kod SVG musi być napisany wewnątrz elementu głównego (<svg> i </svg>), aby powiadomić przeglądarkę o tym, jak interpretować te wiersze.

Podobnie jak w HTML, SVG wymaga deklaracji przestrzeni nazw w elemencie głównym. W powyższym przykładzie podaliśmy parametr xmlns „http://www.w3.org/2000/svg” oraz zalecaną przez W3C wersję 1.1 SVG w elemencie głównym. Wymiar wewnątrz elementu głównego nazywany jest punktem widzenia SVG, który jest oknem lub obszarem roboczym, przez który pojawiałby się obraz SVG narysowany w tagu głównym. Punkt widzenia musi mieć co najmniej ten sam wymiar co wszystkie obiekty SVG, zanim będą mogły pojawić się w przeglądarce.

Druga linia jest łatwiejsza do zrozumienia. Element <rect>, który służy do rysowania prostokątów, zawiera w sobie parametry proponowanego prostokąta zaczynające się od wymiaru. Szerokość obrysu opisuje grubość linii, podczas gdy dwa modele kolorów RGB informują przeglądarkę, który kolor ma wypełnić odpowiednio prostokąt i linię. To całkiem proste, prawda?

Teraz możemy przenieść prostokąt wewnątrz strony, deklarując wartość x i y w ten sposób:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Oczywiście nie zapomnimy o zwiększeniu wymiaru punktu widzenia, aby pomieścić dodatkową przestrzeń, która by to zajęła.

Najłatwiejszym sposobem tworzenia obrazów SVG jest użycie narzędzi do rysowania, takich jak Adobe Illustrator, Inskape i Sketch. Zamiast budować od zera, niektóre biblioteki JavaScript, takie jak Bonsai.js i D3.js, są dobrymi źródłami obrazów SVG, jeśli szukasz ikon, złożonych kształtów itp.

Dodawanie obrazów SVG

Jedną z korzyści płynących z używania obrazów SVG jest łatwość zintegrowania ich z projektem. Po prostu odwołujesz się do nich w atrybucie src znacznika img. Powinno to odnosić się do pliku .svg zapisanego w folderze Twojej witryny w następujący sposób:

<img src='example.svg'>

Alternatywnie możesz wstawić kody SVG do dokumentu HTML z tagami <svg></svg> rozpoczynającymi i kończącymi kod, jak już wspomniano wcześniej.

Możesz również odwołać się do obrazu SVG w swoim CSS, aby uzyskać obraz tła w następujący sposób:

.main-header {
background-image: url(example.svg);
}

Korzyści z używania SVG dla programistów

Nie można przecenić zapotrzebowania na SVG w kolejnych projektach internetowych, biorąc pod uwagę obecne wymagania graficzne w Internecie. Oprócz niezliczonej liczby nowych urządzeń z potężną rozdzielczością i rozmiarami ekranu, strony internetowe oferują teraz tak dużą interaktywność, że bez całkowitej kontroli nad grafiką tworzenie profesjonalnych stron internetowych może być trudne.

Oto kilka korzyści:

Skalowalność i responsywność

Jako format obrazu niezależny od rozdzielczości, pliki SVG mogą być skalowane w nieskończoność, bez rozpikselowania. Dzięki temu, jako programista, możesz dostarczać najwyższej jakości obrazy graficzne każdemu użytkownikowi, niezależnie od siły rozdzielczości i rozmiaru ekranu ich urządzeń. Możesz łączyć różne ścieżki, kształty i elementy tekstowe, aby tworzyć oszałamiające efekty wizualne, które będą ostre i wyraźne we wszystkich rozmiarach.

Nie jest to dostępne w żadnym z formatów obrazów rastrowych o stałych wymiarach, po prostu dlatego, że nigdy nie miałyby wystarczającej ilości danych, aby wypełnić każdą przestrzeń, gdy są bardzo przeskalowane. SVG oblicza odległość między punktami, aby ścieżki były stale połączone, tak aby obraz pozostał ostry w dowolnej skali.

Niezwykle elastyczny i obsługuje animację

W przeciwieństwie do obrazów rastrowych, które zapewniają ostateczną kopię obrazu, obrazy SVG można w pełni edytować, dostosowując kody za pomocą edytora tekstu lub specjalnych narzędzi do rysowania. Używając nazw klas lub identyfikatorów elementów SVG, możesz stylizować lub animować obrazy SVG za pomocą CSS. Animacja obrazów SVG jest również możliwa za pomocą Web Animation API, SMIL lub WebGL.

Co najważniejsze, możesz zintegrować swoje obrazy SVG z innymi znanymi technologiami i dokumentami otwartych platform internetowych. Pliki SVG mogą być tworzone za pomocą skryptów JavaScript i stylizowane za pomocą CSS, takich jak HTML.

Przyjazny dla SEO i mały rozmiar pliku

Istniejące w formacie tekstowym obrazy SVG poprawiają dostępność strony internetowej, co jest wielkim atutem w rankingu stron. Poza tym wyszukiwarki mogą indeksować tekst elementu SVG, co pozwala użytkownikom znaleźć Twoją witrynę za pomocą słów kluczowych w pliku SVG.

SVG ładuje się znacznie szybciej, ponieważ nie ma pliku do pobrania i nie wymaga żądania HTTP. Poprawa rozdzielczości pliku obrazu rastrowego oznacza zwiększenie liczby punktów (pikseli). Zwiększy to rozmiar obrazu, co przeciągnie czas ładowania witryny. Jest to dalekie od przypadku korzystania z SVG. Jako obraz utworzony przy użyciu zestawu instrukcji i współrzędnych, rozmiary plików SVG są niewiarygodnie małe (po zoptymalizowaniu) w porównaniu z dowolnym innym typem pliku obrazu. Powoduje to szybszy czas ładowania, zwiększoną wydajność strony, wyższą pozycję w wyszukiwarkach, a jednocześnie poprawia wrażenia użytkownika. Aby uzyskać więcej informacji na ten temat, odwiedź konsultanta SEO w Londynie

SVG ma swój własny obiektowy model dokumentu

SVG istnieje jako osobny dokument, uważany za posiadający własną strukturę i umieszczony wewnątrz normalnego DOM. Ta reputacja jest kluczowa dla atrybutu viewBox, który pozwala nam tworzyć punkt widzenia o dowolnym wymiarze, rysować obrazy na różnych rozmiarach płótna i wyświetlać je bez aktualizowania właściwości SVG.

SVG to format plików graficznych przyszłości

Bez pojawienia się potężniejszych urządzeń z niesamowicie wspaniałą rozdzielczością ekranu programiści nie musieliby radzić sobie z przytłaczającymi bólami głowy związanymi z optymalizacją obrazów dla różnych urządzeń. Ale za kilka lat nie będzie to łatwiejsze, w połączeniu z rosnącym pragnieniem zwiększonej interaktywności stron internetowych.

W jakiś sposób radzenie sobie z tymi wyzwaniami poprzez wyświetlanie różnych obrazów dopasowanych do wymiaru punktu widzenia użytkowników nie jest opłacalne. W trosce o zrównoważony rozwój biznesu poprzez oszczędność przepustowości, pieniędzy i poprawę komfortu użytkowania, wysiłki zmierzające do przejścia na format obrazu SVG nieuchronnie stają się najwyższym priorytetem. Istnieje rosnąca społeczność zwolenników SVG.

Przed wprowadzeniem przez W3C SVG 1.1 (edycja druga) 16 sierpnia 2011 r., która jest potencjalnie w trakcie przeglądu dla nowszej wersji, SVG 1.0 i 1.1 (edycja pierwsza) już zmieniały sposób, w jaki obsługujemy obrazy w Internecie. Jest to obietnica czegoś wartego więcej niż zwykły format obrazu rastrowego, który nadal jest bardzo przydatny w naszym obecnym stanie programowania WWW. SVG nie jest najlepszym formatem obrazu we wszystkich przypadkach. Oczekuje się, że kolejne wersje SVG rozwiążą niektóre wady SVG; do omówienia w dalszej części artykułu.

Kiedy używać formatu obrazu SVG

Oczywiście formaty obrazu zależne od rozdzielczości są nadal najlepsze dla fotografii i innych szczegółowych obrazów. Oto lista typowych przypadków, w których najlepsze są formaty obrazów SVG.

1. Logo i ikony
2. Interaktywne obrazy, takie jak wykresy, wykresy, mapy, infografiki
3. Animacje
4. Interfejsy aplikacji
5. Proste schematy i ilustracje
6. Efekty specjalne, takie jak lepienie lub morfing kształtu
7. Dzieła sztuki o niskiej intensywności i prosta grafika

Wady SVG dla programistów

SVG nie jest obsługiwane przez wszystkie przeglądarki: stare przeglądarki traktują SVG w taki sam sposób, w jaki przestarzały system Windows XP traktuje dyski flash lub Canon EOS 5DSr podczas próby ich podłączenia. Krótko mówiąc, SVG nie działa w starszych przeglądarkach; IE8 i niższe. Jednak biorąc pod uwagę, że starsze przeglądarki nie są tak naprawdę częścią żadnej przyszłej sprawy, w połączeniu z faktem, że tylko garstka osób nadal ich używa, nie jest to główny powód, aby nie używać SVG.

SVG nie obsługuje tak wielu szczegółów: będąc mieszanką ścieżek i punktów, SVG nie ma struktury umożliwiającej wyświetlanie tak wielu szczegółów, jak oparte na pikselach formaty obrazów rastrowych. SVG nie działa z niczym zrobionym aparatem. Dlatego zdjęcia i inne formy grafiki z tak dużą ilością szczegółów najlepiej wyświetlać przy użyciu formatów obrazu rastrowego ze względu na ich obsługę większej gęstości kolorów.

Zrozumienie kodu SVG: Chociaż można liczyć na to, że programiści wiedzą, jak korzystać z kilku języków programowania internetowego, zwiększenie tego obciążenia okazało się wyzwaniem. Wzorzec kodu SVG nie jest tak naprawdę trudny ani zupełnie inny niż języki programowania internetowego. Ale tworzenie przyciągających wzrok obrazów lub manipulowanie nimi wymaga pewnego wysiłku. Nie każdy programista chciałby zainwestować w to dużo czasu, gdy obrazy bitmapowe są przydatne i nie wymagają osadzenia.

Wniosek

Zachowanie grafiki na stronie internetowej w odpowiedzi na jej szerokie grono użytkowników jest dziś ważnym aspektem tworzenia stron internetowych. A format obrazu SVG jest wspaniałym rozwiązaniem, zamiast renderowania wielu rozmiarów obrazu, jak to zwykle widać w naszych obecnych projektach. Dzieje się tak, ponieważ przeglądarki obliczają, jak obraz powinien być renderowany, korzystając z zestawu instrukcji, które zapewniają wyraźne i wyraźne obrazy w dowolnej skali.

Obrazy bitmapowe pozostają najlepsze w przypadku bardzo szczegółowych obrazów, takich jak fotografie, podczas gdy obrazy SVG są używane do mniej szczegółowych obrazów, takich jak ikony, logo, wykresy, infografiki itp. Radziłbym trzymać się narzędzi do rysowania, takich jak Illustrator lub Sketch. tworzenie obrazów SVG i bibliotek online dla ikon i popularnych kształtów. Kodowanie powinno być konieczne tylko wtedy, gdy chcesz manipulować obrazami SVG.

Daj nam znać, w jaki sposób korzystasz z SVG, i poinformuj nas o innych fajnych wskazówkach, których nie udostępniono tutaj.