Grafika na stronach przede wszystkim kojarzy nam się z bitmapami oraz obiektami Flash. W drugim przypadku mamy do czynienia z zamkniętą technologią, nieprzyjazną wyszukiwarkom i zewnętrznym aplikacjom. Dobrą alternatywą dla klasycznych rozwiązań graficznych może być SVG. Nie jest to jeszcze format zbyt popularny, ale ma przed sobą przyszłość.
SVG (Scalable Vector Graphics) to skalowalna grafika wektorowa, dzięki czemu możemy dowolnie zmienić jej rozmiar bez utraty jakości. Format został wprowadzony przez W3C (World Wide Web Consorcium) w 2001 roku (SVG w wersji 1.1).
Format jest zgodny z językiem XML, dzięki czemu możemy swobodnie opisywać naszą dwuwymiarową grafikę – nie potrzebujemy w tym celu żadnych dodatkowych programów, wystarczy zwykły edytor tekstu. Większość programów graficznych potrafi zaimportować i wyeksportować do formatu SVG m.in. Adobe Illustrator, Corel Draw, Inkscape (w programach tych można też obrabiać pliki SVG). Niektóre przeglądarki: Firefox, Opera (która ma pełne wsparcie SVG 1.1) radzą sobie z wyświetleniem plików SVG bez potrzeby instalowania dodatkowych pluginów, w Internet Explorerze z pomocą przychodzi Adobe SVG Viewer.

Dodatkową zaletą formatu SVG jest możliwość przeszukiwania w plikach SVG pod kątem tekstu oraz znacznie mniejszy rozmiar w porównaniu z tradycyjną grafiką. W omawianym przykładzie plik SVG to zaledwie 3kB podczas gdy jego odpowiednik w średniej jakości JPEG waży 2 razy więcej.
Czytaj całość »

Powoli mijają czasy, w których tło na stronach czy przyciski tworzone są w oparciu o pliki graficzne. Efekty gradientu czy zaokrąglone rogi, których wykonanie możliwe było jedynie za pomocą programów graficznych teraz możemy osiągnąć dzięki CSS3.

O ile ostatnie wersje przeglądarek Firefox czy Safari nie będą mieć problemu z wyświetleniem takiej zawartości, o tyle gorzej uzyskać podobny efekt w IE, ale może i tutaj będą z czasem jakieś postępy – IE w wersji 9 ma już obsługiwać funkcjonalności CSS3. Dla zainteresowanych demo IE9 można pobrać tutaj.

W dalszej części artykułu porównamy składnię rysowania gradientu dla poszczególnych przeglądarek oraz stworzymy przykładowy przycisk na stronę
Czytaj całość »