Tworzenie olśniewających treści mobilnych oznacza zachowanie równowagi między ilością pobieranych danych a maksymalnym wpływem wizualnym. Grafika wektorowa to świetny sposób na uzyskanie oszałamiających wyników wizualnych przy minimalnej przepustowości.
Dla wielu osób płótno to jedyny sposób narysowania mieszaniny wektorów i rastery w internecie, ale istnieją alternatywne rozwiązania, które mają swoje zalety. Świetnym sposobem na tworzenie rysunków wektorowych jest użycie grafiki Scalable Vector Graphics (SVG), która jest kluczową częścią języka HTML5.
Wszyscy wiemy, że projektowanie responsywne to ważny element obsługi ekranów o różnych rozmiarach, a SVG to idealne rozwiązanie do łatwej obsługi ekranów o różnych rozmiarach.
SVG to świetny sposób na przedstawienie rysunków wektorowych. Stanowi też doskonałe uzupełnienie map bitowych, ponieważ ta druga opcja lepiej sprawdza się w przypadku obrazów o ciągłych kolorach.
Jedną z najbardziej przydatnych cech formatu SVG jest to, że jest ono niezależne od rozdzielczości, co oznacza, że nie musisz się zastanawiać, ile pikseli masz na urządzeniu – wynik zawsze będzie skalowany i optymalizowany przez przeglądarkę, aby wyglądał świetnie.
Popularne narzędzia do tworzenia, takie jak aplikacja do rysowania na Dysku Google, Inkscape, Illustrator, Corel Draw i wiele innych, generują pliki SVG, dlatego treści można generować na wiele sposobów. Omówimy kilka sposobów korzystania z zasobów SVG oraz kilka wskazówek dotyczących optymalizacji, które ułatwią Ci rozpoczęcie pracy.
Podstawy skalowania
Zacznijmy od prostego scenariusza – Twoim tłem strony internetowej ma być grafika na całej stronie. Bardzo dobrze byłoby umieścić w tle logo firmy i podobne elementy w tle, ale oczywiście trudno jest to zrobić na ekranach o różnych rozmiarach. Dla przykładu zaczniemy od skromnego logo HTML5.
Logo HTML5 znajduje się poniżej. Jak sądzisz, pochodzi ono z pliku SVG.
Kliknij logo i zobacz, jak wygląda ono w dowolnej nowoczesnej przeglądarce, a zobaczysz, że rozmiar doskonale dopasowuje się do dowolnego rozmiaru okna. Otwórz go w ulubionej przeglądarce, zmień rozmiar okna i zobacz, czy obraz jest wyraźny niezależnie od powiększenia. Gdybyśmy to zrobili, musielibyśmy udostępniać obrazy w wielu różnych rozmiarach dla każdego ekranu lub być zmuszeni do pochłaniania strasznie pikselowych obrazów w skali obrazu.
O co więc chodzi? To jedyny format, który skaluje się niezależnie od używanego przez nas urządzenia. Musimy więc udostępniać użytkownikom tylko 1 zasób – nie musimy wiedzieć, ile mają ekranów czy okien.
To jeszcze nie wszystko – logo HTML5 ma tylko 1427 bajtów. Ojej, jest tak mały, że nie wpadnie w żadną mobilną transmisję danych podczas ładowania, dzięki czemu ładuje się szybko i jest tanie i szybkie dla użytkowników.
Kolejną przydatną cechą plików SVG jest to, że można je skompresować za pomocą GZIP, aby jeszcze bardziej je zmniejszyć. Przy skompresowaniu pliku SVG w ten sposób rozszerzenie pliku musi zostać zmienione na „.svgz”. Logo HTML5 zmniejsza się do 663 bajtów po skompresowaniu i większość współczesnych przeglądarek bez problemu radzi sobie z nim.
W przykładzie dotyczącym kilku najnowszych urządzeń widać, że skompresowane dane wektorowe zapewniają około 60-krotną przewagę. Pamiętaj, że porównania te dotyczą plików JPEG i SVG, a nie PNG. JPEG jest jednak stratnym formatem, przez co jakość obrazu jest gorsza niż w przypadku SVG lub PNG. Gdybyśmy wykorzystali PNG, uzyskaliby przewagę ponad 80x, co jest niesamowite!
Pliki PNG i JPEG oczywiście nie są sobie równe. Zgodnie z kilkoma wskazówkami dotyczącymi optymalizacji warto używać formatu JPEG zamiast PNG, ale nie zawsze jest to dobry pomysł. Spójrz na poniższe obrazy. Obraz po lewej stronie to obraz PNG przedstawiający prawą górną część logo HTML5 powiększony 6x. Obraz po prawej stronie jest taki sam, ale ma kod JPEG.
Łatwo zauważyć, że zapisywanie rozmiaru pliku w formacie JPEG jest płatne, a efekty kolorystyczne pojawiają się na ostrych krawędziach. Może to sprawić, że siatka będzie wymagała okularów. W każdym przypadku wersja SVG jest taka sama jak PNG, więc wygrywa na wszystkich kontach – zarówno pod względem rozmiaru, jak i przejrzystości pliku.
Tworzenie tła wektorowych
Przyjrzyjmy się, jak można użyć pliku wektorowego jako tła strony. Prostym sposobem jest zadeklarowanie pliku tła za pomocą stałego pozycjonowania CSS:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Zauważysz, że bez względu na rozmiar wyświetlacza obraz ma dobrze dobrany rozmiar i wyraźne krawędzie.
Następnie chcemy umieścić pewne treści w tle.
Ale, jak widzisz, wynik jest gorszy od idealnego, ponieważ nie możemy odczytać tekstu. Co więc zrobić?
Zmieniam tło, aby wyglądało ładniej
Oczywiście musimy rozjaśnić wszystkie kolory na obrazie tła. Można to łatwo osiągnąć, stosując właściwość nieprzezroczystość CSS lub przezroczystość w samym pliku SVG. Możesz to zrobić, dodając po prostu ten kod do treści arkusza CSS:
#bg {
opacity: 0.2;
}
Uzyskasz taki wynik:
To rozwiązanie jest łatwe, ale może być problemem z wydajnością na urządzeniu mobilnym. W większości istniejących przeglądarek mobilnych rysowanie z użyciem właściwości przezroczystości może być dużo wolniejsze niż w przypadku obiektów nieprzezroczystych.
Lepsze rozwiązanie
Zmiana koloru w pierwotnej treści SVG jest znacznie lepsza niż ustawienie przezroczystości za pomocą CSS. Oto nasze logo HTML5 zmodyfikowane tak, aby było zaciemnione po zastosowaniu kolorów, a przy tym z całkowitego uniknięcia właściwości przezroczystości. Poniższy obraz tła wygląda tak samo jak w przypadku zmiany przezroczystości, ale w rzeczywistości maluje o wiele szybciej, oszczędzając czas procesora i oszczędzając przy tym baterię.
Teraz gdy znamy już podstawy, przejdźmy do innych funkcji.
Efektywne korzystanie z gradientów
Załóżmy, że chcemy utworzyć przycisk. Możemy zacząć od utworzenia prostokąta z ładnymi zaokrąglonymi narożnikami. Następnie możemy dodać ładny gradient liniowy, aby nadać przyciskowi ładną teksturę. Odpowiedni kod może wyglądać np. tak:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Otrzymany przycisk będzie wyglądał mniej więcej tak:
Zwróć uwagę, że dodany gradient przebiega od lewej do prawej. To jest domyślny kierunek gradientu w SVG. Nasze rozwiązania mogą być jednak lepsze z kilku różnych powodów: estetyki i wydajności. Spróbujmy zmienić kierunek gradientu, żeby obraz był trochę ładniejszy. Ustawienie atrybutów „x1”, „y1”, „x2” i „y2” gradientu liniowego kontroluje kierunek koloru wypełnienia.
Ustawienie tylko atrybutu „y2” pozwala zmienić gradient na przekątny. A więc ta mała zmiana w kodzie:
<linearGradient id="blueshiny" y2="1">
zmienia wygląd przycisku, wygląda on tak, jak na ilustracji poniżej.
Możemy też łatwo zmienić gradient, by przeszedł z góry na dół za pomocą tej niewielkiej zmiany w kodzie:
<linearGradient id="blueshiny" x2="0" y2="1">
i wygląda jak na obrazku poniżej.
O co więc chodzi z całą dyskusją o różnych kątach gradientu?
Okazuje się jednak, że na większości urządzeń najszybciej rysujemy wykres z gradientem działającym od góry do dołu. To bardzo mało znana tajemnica wśród entuzjastów grafiki, którzy piszą kod przeglądarek, w których gradienty pionowe (od góry do dołu) malują prawie tak szybko, jak jednolity kolor. Obiekt maluje się w poziomych liniach w dolnej części strony, a dzięki rysunkowemu kodowi kolor nie zmienia się w poszczególnych wierszach, więc go optymalizują.
Jeśli więc zdecydujesz się na użycie gradientów w projekcie strony, będą one szybsze, a efekty uboczne zużywają mniej energii. To przyspieszenie obowiązuje też w przypadku gradientów CSS, więc nie jest tylko formatem SVG.
Jeśli ta nowa wiedza dotycząca gradientu jest dla Ciebie interesująca, możesz dodać do naszego logo HTML5 fajny gradient, dodając poniższy kod:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Powyższy kod dodaje wyblakły pionowy gradient liniowy do tła naszego logo HTML5, aby nadać logo HTML5 subtelny, wielokolorowy odcień, który szybko się rozchodzi – tak szybko jak jednolite tło.
Po załadowaniu zawartości w przeglądarce na komputerze i zmianie rozmiaru do ekstremalnych formatów obrazu u góry/u dołu lub po lewej/prawej stronie będą widoczne białe paski. W każdym razie po zmianach w kodzie nad wynikowym tłem wynikowe tło będzie wyglądać tak:
Łatwe animowanie
Być może zastanawiasz się już, po co używać gradientu SVG jako tła strony. Może to mieć sens w przypadku gradientów CSS, ale jedną z zalet SVG jest to, że sam gradient znajduje się w elemencie DOM. To oznacza, że możesz je modyfikować za pomocą skryptu, ale, co ważne, możesz korzystać z wbudowanej funkcji animacji SVG, która pozwala na wprowadzanie niewielkich zmian w treści.
Zmienimy na przykład nasze kolorowe logo HTML5, zmieniając definicję gradientu liniowego na poniższy kod:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Spójrz na ilustrację poniżej, aby poznać efekt tych zmian.
Kod zmienia kolory naszego gradientu liniowego na wszystkie zdefiniowane przez nas podziały kolorów w ciągłym cyklu, który trwa 20 sekund. W efekcie gradient przesuwa się w górę strony w górę i w ogóle się nie zatrzymuje.
Piękno tego filmu polega na tym, że nie trzeba w tym celu używać żadnego skryptu. Dlatego jest on uruchamiany na tej stronie jako obraz, do którego odwołuje się strona, oraz zmniejsza obciążenie procesora mobilnego, eliminując potrzebę korzystania ze skryptu.
Poza tym przeglądarka może wykorzystać swoją wiedzę na temat malowania, aby zminimalizować nakład pracy procesora.
Jest tylko jedno zastrzeżenie: niektóre przeglądarki w ogóle nie obsługują tego stylu animacji, ale w takim przypadku otrzymasz ładne tło, ale to się nie zmieni. Można to obejść za pomocą skryptu (i requestAnimationFrame), ale to już wszystko.
Trzeba też pamiętać, że nieskompresowany plik SVG ma zaledwie 2922 bajty – jest to niezwykle mały plik, aby zapewnić tak bogaty efekt graficzny, zapewniając jednocześnie użytkownikom i odpowiednim rozwiązaniom zadowolenie użytkowników i planów transmisji danych.
Skąd wyruszyć?
W wielu przypadkach format SVG nie jest idealny, zdjęcia i filmy są lepiej przedstawiane w innych formatach. Tekst to kolejny element, w którym natywny kod HTML i CSS działają znacznie lepiej. Może być jednak idealnym narzędziem w przypadku grafiki rysunkowej.
Omówiliśmy kilka podstawowych zastosowań grafiki w formacie SVG i pokazaliśmy, jak łatwo można wygenerować niewielki fragment treści z żywą na całym ekranie grafiką przy minimalnej liczbie pobrań. Drobne ulepszenia pozwalają uzyskać niesamowite wyniki graficzne przy użyciu niewielkiej ilości znaczników. W następnym artykule przedstawimy więcej informacji o tym, jak można wykorzystać animację wbudowaną w SVG, aby uzyskać prostsze i bardziej zaawansowane efekty. Porównamy też wykorzystanie kanw z SVG, aby wybrać odpowiednie narzędzie do tworzenia witryny z grafiką mobilną.
Inne przydatne materiały
- Inkscape – aplikacja do rysowania typu open source, w której format pliku jest używany format SVG.
- Open Clip Art to ogromna biblioteka obiektowa typu open source z tysiącami obrazów SVG.
- Strona SVG W3C zawierająca linki do specyfikacji, zasobów itp.
- Raphaël – biblioteka JavaScript, która udostępnia wygodny interfejs API do rysowania i animowania zawartości SVG z zastępczymi rozwiązaniami dla starszych przeglądarek.
- Zasoby SVG od Slippery Rock University: link do świetnego artykułu dla graczy.