Tworzenie treści na urządzenia mobilne, które zachwycają, 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 elastyczny projekt strony jest bardzo ważnym elementem obsługi różnych rozmiarów ekranów, a format SVG doskonale nadaje się 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 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 podamy 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 wyświetlanie logo firmy lub czegoś podobnego w tle na całym ekranie 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 wyświetlić użytkownikom 1 komponent, bez konieczności sprawdzania rozmiaru ekranu czy okna.
Ale to nie wszystko – logo HTML5 zajmuje tylko 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. 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.
Na przykładowym 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ż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 jednak, ż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 najlepsza 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. 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 jest prawidłowo dopasowany i ma 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;
}
Daje 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. 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 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 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 będzie wyglądać jak na obrazku poniżej.
A co z tą dyskusją na temat różnych kątów 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: 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 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ę kończy – tak samo 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/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 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 we wszystkich zdefiniowanych przez nas kolorach w ciągłym cyklu trwającym 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.
Najważniejsze 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ć informacje o malowaniu, aby zapewnić minimalny narzut procesora do wykonania skomplikowanej animacji.
Jest jednak jedno zastrzeżenie: niektóre przeglądarki nie obsługują w ogóle 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 wbudowane w pliku SVG można wykorzystać 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 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.