Tworzenie zachwycających treści na urządzenia mobilne wymaga zrównoważenia ilości pobieranych danych z maksymalizowanym efektem wizualnym. Grafika wektorowa to świetny sposób na uzyskanie oszałamiających efektów wizualnych przy minimalnym wykorzystaniu przepustowości.
Wiele osób uważa, że płótno jest jedynym sposobem na rysowanie w sieci mieszaniny wektorów i rasterów, ale istnieją też alternatywne metody, które mają pewne zalety. Doskonałym sposobem na tworzenie rysunków wektorowych jest używanie grafiki wektorowej (SVG), która jest kluczowym elementem HTML5.
Wszyscy wiemy, że elastyczny projekt strony jest bardzo ważnym elementem obsługi różnych rozmiarów ekranów, a format SVG jest idealny do łatwego obsługiwania ekranów o różnych rozmiarach.
Pliki SVG to świetny sposób na prezentowanie wektorowych rysunków liniowych. Są one też doskonałym uzupełnieniem bitmap, które lepiej nadają się do obrazów o ciągłym tonie.
Jedną z największych zalet formatu SVG jest to, że jest on niezależny od rozdzielczości, co oznacza, że nie musisz się martwić o to, 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 Rysunki na Dysku Google, Inkscape, Illustrator, Corel Draw i wiele innych, generują pliki SVG, więc istnieje wiele sposobów na generowanie treści. Omówimy sposoby korzystania z komponentów SVG oraz przedstawimy kilka wskazówek dotyczących optymalizacji.
Podstawy skalowania
Zacznijmy od prostego scenariusza – chcesz, aby grafika na całą stronę była tłem Twojej strony internetowej. Bardzo przydatne byłoby logo firmy lub coś podobnego na pełnym ekranie w tle przez cały czas, ale oczywiście trudno to dobrze zrobić z uwzględnieniem różnych rozmiarów ekranów. Aby to zilustrować, zaczniemy od logo HTML5.
Logo HTML5 jest widoczne poniżej. Jak się zapewne domyślasz, jest to plik SVG.
Kliknij logo i sprawdź, jak wygląda w dowolnej nowoczesnej przeglądarce. Zobaczysz, że dostosowuje się ono do dowolnego rozmiaru okna. Spróbuj otworzyć plik w ulubionej przeglądarce, zmienić rozmiar okna i sprawdzić, czy obraz jest wyraźny przy każdym powiększeniu. Jeśli spróbujemy to zrobić z obrazem bitmapowym, będziemy musieli wyświetlać wiele różnych rozmiarów dla każdego ekranu, z którym możemy się spotkać, lub będziemy zmuszeni do akceptowania źle wyostrzonych obrazów.
Co jest takiego ważnego? Jeśli jeszcze tego nie zauważyłeś, to jest jedyny format, który skaluje się niezależnie od urządzenia, na którym go wyświetlamy. Wystarczy więc, że wyświetlimy użytkownikom 1 zasób, bez konieczności znajomości rozmiaru ich ekranu lub okna przeglądarki – to świetne rozwiązanie!
Ale to nie wszystko – logo HTML5 zajmuje tylko 1427 bajtów. To bardzo mały plik, który nie obciąży Twojego pakietu mobilnej transmisji danych. Dzięki temu wczytuje się szybko, a co za tym idzie, jest tani i szybki dla użytkowników.
Kolejną zaletą plików SVG jest to, że można je kompresować za pomocą GZIP, aby jeszcze bardziej zmniejszyć ich rozmiar. Po skompresowaniu pliku SVG w ten sposób musisz zmienić jego rozszerzenie na „.svgz”. W przypadku logo HTML5 po skompresowaniu zajmuje ono tylko 663 bajty, a większość nowoczesnych przeglądarek radzi sobie z tym bez problemu.
W przypadku naszego przykładowego pliku na niektórych najnowszych urządzeniach skompresowane dane wektorowe zapewniają około 60-krotne przyspieszenie. Pamiętaj też, że te porównania są przeprowadzane między plikami JPEG i SVG, a nie PNG. Format JPEG jest jednak formatem stratnym, co oznacza, że obrazy w nim są gorszej jakości niż w formatach SVG i PNG. Gdybyśmy użyli formatu PNG, różnica byłaby ponad 80-krotna, co jest zdumiewające.
Oczywiście pliki PNG i JPEG nie są jednakowe. W kilku wskazówkach dotyczących optymalizacji zalecamy używanie formatu JPEG zamiast PNG, ale nie zawsze jest to dobry pomysł. Zapoznaj się z grafikami poniżej. Obraz po lewej stronie to obraz PNG prawej górnej części logo HTML5 powiększony 6 razy. Obraz po prawej stronie to ten sam obraz, ale zakodowany w formacie JPEG.
Łatwo zauważyć, że zmniejszenie rozmiaru pliku w formacie JPEG wiąże się z pewnymi kosztami, ponieważ na ostrych krawędziach pojawiają się artefakty kolorów. Prawdopodobnie Twoja siatkówka myśli sobie, że potrzebuje okularów:-) Przyznamy, że format JPEG jest zoptymalizowany pod kątem zdjęć, dlatego nie sprawdza się tak dobrze w przypadku grafik wektorowych. W każdym razie wersja SVG ma taką samą jakość jak wersja PNG, więc jest lepsza pod każdym względem – zarówno pod względem rozmiaru pliku, jak i czytelności.
Tworzenie tła wektorowego
Zobaczmy, jak można użyć pliku wektorowego jako tła strony. Jednym z prostych sposobów jest zadeklarowanie pliku tła za pomocą pozycjonowania stałego w 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 niezależnie od rozmiaru wyświetlacza obraz ma ładne proporcje i ostre krawędzie.
Oczywiście chcemy też umieścić na tle jakieś treści.
Jak widać, efekt nie jest idealny, ponieważ nie możemy odczytać tekstu. Co więc możemy zrobić?
Dostosowywanie tła do własnych potrzeb
Musimy rozjaśnić wszystkie kolory na obrazie tła. Można to łatwo osiągnąć, używając właściwości przezroczystości CSS lub przezroczystości w samym pliku SVG. Aby to zrobić, po prostu dodaj ten kod do pliku CSS:
#bg {
opacity: 0.2;
}
W efekcie otrzymasz taki wynik:
To rozwiązanie, choć łatwe, może być problemem pod względem wydajności na urządzeniu mobilnym. W przypadku większości istniejących przeglądarek mobilnych korzystanie z właściwości przezroczystości może być znacznie wolniejsze niż w przypadku nieprzezroczystych obiektów.
lepsze rozwiązanie,
Zmiana koloru w pierwotnym pliku SVG jest znacznie lepsza niż ustawienie przezroczystości za pomocą CSS. Oto logo HTML5 zmodyfikowane tak, aby wyglądało na przyciemnione przez zmianę użytych kolorów. W tym procesie nie korzystaliśmy z właściwości przezroczystości. Obraz tła poniżej wygląda identycznie jak wynik po zmianie krycia, ale w rzeczywistości będzie się rysował znacznie szybciej, co pozwoli zaoszczędzić czas procesora i cenne minuty pracy baterii.
Teraz, gdy już poznaliśmy podstawy, przejdźmy do innych funkcji.
Skuteczne korzystanie z gradientów
Załóżmy, że chcemy utworzyć przycisk. Zacznijmy od utworzenia prostokąta z ładnie zaokrąglonymi rogami. Następnie możemy dodać ładny gradient liniowy, aby nadać przyciskowi przyjemną fakturę. Kod do tego celu może wyglądać 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 przez nas gradient biegnie od lewej do prawej. Jest to domyślny kierunek gradientu w pliku SVG. Możemy jednak uzyskać lepsze wyniki z kilku powodów: estetyki i wydajności. Spróbujmy zmienić kierunek gradientu, aby wyglądał nieco lepiej. Ustawienie atrybutów „x1”, „y1”, „x2” i „y2” w gradientzie liniowym pozwala kontrolować kierunek koloru wypełnienia.
Ustawienie tylko atrybutu „y2” pozwala zmienić gradient na ukośny. Ta niewielka zmiana kodu:
<linearGradient id="blueshiny" y2="1">
zmienia wygląd przycisku, który wygląda jak na poniższym obrazie.
Możemy też łatwo zmienić kierunek gradientu z góry na dół, wprowadzając tę niewielką zmianę w kodzie:
<linearGradient id="blueshiny" x2="0" y2="1">
i ostatecznie wygląda jak na obrazku poniżej.
A po co ta cała dyskusja o różnych kątach gradientu?
Okazuje się, że ostatni przykład – ten z gradientem od góry do dołu – jest najszybszy do narysowania na większości urządzeń. Wśród maniaków grafiki, którzy piszą kod przeglądarki, krąży mało znany sekret: pionowe (od góry do dołu) gradienty malują prawie tak samo szybko jak jednolite kolory. (dzieje się tak, ponieważ rysowanie obiektu odbywa się w poziomych liniach na stronie – a kod rysowania wie, że kolor nie zmienia się na poszczególnych liniach, więc optymalizuje go).
Jeśli więc zdecydujesz się użyć gradientów w swoim projekcie strony, gradienty pionowe będą szybsze i będą zużywać mniej baterii. Ta przyspieszona renderyzacja dotyczy również gradientów CSS, więc nie dotyczy tylko SVG.
Jeśli czujesz się naprawdę odważny po zdobyciu tej nowej wiedzy o gradientach, możesz dodać fajny gradient za logo HTML5, dodając ten 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 do tła logo HTML5 niewyraźny gradient liniowy, aby uzyskać subtelny efekt wielokolorowego tła, który szybko się zmienia – tak samo szybko jak w przypadku jednolitego tła.
Jeśli wczytasz treści w przeglądarce na komputerze i zmieniasz ich rozmiar na ekstremalne proporcje, na górze, dole lub po lewej lub prawej stronie pojawią się białe paski. W każdym razie po wprowadzeniu powyższych zmian kodu wynikowe tło będzie wyglądać tak:
Animacje w prosty sposób
Zastanawiasz się pewnie, po co używać gradientu SVG jako tła strony. Może to być przydatne w przypadku gradientów CSS, ale jedną z zalet formatu SVG jest to, że sam gradient znajduje się w DOM. Oznacza to, że możesz go zmodyfikować za pomocą skryptu, ale co ważniejsze, możesz skorzystać z wbudowanej animacji SVG, aby wprowadzić subtelne zmiany w treści.
W tym przykładzie zmodyfikujemy kolorowe logo HTML5, zmieniając definicję gradientu liniowego na kod podany poniżej:
<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>
Aby zobaczyć wynik tych zmian, spójrz na obraz poniżej.
Kod zmienia kolory gradientu liniowego w ramach wszystkich zdefiniowanych przez nas kolorów w ciągłym cyklu, który trwa 20 sekund. W efekcie gradient wygląda tak, jakby przesuwał się w górę strony w ciągłym ruchu, który nigdy się nie zatrzymuje.
Najlepsze jest to, że nie musisz tworzyć skryptu. Dlatego działa jako obraz referencyjny z tej strony, ale też zmniejsza obciążenie procesora mobilnego, ponieważ eliminuje potrzebę korzystania ze skryptu.
Ponadto sam przeglądarka może wykorzystać swoją wiedzę o malowaniu, aby zapewnić minimalny narzut procesora do wykonania fantazyjnej animacji.
Jest jednak jedno zastrzeżenie: niektóre przeglądarki w ogóle nie obsługują tego stylu animacji, ale w takim przypadku nadal będziesz mieć ładne kolorowe tło, które się nie zmieni. Można to obejść, używając skryptu (i requestAnimationFrame), ale wykracza to poza zakres tego artykułu.
Warto też zauważyć, że ten nieskompresowany plik SVG ma tylko 2922 bajty – to bardzo mało, jak na tak bogaty efekt graficzny. Dzięki temu użytkownicy i ich plany taryfowe będą zadowoleni.
Dokąd teraz?
W wielu przypadkach format SVG nie jest idealny, ponieważ zdjęcia i filmy są lepiej reprezentowane w innych formatach. Kolejnym przykładem jest tekst, w którym natywny kod HTML i CSS działają znacznie lepiej. Może jednak być idealnym narzędziem w arsenale narzędzi do tworzenia rysunku liniowego.
Omówiliśmy kilka podstawowych zastosowań grafiki SVG, pokazując, jak łatwo można wygenerować małe treści, które zapewniają żywe grafiki na pełnym ekranie przy minimalnym rozmiarze pliku do pobrania. Niewielkie ulepszenia treści mogą łatwo prowadzić do niesamowitych wyników graficznych przy użyciu niewielkich ilości znaczników. W następnym artykule omówimy szczegółowo, jak animacje SVG mogą być używane do tworzenia prostych i wyrazistych efektów. Porównamy też korzystanie z płótna z użyciem SVG, aby wybrać odpowiednie narzędzie do tworzenia witryny z grafiką na urządzenia mobilne.
Inne przydatne materiały
- Inkscape – aplikacja do rysowania typu open source, która używa formatu pliku SVG.
- Open Clip Art to ogromna biblioteka clipartów na licencji open source zawierająca tysiące obrazów SVG.
- Strona W3C SVG zawierająca linki do specyfikacji, zasobów itp.
- Raphaël to biblioteka JavaScriptu, która udostępnia wygodny interfejs API do rysowania i animowania treści SVG z dodatkowymi opcjami dla starszych przeglądarek.
- Zasoby SVG z Uniwersytetu Slippery Rock – zawierają link do świetnego podręcznika SVG.