Stronę tą wyświetlono już: 19026 razy

Wstęp

Format zapisu danych w grafikach SVG (Scalable Vector Graphics) gwarantuje uzyskanie grafiki o dostosowującej się do rozmiaru strony rozdzielczości. Taką grafikę (jak sama nazwa wskazuje) można skalować w zasadzie do woli, bez utraty danych. Co najważniejsze dane te są zapisywane w formacie XML Extensible Markup Language co oznacza, że format ten odpowiada formatowi zapisu treści stron internetowych w plikach HTML. Dzięki temu, pliki SVG mogą być w HTML-5 zamieszczane na stronie. Możliwość tworzenia grafiki wektorowej daje niekomercyjne i dostępne na wolnej licencji oprogramowanie jakim jest Inkscap-e.

Znacznik <svg> - definiowanie obszaru rysowania SVG

Ten znacznik umożliwia określenie obszaru rysowania grafiki wektorowej na stronie. Oto prosty przykład użycia tego znacznika z podstawowymi jego atrybutami:

W powyższym kodzie dodałem jeden obiekt graficzny, żeby było wiadomo, że coś się dzieje. Oto efekt działania:

Znacznik <line /> - rysowanie pojedynczej linii w SVG

Znacznik ten wykorzystywany jest do rysowania pojedynczej linii. Oto przykład jego użycia:

Rezultat działania:

Znacznik <polyline /> - rysowanie linii łamanej w SVG

Znacznik ten wykorzystywany jest do rysowania linii łamanej. Oto przykład jego użycia:

Rezultat działania:

W powyższym kodzie wyłączone zostało wypełnienie poprzez ustawienie stylu fill na wartość none. Oto co się dzieje, gdy ta wartość zostanie ustawiona na jakiś kolor:

Znacznik <rect /> - rysowanie prostokąta w SVG

Znacznik ten posiada nieco więcej atrybutów określających jego kształt, wszystkie te atrybuty wykorzystane zostały w przykładzie poniżej:

Rezultat działania kodu:

Znacznik <circle /> - rysowanie koła w SVG

Znacznik ten rysuje koło w następujący sposób:

W powyższym kodzie dodałem jeden obiekt graficzny, żeby było wiadomo, że coś się dzieje. Oto efekt działania:

Atrybuty cx i cy określają położenie środka koła.

Znacznik <ellipse /> - rysowanie elipsy w SVG

Oto przykład kodu rysującego elipsę:

Efekt działania:

Znacznik <polygon /> - rysowanie wielokątów w SVG

Składnią znacznik ten przypomina do złudzenia znacznik <polyline>, jednak znacząca różnica jest w działaniu, ponieważ ten znacznik automatycznie zamyka kształt łącząc końce figury geometrycznej, na którą ten się składa. Oto przykład:

Rezultat działania:

Znacznik <path /> - rysowanie ścieżki w SVG

Ten znacznik to bardziej zaawansowane narzędzie do rysowania nie tylko prostoliniowych obszarów, ale również krzywych Bezier-a. Oto przykład:

Wynik działania powyższego kodu:

W kodzie zostały wykorzystane specjalne oznaczenia, które należy interpretować w następujący sposób:

• M - przemieść do (ustawia punkt rysowania);
• L - linia do (rysuje linię do danego punktu);
• H - linia do w poziomie (rysuje linię do podanej współrzędnej x w poziomie);
• V - linia do w pionie (rysuje linię do podanej współrzędnej y w pionie);
• C - krzywa do;
• S - wygładzona krzywa do;
• Q - krzywa Bezier-a;
• T - wygładzona krzywa Bezier-a;
• A - łuk eliptyczny;
• Z - zamknięcie ścieżki.

Wyżej wymienione oznaczenia pisane dużą literą określają współrzędne bezwzględne punktu, pisane małą opisują współrzędne względem ostatniego punktu ścieżki.

Znaczniki <text> i <tspan> - wyświetlanie i pozycjonowanie tekstu w SVG

Oto przykład wykorzystania tego znacznika do wstawiania elementów tekstowych:

Rezultat działania kodu:

W powyższym kodzie warto zwrócić uwagę na styl text-anchor, który określa położenie punktu zaczepienia (kotwicy) wyświetlanego tekstu. Styl ten może przyjmować następujące wartości:

• start - oznacza umieszczenie kotwicy na początku tekstu (wyrównanie tekstu do lewej);
• middle - oznacza umieszczenie kotwicy na środku tekstu (wyrównanie do środka);
• end - oznacza umieszczenie kotwicy na końcu tekstu (wyrównanie do prawej)

