|
SVG (1)
SVG - Scalable Vector Graphics jest językiem opisującym d
wuwymiarową grafikę wektorową. Ma on ogromną przewagę na zwykłą
grafiką restrową ( JPEG ) w której zapisywany jest każdy
piksel. W grafice wektorowej każda bryła jest opisana
matematycznie. Daje to w efekcie wiele wymiernych korzyści:
- Bardzo dobra jakość zarówno w postaci elektronicznej, jak
i druku
- Obrazek można edytować nawet w zwykłym notatniku
- Mniejszy rozmiar od obrazu grafiki rastrowej
- Można zmienić dowolny element, bez potrzeby ponownego
tworzenia dokumentu
- Obraz można dowolnie skalować
SVG jest zgodny ze wszystkim dotychczasowymi standardami Word Wide
Web Consorcium. Język ten należy do rodziny XML. Ma on bardzo
wiele zalet, mi. jest łatwy do nauczenia. Posiada on taką samą
składnię jak każdy inny język z rodziny XML. Miejmy nadzieje,
że nie podzieli on losu SMIL czy PGML'a który jest raczej
martwym językiem. Dla zwykłego użytkownika nie posiadającego
przeglądarki bądź plug-in'a. Jest to największa bariera jak może
spotkać ten język.
W SVG wyróżniamy cztery podstawowe rodzaje figur; rect
(prostokąt), elipse (elipsa), cricle (okrąg) oraz poligon
(wielokąt). Twórca dokumentu może ustalić rozmiar i położenie
każdej z tych brył. Poza tymi czterema rodzajami użytkownik może
stworzyć swoją własną bryłę za pomocą znacznika <path/>.
Określa on łuki i łamane. Twórca może określić kolor, grubość
obramowania oraz jego kolor. Może także grupować obiekty za
pomocą znacznika <g> A oto przykład dokumentu, w którym
zapisana jest okrąg.
przykład 1.1
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN"
"http://www.w3.org/Graphics/SVG/svg-19990812.dtd">
<svg>
<cricle style="fill:blue; stroke:red;" cx="200" cy="200" r="15"/>
</svg>
Atrybut FILL określa kolor wypełnienia figury, drugi atrybut -
STROKE określa kolor obramowania. Za pomocą atrybutu R określa
się promień figury.Domyślna wartość to piksele, a więc
figura ma 30px. średnicy. Atrybuty x i y określają pozycję
obiektu ( x - rzędne, y - odcięte ). Twórca może także
wprowadzić do dokumentu grafiki SVG, dokument grafiki rastrowej.
Musi użyć do tego celu <image xlink:href="" />.
Poza tym w dokumencie SVG można także używać zdarzeń takich
jak onMouseover, onMouseout, onClick itp. Jak można było zauważyć
na przykładzie 1.1 atrybut x został zamieniony na cx, a y na cy.
Tak powinien poprawnie wyglądać ten atrybut. W przypadku
prostokontu (rect) atrybuty będą miały wygląd rx i ry, w
przypadku wieloboku (polygon) px i py, w przypadku elipsy (elipse)
ex i ey. A teraz podam wartości atrybutu STROKE: stroke-witdh
określa grubość obramowania figury. Domyślną jednostką miary
jest piksel (px). Stroke-anysaling określla stopień
przezroczystości figury. Czasmi zachodzi potrzeba zgrupowania
kilku figur na przykłąd wtedy gdy wszystkie są tak samo
formatowane. Takie rozwiązanie ma dwie zalety: oszczędzamy czas
nie pisząc kilka razy tego samego oraz upraszczamy kod. Obrazuje
to przykład 1.2.
Przykład 1.2
<g style="fill:blue; stroke-width:5;">
<cricle cx="5" cy="45" r="12"/>
<cricle cx="34" cy="89" r="55"/>
</g>
Za pomocą znacznika <g> określmy styl wszystkich obiektów
podrzędnych jako niebieskie obramowanie szerokości 5 pikseli.
Unikamy dzięki temu przepisywania dwa razy tego samego kodu.
Efektem tego są dwa okręgi różnej wielkości formatowane w ten
sam sposób.
Linie
Linie definiuje się za pomocą znacznika polyline. Ma on jeden
atrybut: points. Ma on następującą postać: <polyline points="początek
lini, koniec lini". Grubość i kolor lini określ się tak
samo jak w przypadku zwykłych brył. Oczywiście linia nie musi
być prosta. Może narysować jakąś łamaną. Np.
points="350,375 350,250 450,250 450,375
550,375 550,175 650,175 650,375
750,375 750,100 850,100 850,375
950,375 950,25 1050,25 1050,375
1150,375"
Da nam łamaną otwartą. Przykład zaczerpnięty z dokumentu ze
strony W3C.
Wielobok - znacznik polygon
Wielobok definiuje się w taki sam sposób jak łamaną. Jednak
zamiast znacznika polyline używa się znacznika <polygon/>
Początek odcinków określ się tak samo jak w przypadku lini za
pomocą atrybutu points.
Kurs pochodzi z serwisu HTMLZone
serwis webmasterów.
|
