Tworzenie oszałamiających treści na urządzenia mobilne wymaga zrównoważenia ilości pobieranych danych z maksymalnym 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 za pomocą wektorów i rasterów, ale istnieją też inne rozwiązania, 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 elastyczne projektowanie obejmuje duży problem z ekranami o różnych rozmiarach, a format SVG doskonale sprawdza się na ekranach 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 tonach ciągłych.
Jedną z najprzydatniejszych cech formatu SVG jest to, że jest on niezależny 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 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 wyświetl je w dowolnej nowoczesnej przeglądarce, a przekonasz się, że doskonale dopasowuje się 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 takie ważne? 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, że wyświetlimy użytkownikom tylko jeden zasób, bez znajomości rozmiaru ekranu lub okna – to świetnie.
Ale to nie koniec – logo HTML5 ma zaledwie 1427 bajtów. To bardzo mały plik, który nie obciąży Twojego planu transmisji danych mobilnych. Będzie się szybko wczytywać, a to oznacza, że będzie tani i szybki dla użytkowników.
Kolejną zaletą plików SVG jest to, że można je skompresować za pomocą GZIP, aby jeszcze bardziej zmniejszyć ich rozmiar. Przy skompresowaniu w ten sposób SVG trzeba zmienić rozszerzenie pliku na „.svgz”. W przypadku logo HTML5 po skompresowaniu zmniejsza się do zaledwie 663 bajtów i większość nowoczesnych przeglądarek obsługuje je z łatwością.
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 niższą jakość niż w przypadku formatów SVG i PNG. Gdybyśmy używali pliku PNG, dałoby to ponad 80-krotny wzrost, co jest niesamowite!
Oczywiście pliki PNG i JPEG nie są sobie równe. 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 przedstawiający prawą górną część logo HTML5, powiększony 6x. Obraz po prawej stronie to ten sam obraz, ale zakodowany w formacie JPEG.
Łatwo zauważyć, że zapisywanie rozmiaru plików w formacie JPEG wiąże się z kosztami, ponieważ w ostrych krawędziach znajdują się artefakty kolorowe, co prawdopodobnie powoduje, że siatkówka myśli, że potrzebuje okularów:-) Jeśli chodzi o obiekty, format JPEG jest zoptymalizowany pod kątem zdjęć i dlatego nie sprawdza się w przypadku grafiki wektorowej. 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 wektorowych tła
Zobaczmy, 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>
Obrazy mają wyraźne i wyraźne krawędzie, bez względu na rozmiar wyświetlacza.
Potem chcemy oczywiście umieścić w tle trochę treści.
Jak widać, wynik nie jest idealny, ponieważ nie możemy odczytać tekstu. Co 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. Możesz to zrobić, dodając ten kod do treści CSS:
#bg {
opacity: 0.2;
}
Da to 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. Zmianie uległy użyte kolory, a w tym procesie całkowicie pominięto właściwość krycia. Obraz tła poniżej wygląda identycznie jak wynik po zmianie przezroczystości, 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. Możemy zacząć od utworzenia prostokąta z ładnymi zaokrąglonymi rogami. Następnie możemy dodać ładny gradient liniowy, aby nadać przyciskowi przyjemną fakturę. Kod, który to umożliwia, 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 przez nas gradient biegnie od lewej do prawej. Jest to domyślny kierunek gradientu w pliku SVG. Możemy jednak zrobić to lepiej z kilku powodów: estetyki i wydajności. Spróbujmy zmienić kierunek gradientu, aby wyglądał nieco lepiej. Ustawienia atrybutów „x1”, „y1”, „x2” i „y2” gradientu liniowego określają 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 obrazku.
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 wygląda to tak, jak na obrazku poniżej.
O co chodzi z tymi wszystkimi dyskusjami na temat różnych kątów gradientu, o to pytasz?
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: gradienty pionowe (od góry do dołu) malują prawie tak samo szybko jak jednolite kolory. (Przyczyna jest taka, że rysowanie obiektu odbywa się w poziomych liniach na stronie – a główne elementy kodu rysunku wiedzą, że kolor nie zmienia się na poszczególnych liniach, więc optymalizują 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 wyblakły pionowy gradient liniowy do tła naszego logo HTML5, co nadaje logo HTML5 delikatny, wielokolorowy odcień, który działa szybko – jak na jednolitym tle.
Jeśli wczytasz treści w przeglądarce na komputerze i zmieniasz ich rozmiar na ekstremalne proporcje, na górze/na dole lub po lewej/po 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 ją modyfikować za pomocą skryptu, ale co ważniejsze, możesz korzystać z wbudowanej funkcji animacji SVG, by wprowadzać drobne 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 przez wszystkie ograniczenia kolorów zdefiniowane w ciągłym cyklu, który trwa 20 sekund. W efekcie gradient sprawia wrażenie, że ciągle przesuwa się w górę strony, i nie zatrzymuje się.
Najważniejsze jest to, że nie musisz tworzyć skryptu. Dlatego działa jako obraz odniesienia na tej stronie, a jednocześnie zmniejsza obciążenie procesora mobilnego, eliminując potrzebę użycia skryptu.
Ponadto sam przeglądarka może wykorzystać informacje o malowaniu, aby zapewnić minimalny narzut procesora do wykonania skomplikowanej 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ść, korzystając ze skryptu (i requestAnimationFrame), ale wykracza to poza zakres tego artykułu.
Warto zauważyć, że ten nieskompresowany plik SVG ma tylko 2922 bajty – jest to niezwykle mały rozmiar, aby zapewnić tak bogaty efekt graficzny, a przy tym zadbać o zadowolenie użytkowników i planów danych.
Dokąd stąd?
W wielu przypadkach format SVG nie jest idealny, ponieważ zdjęcia i filmy są lepiej reprezentowane w innych formatach. Kolejna wartość to tekst, gdzie natywny kod HTML i CSS ogólnie 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 niewielkiej ilości znaczników. W następnym artykule dowiemy się, jak wykorzystać animację wbudowaną w SVG do tworzenia prostych i bardziej zaawansowanych efektów. Porównamy też wykorzystanie kanwy z formatem SVG, by wybrać odpowiednie narzędzie do tworzenia mobilnej witryny z grafiką.
Inne przydatne zasoby
- Inkscape – aplikacja do rysowania typu open source, która używa formatu pliku SVG.
- Open Clip Art to ogromna biblioteka clipartów 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 opcją fallbacku dla starszych przeglądarek.
- Zasoby SVG z Uniwersytetu Slippery Rock – zawierają link do świetnego podręcznika SVG.