Znacznik <tpsan> umożliwia pozycjonowanie tekstu w sposób bezwzględny za pomocą atrybutów x i y lub w sposób względny (względem położenia końca ostatniego znaku tekstu) z wykorzystaniem atrybutów dx i dy.

Znacznik <g> - grupowanie elementów SVG

SVG oferuje również możliwość grupowania elementów, dzięki czemu można wykonywać różne operacje np. transformacji grupy elementów znajdujących się w takim znaczniku. Oto prosty przykład zastosowania:

Rezultat działania powyższego kodu:

Znacznik <g> został wykorzystany do zgrupowania i obrócenia grupy obiektów o zadany kąt przy użyciu atrybutu transform ustawionego na wartość rotate(30 50,25), gdzie pierwsza liczba określa kąt obrotu, a dwie ostatnie punkt obrotu zgrupowanych elementów.

Znacznik <defs> - definicje formatowania obiektów w SVG

Znacznik ten przechowuje elementy, których zadaniem jest opisywanie pewnych właściwości elementów, którym dany znacznik został przypisany. Umieszczane są tutaj znaczniki filtrów graficznych, gradientów, kształtów znaczników kończących linie.

Znacznik definicji gradientu liniowego <linearGradient> w SVG

Definicję gradientu należy umieścić wewnątrz znacznika <defs>, oto przykład:

Rezultat działania:

W powyższym przykładzie wykorzystane zostały atrybuty x1, y1, x2 i y2 w celu określenia położenia początkowego i końcowego punktu gradientów. Użycie jednostek procentowych sprawia, że odwołuje się do wymiarów obiektu lub grupy obiektów, które tym gradientem zostaną wypełnione. Dużo lepszym sposobem definiowania gradientów jest:

Rezultatem czego jest taki efekt:

Znacznik definicji gradientu promieniowego <radialGradient> w SVG

Gradient ten definiuje się w podobny sposób jak linearGradient:

Rezultatem czego jest taki efekt:

Znacznik definicji obszaru przycinania <clipPath> w SVG

Znacznik ten umożliwia przycinanie elementów grafiki SVG w następujący przykładowy sposób:

Rezultat działania powyższego kodu:

Znacznik definicji filtrów <filter> oraz znaczniki filtrów w SVG

W znaczniku <defs> można również umieścić definicje filtrów graficznych. Oto ich lista:

• <feBlend> - dokonuje kombinacji graficznej elementu z elementami znajdującymi się pod nim w taki sam sposób jak np. w Gimpie można ustawić tryb nakładania warstw;
• <feColorMatrix> - filtr dla transformacji koloru;
• <feComponentTransfer>;
• <feComposite>;
• <feConvolveMatrix>;
• <feDiffuseLighting>;
• <feDisplacementMap>;
• <feFlood>;
• <feGaussianBlur> - filtr rozmycia obiektu;
• <feImage>;
• <feMerge>;
• <feMorphology>;
• <feOffset> - filtr rzucający cień;
• <feSpecularLighting> - filtr podświetlenia;
• <feTile>;
• <feTurbulence>;
• <feDistantLight> - filtr podświetlenia;
• <fePointLight> - filtr podświetlenia;
• <feSpotLight> - filtr podświetlenia;

Oto przykład zastosowania definicji filtru <feGaussianBlur>:

Wynik działania powyższego kodu:

Style obramowania elementów SVG

Format SVG umożliwia zaawansowane formatowanie stylu obramowania rysowanych elementów, z tego też względu warto przyjrzeć się stylom, które wpływają na wygląd obramowania elementów graficznych:

• stroke - określa kolor obramowania. Styl ten może być ustawiony na wartość none, co oznacza brak obramowania;
• stroke-width - określa szerokość obramowania;
• stroke-linecap - określa sposób zakończenia linii, dostępne są następujące wartości:
  • butt - płaskie
  • round - zaokrąglone
  • square - kwadratowe
• stroke-linejoin - sposób zakończenia narożników linii łamanych, dostępne są następujące wartości:
  • miter - zakończenie ostre
  • round - zakończenie zaokrąglone
  • bevel - zakończenie ścięte

• stroke-dasharray - określa wzór linii przerywanej. Oto przykładowy kod:

  <svg width="100px" height="100px" style="margin:auto;display:block"> <polyline points="0,25 100,25" style="stroke: black; fill: none; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 10,10" /> <polyline points="0,50 100,50" style="stroke: black; fill: none; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 10,10,20,10" /> <polyline points="0,75 100,75" style="stroke: black; fill: none; stroke-width: 10px; stroke-linecap: butt; stroke-dasharray: 10,10,20,10,20" /> </svg>

  i rezultat jego działania: