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.

Za pomocą SVG możemy stworzyć np. menu na stronę WWW:

1. Nowy dokument SVG

Stworzymy nowy plik z rozszerzeniem *.svg oraz zdefiniujemy obszar roboczy viewBox o wymiarach 600×50 pikseli:

2. Gradient

Tło menu stanowić będzie prostokąt z wypełnieniem gradientowym. Gradient tworzony jest z wykorzystaniem tagu <lineargradient>, który powinien być umieszczony pomiędzy znacznikami <defs></defs> (tagi definicji). Za pomocą współrzędnych punktów (x1,y1) (x2,y2) wyznaczymy początek i koniec kreślenia gradientu. Tagi <stop> opisują początkowy i końcowy kolor oraz jego przezroczystość.

• id – unikalna nazwa gradientu
• x1, x2, y1,y2 – początek i koniec kreślenia gradientu
  Gradient może składać się z dwóch lub więcej kolorów. Każdy kolor jest definiowany za pomocą tagu <stop>
• offset – miejsce w którym dany kolor zaczyna się lub kończy

Prostokąt z wypełnieniem gradientowym utworzymy za pomocą tagu <rect>:

• id – unikalna nazwa prostokąta
• width, height – szerokość i wysokość prostokąta
• fill – wypełnienie prostokąta

Powyższa definicja utworzy prostokąt z wypełnieniem gradientowym:

3. Linie poziome

Prostokąt „przykryjemy” liniami – 2 na górze o grubości 2 i 1 piksela oraz jedna na dole o grubości 5 pikseli.

• stroke-width – grubość linii
• stroke – kolor linii
• x1, y1, x2, y2 – współrzędne określające początek i koniec kreślenia linii

Poszczególne elementy graficzne są rysowane w takiej kolejności, w jakiej znajdują się w dokumencie svg.

4. Linie pionowe

W kolejnym kroku wykreślimy pionowe linie oddzielające poszczególne elementy menu. W celu realizacji tego zadania utworzymy linię o grubości 1px, którą zamkniemy w tagu grupowania obiektów <g> (będziemy odwoływać się do id grupy).

Poszczególne linie narysowane zostaną w miejscach, które wskazują współrzędne x. W danym przykładzie linia powtarzana będzie co 100px.

5. Elementy tekstowe menu

Treść, która będzie się pojawiać w menu zdefiniujemy za pomocą tagu <text>. Dla poszczególnych elementów wystarczy podać współrzędne ich położenia oraz zdefiniować kolor, krój, rozmiar czcionki itp. za pomocą arkusza stylów CSS.

Start
O nas
Aktualności
Blog
Download
Kontakt

.item {
font-family: Arial Narrow, sans-serif;
		font-size: 14px;
		text-anchor: middle;
		fill: #7dbded;
		text-rendering: optimizeLegibility;
}

6. Efekt HOVER

Pozostaje nam jedynie przygotowanie definicji dla efektu hover elementu menu. Posłużymy się w tym celu elipsą, na którą nałożymy filtr gaussowski.

Aby zobaczyć wynik działania filtru gaussowskiego należy ustawić chwilowo display:visible

Efekt rozmycia uzyskamy dzięki wykorzystaniu filtra gaussowskiego. Parametr strDeviation podaje odchylenie standardowe dla operacji rozmycia (stopień rozmycia). Nasz filtr gaussowski zostanie umieszczony w tagu <filter>.

Pozostaje nam jedynie utworzyć ścieżkę wycinania o szerokości elementu (100px) oraz wysokości 42px tak, aby nie przykrywał nam linii. Ścieżkę wycinania definiujemy za pomocą tagu <clipPath>, w którym możemy umieścić konkretne ścieżki, kształty oraz tekst.

Definicja stylów CSS wygląda następująco:

#layer {
fill:#65a1d5;
filter:url(#Gaussian_Blur);
clip-path:url(#clip); }

Przy pomocy javascriptu będziemy sterować efektem hover, czyli uzyskamy efekt podświetlenia elementu menu po najechaniu na niego myszką.

function hideLayer()
{
document.getElementById("layer").style.display="none";
}

function showLayer(v)
{
document.getElementById("layer").style.display="inline";
document.getElementById("layer").cx.baseVal.value=v+50;
document.getElementById("hover-layer").x.baseVal.value=v-1;
}

Plik SVG może być wyświetlony oddzielnie od strony, jako samodzielny dokument. Może być także włączony w stronę WWW za pomocą obiektów np.

Plik źródłowy *.svg można pobrać tutaj.

Reasumując – SVG może być dobrą alternatywą dla Flasha (w niektórych przypadkach można całkowicie wyeliminować obiekty Flash). Jest odporny na wszelkiego rodzaju filtry, blokady reklam. Przyjazny dla wszelkiego rodzaju wyszukiwarek, skryptów czy zewnętrznych aplikacji. Pliki w tym formacie mają mniejszy rozmiar niż klasyczne bitmapy i można je dowolnie skalować bez utraty jakości. Jeżeli chcemy zmienić wygląd naszej grafiki nie potrzebujemy zewnętrznych programów graficznych, wystarczy dowolny edytor tekstu. Jeżeli dodamy do tego wszystkiego obsługę modelu DOM, osadzanie wewnątrz dokumentu SVG skryptów Javascript, PHP czy python – to już mamy wyraźną przewagę nad systemami zamkniętymi.

Jeśli mam wybierać: Flash czy SVG? Stawiam na SVG.