SVG, Programowanie w Åšrodowisku Graficznym
[ Pobierz całość w formacie PDF ]
//-->Rozdział 6: Wprowadzenie do SVG6.1 SVG - Grafika wektorowaSVG (Scalable Vector Graphics) jest uniwersalnym formatem dwuwymiarowejgrafiki wektorowej (statycznej i animowanej), którego nie obejmują adne prawa anilicencje, jest w pełni darmowym formatem. Powstał z myślą o zastosowaniu na stronachWWW, jest równie niezale nym od platformy systemowej formatem grafikiwektorowej. SVG nale y do rodziny XML dzięki czemu mo e być integrowanyz innymi językami np. XHTML. Został stworzony w 1999 roku przez jednąz najwa niejszych organizacji zajmujących się standardami w Internecie - W3C (WorldWide Web Consortium). W 2001 uzyskał status rekomendacji W3C. Opróczstandardowych obiektów (figury geometryczne, krzywe) mo na tak e opisywać filtry(np. rozmycie, cieniowanie) , przezroczystość czy gradienty. SVG pozwala na u ywaniejęzyków skryptowych (np. JavaScript), szablonów stylów CSS, a tak e na rozszerzaniefunkcjonalności poprzez dodanie własnych elementów i właściwości przy pomocystandardowych technik XML, mo e być równie u yty wewnątrz innego dokumentu(aplikacji XML) np. XHTML. Dzięki dobrej jakości figur i małej objętości ma onszanse zdominować rynek i wyprzeć niektóre z dzisiejszych formatów zapisywaniaobrazów. Poniewa w grafice wektorowej ka da bryła jest opisana matematycznie, mabardzo dobrą jakość zarówno w postaci elektronicznej czy wydruku. Prostota językaumo liwia nam w niewielkim czasie na zmianę wyglądu elementów, bądź całych grafikczy serwisów. Podobnie jak w HTML plik XML mo na edytować w notatniku.[9]XML (Extensible Markup Language) oznacza Rozszerzalny Język Znaczników– jest to uniwersalny język przeznaczony do reprezentowania ró nych danychw strukturalny sposób. Tak samo jak SVG jest niezale ny od platformy, co umo liwiałatwą wymianę dokumentów pomiędzy ró nymi systemami i znacząco przyczyniło siędo popularności tego języka w dobie Internetu. XML jest tak e jak SVG standardemrekomendowanym oraz specyfikowanym przez organizacje W3C.[9]Grafika wektorowa (obiektowa) jest jednym z dwóch podstawowych rodzajówgrafiki komputerowej, w której obraz jest opisany za pomocą figur geometrycznych,umiejscowionych w matematycznie zdefiniowanym układzie współrzędnych. Nazwagrafika obiektowa wzięła się z tego, i obraz jest opisany za pomocą tzw. obiektów,które są zbudowane z podstawowych elementów zwanych prymitywami, czyli prostychfigur takich jak odcinki, krzywe, okręgi czy wielokąty. Ka dy z prymitywów opisanyjest za pomocą parametrów takich jak współrzędne odcinka czyśrodkai długościpromienia w okręgu. Obiekty te mają tak e określone atrybuty mówiące o kolorze liniiczy wypełnieniu jednolitym kolorem bądź gradientem. W przeciwieństwie do grafiki95rastrowej grafika wektorowa jest w pełni skalowalna co oznacza, i obraz wektorowymo na powiększać oraz zmieniać jego proporcje bez wpływu na jakość. Sama jakośćuzale niona jest jedynie od dokładności opisu obrazu poprzez prymitywy.[9]Porównanie jakościPowiększenie rastra (PNG) oraz wektora (SVG).Rysunek 72: Porównanie jakości grafikiStruktura plikuGrafika rastrowa skalda się pikseli, wektorowa z układu współrzędnych.Rysunek 73: Ró nice w budowiePlik SVG zawiera wersję języka XML, link do dokumentacji oraz sekcję <svg>zawierającą całą składnie dokumentu.KdzWWh>/t d ^s'96EdZdKZ ^s'Programy które posłu yły do przedstawienia formatu SVG to Inkscape oraz oXygenXML Editor. W przykładach został pominięty wpis<?xml version="1.1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"6.2 Tworzenie podstawowych kształtówPoniewa SVG oparty jest o składnię języka XML co jednoznacznie określa ibłąd popełniony w kodzie uniemo liwi poprawne działanie naszego obrazu. W SVGrozró niane są cztery podstawowe figury:[9]•Rect(prostokąt)•Elipse(elipsa)•Circle(okrąg)•Poligon(wielokąt)Poza tymi czterema rodzajami mo na stworzyć dowolną bryłę za pomocą znacznika<path/> - określa on bowiem łuki i łamane. Mo na określić równie kolor, grubośćobramowania, jak równie ustalić rozmiar i poło enie ka dej z brył oraz ichzgrupowanie za pomocą znacznika <g>. Do dokumentu mo na równie wprowadzićgrafikę rastrową korzystając z polecenia <image xlink:href="" />. Po za tym mo nau ywać zdarzeń takich jak onMouseover, onClick, itp.Podstawowe kształtyCircle(okrąg)Rysunek 74: Okrąg97Zdefiniowanie rozmiaru grafiki oraz poło enia, koloru, obramowania i rozmiaruokręgu.Rectangle(prostokąt)Rysunek 75: ProstokątZdefiniowanie rozmiaru grafiki oraz poło enia, koloru, obramowania i rozmiaruprostokąta.Line(linia)Rysunek 76: LiniaZdefiniowanie linii wraz z kolorem i grubością poprzez ustalenie współrzędnychpoczątkowych i końcowych.98Polygons(wielokąty)Zdefiniowanie przykładowych kształtów jak równoległobok czy gwiazda.Rysunek 77: Wielokąty<svg width="200" height="200">Punkty tworzenia równoległoboku.Punkty tworzenia gwiazdy.<polygonpoints="35,37.537.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,5527.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: yellow; stroke: green;" />Punkty tworzenia przykładowej figury.<polygonpoints="6060, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95"style="fill: blue; stroke: black; stroke-width: 2;" /></svg>Path(ście ka)Zdefiniowanieścieki według określonych punktów.Rysunek 78:ŚciekaD>99
[ Pobierz całość w formacie PDF ]