Twój ulubiony magazyn on-line

Co to jest SVG?

SVG - Scalable Vector Graphics jest językiem opisującym dwuwymiarową grafikę wektorową. Ma on ogromną przewagę na zwykłą grafiką restrową 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óre są raczej martwymi językiem. Dla zwykłego użytkownika nie posiadającego przeglądarki SVG bądź plug-in'a, język jest niedostępny. Jest to największa bariera jaka może spotkać ten język.

Obiekty w SVG

Zanim zaczne pisać o właściwych obiektach w SVG, musze wspomnieć, że, aby nasz dokument był poprany musi zawierać odpowiednie dwie linijki:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/svg-19990812.dtd">

Pierwsza, określa wersję języka, druga ścieżkę do DTD dla SVG. Po nich należy umieścicie element <svg> określający początek dokumentu.

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 - odcięte, y - rzędne ). Twórca może także wprowadzić do dokumentu grafiki SVG, dokument grafiki restrowej. Musi użyć do tego celu dobrze nam znanego z technologi XLink odnośnika - <image xlink:href="" />
W dokumencie SVG można także używać zdarzeń takich jak onMouseover, onMouseout, onClick itp.

ak 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 prostokąta (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śla stopień przezroczystości figury. Czasmi zachodzi potrzeba zgrupowania kilku figur na przykład 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 linii za pomocą atrybutu points.

text

W SGV poza obrazami może istnieć także tekst. Określa się go załomocą znacznika text, także on posiada atrybuty x i y. Kolor tekstu definiuje się za pomocą atrybutu FILL lub styli kaskadowych. Mogą być one wpisane w znacznik lub przyjąć każdą z trzech form w których mogą występować.

elemnt tspan

Znacznik tspan oferuje duże możliwości formatowania tekstu. Można dzięki niemu ustalić położenie pojedynczych liter. Ma to następującą postać:
<text style="fill:red" x="20" y="1cm">
To jest znacznik tekst, a poniżej
  <tspan x="20px 30px 50px 70px 80px" y="3cm">
  tspan
  </tspan>
</text>


Powyższy fragment dokumentu wyświetli nam napis "To jest znacznik text, a poniżej" , a poniżej napis "tspan" gdzie pierwsza literka będzie oddalona od brzegu dokumentu o 20px, druga o 10 od pierwszej, następna 20 od poprzedniej, kolejna tak samo, ostatnia znowu o dziesięć. Tak więc uzyskamy ciekawy efekt. Możemy oczywiście wpisać styl za pomocą atrybutu style, np. większą cześć tekstu zabarwić na czerwono, a mniejszą na niebiesko.

Artykuł pochodzi z serwisu HTMLZone - www.language.pnet.pl.
Wszelkie prawa zastrzeżone.


Piotr "Merlin" Krajewski
e-mail: nacz.htmlzone@pnet.pl
HTMLZone - serwis dla webmasterów - www.language.pnet.pl




Stare Gry Na PC - stare gierki do pobrania

Copyright (c) 1999 - 2000 NoName