Język SVG. Język opisu grafiki wektorowej Scalable Vector Graphics

Transkrypt

1 Język SVG Język opisu grafiki wektorowej Scalable Vector Graphics

2 Język SVG (Scalable Vector Graphics) stanowi format opisu informacji wizualnej wykorzystujący składnię XML. Pierwotnym przeznaczeniem SVG to czytelna reprezentacja tekstowa statycznej grafiki wektorowej. Obecnie w składni SVG można opisać grafikę łączącą elementy wektorowe i tekstowe z rastrowymi oraz zaawansowane animacje wektorowe. Specyfikacja języka SVG w wersji 1.1 (z początku 2003r.) ma status rekomendacji konsorcjum W3C, a obecnie wchodzi specyfikacja języka SVG w wersji 1.2.

3 Przeznaczenie SVG wykorzystywany jest do wizualizacji danych o charakterze specjalistycznym: - opracowywaniu map wektorowych na podstawie danych z systemów informacji przestrzennej, - w profesjonalnej grafice wektorowej i geometrii wykreślnej, - w aplikacjach ogólnego przeznaczenia, jako narzędzie do opracowywania wykresów, diagramów, schematów blokowych i schematów przepływu, - do prezentacji wszelkich struktur grafowych, a w szczególności grafów obrazujących połączenia i przepływy pomiędzy węzłami( wizualizacja topologii sieci komputerowych). Przeglądarki Mozilla, Google Chrome obsługują wizualizację SVG, Internet Explorer do wizualizacji potrzebował pluginu (Adobe SVG Viewer for Internet Explorer).

4 Struktura dokomentu svg <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg version="1.1" xmlns=" xmlns:xlink=" <! kod SVG --> </svg>

5 Dokument SVG Podstawowe elementy języka SVG pozwalają opisać dwuwymiarową grafikę w składni XML. SVG jest oparty o składnię języka XML co jednoznacznie określa iż błąd popełniony przez programistę w kodzie uniemożliwi poprawne działanie obrazu.

6 Co za pliki, jaki format: XML i SVG Plik przejściowo zapisany jest jako xml, na etapie projektowania. Przeglądarki interpretuja kod XML i można podejrzeć kod skompilowany, czyli obrazek. Po tym etapie, pliki zapisuje się do formatu SVG. W SVG już nic nie można poprawić

7 Przynależność dokumentu SVG do odpowiedniej przestrzeni nazw Dokument SVG zdefiniowany jest w obrębie głównego elementu ograniczonego przez znacznik <svg>. Definiuje on przynależność dokumentu SVG do odpowiedniej przestrzeni nazw: <svg xmlns=" xmlns:xlink=" version="1.1 > </svg> <!- -kod SVG-- ->

8 Osadzenie dokumentu SVG 1. Osadzenie w dokumencie HTML 5, XML 2. Plik svg, którego można wywołać w dokumentach HTML i XHTML Umieścić bezpoedniow kodzie strony internetowej lub odwołać do pliku svg. Technik odwoływania się do pliku jest kilka:

9 Osadzenie w dokumencie HTML 5 Jest to najprostszy przykład dodawania SVG do strony z HTML5. Jest on użyteczny w testowaniu ponieważ: Gdy obraz jest wyświetlany w kilku miejscach, kod jest powielany, strona przez to dłużej się ładuje, element ten nie zostanie zapisany w cacheprzeglądarki, ponieważ za każdym razem będzie ładowany razem ze stroną.

10 Struktura poprawna do zapisu w formacie svg <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <svg xmlns=" version="1.1" xmlns:xlink=" width="600" height="600" > <! SVG--> </svg> Struktura niepoprawna do zapisu w formacie svg

11 Jeśli mamy poprawny plik SVG do wywołanie jego odbywa się na ogólnej zasadzie:

12 Podstawowe obiekty graficzne Wyrózniamy trzy rodzaje obiektów: 1. Elementy wektorowe (odcinek, prosta,łamana, łuki). 2. Odnośniki do grafiki rastrowej. 3. Tekst sformatowany, wraz z opcjonalnymi definicjami symboli i kroju czcionek. Elementy graficzne budowane są poprzez tworzenie obiektu z cegiełek mniejszych fragmentów. Grupowanie odbywa się znacznikiem <g>. Z elementów wektorowych możemy tworzyć cztery podstawowe figury: rect (prostokąt), elipse (elipsa), circle (okrąg), poligon (wielokąt).

13 Rozmiary płótna dokumentu <svg version="1.1" width="600" height="400" xmlns=" xmlns:xlink=" </svg> Domyślna wartość to piksele, można w % (100% x 100%)

14 Płótno też można cieciowąć (tło) <svg version="1.1" width="600" height="400" style="background:rgb(200,207,157)" xmlns=" xmlns:xlink= </svg>

15 Figury płaskie 1. Linia o początku (x1, y1) i końcu (x2,y2): line <?xml version="1.0" standalone="no"?> <svg width="600" height="600"> <desc>linia</desc> <line x1="10cm" y1="5cm" x2="10cm" y2="15cm" style="stroke:#ff0000; stroke-width:1px" /> <line x1="5cm" y1="10cm" x2="15cm" y2="10cm"style="stroke:#ff0000; stroke-width:1px" /> </svg> Jak poznamy transformację, to wykonamy jedną linię, a drugą uzyskamy z jej transformacji (obrót 90 st.) Obramowanie: stroke

16 Obramowanie: stroke stroke kolor linii brzegowej, cecha ta określa kolor obramowania. Możemy się tu posługiwać imiennymi nazwami kolorów czy ich definicjami RGB stroke-width grubość linii brzegowej stroke-linecap zakończenie (round, null) stroke-dasharry:l1,l2 kreskowanie linii, według schematu kreskaprzerwa. Na przykład wartość stroke-dasharray="5,5" tworzy 5- pikselową kreskę i 5-pikselowy odstęp. stroke-linejoin zakończenie dla kształtu polyline(miter, round i bevel).

17 2. Koło o początku (cx,c y) i promieniu (r): circle <?xml version="1.0" standalone="no"?> <svg width="600" height="600"> <desc>kolo</desc> <circle cx="10cm" cy="10cm" r="5cm" style="stroke:red"/> Jest to figura domknięta, domyślnie wypełniona kolorem white(#ffffff). fill:#kod_koloru kolor wypełnienia Ustawiłem tak, że środek koła pokrywa się ze środkiem przecięcia linii. Koło przykryło linie (II warstwa), gdyż elementy rysowane są w kolejności kodu.

18

19 3. Prostokąt, początek(x, y) szerokość ( x), wysokość (y) rect width height <svg version="1.1" width="600" height="600 xmlns=" xmlns:xlink=" <desc>prostokat</desc> <rect x="100" y="100" width="200" height="100" style="fill:#66121a; stroke:#ff0000; strokewidth:2" /> </svg>

20 3.1. Zaokraglenie prostokąta: rx = ry = <rect x="20" y="80" width="160" height="40" fill="#ffffff" rx="5" ry="15" />

21 4. Elipsa o początku (cx,c y), średnica pozioma (rx), średnica pionowa (ry) : elipse

22 5. Wielokąt : polygon points="350,75 379, " Pary punktów ze spacją Figurę planowałem na papierze milimetrowym

23 Przykład, w którym wytworzony obiekt wywoływany jest w dokumencie HTML 5 <svg width="200px" height="200px"> <circle cx="100" cy="100" r="90" fill= "#ffffff" stroke="#000000" /> <circle cx="100" cy="100" r="75" fill="#0000ff" /> <polygon points="100 40, , , , , 90 90, 60 90, " fill="#ffffff" /> </svg>

24 6. Krzywa łamana : polyline points="350,75 379, " Linie można łamać na spacji Uwaga!. Kończymy w tym samym punkcie, w którym zaczeliśmy, jęsli krzywą chcemy zamknąć.

25 7. Krzywa Beziera : path d="ścieżka" <svg width="200px" height="200px"> <path d="ścieżka" stroke= "#ff0000" stroke-width="3" /> Parametr Mx, y lub Mx y ustawia pióro w punkcie do rysowania, wyznacza wsłrzędne absolutne Ścieżka: <path d="m C

26 Należy zaznaczyć, że domyśnieuruchamia się parametr fill:# Aby tło nie było widoczne, tło płótna i fillmuszą być takie same wartości.

27 Ścieżki path= ścieżka Mx,y(lub Mx y) oznacza ustawienie pióra do rysowania w danym punkcie obszaru, jest to absolutne położenie punktu: M50,50 h+x, h-xto polecenie rysowania od aktualnej pozycji pióra poziomej linii o długości x pikseli. Przykład: h+10 oznacza, że od bieżącego punktu zostanie namalowana pozioma linia o długości x=10 pikseli. v+y, v-yto polecenie rysowania od aktualnej pozycji pióra pionowej linii o długości x pikseli. Przykład: v+100 oznacza, że od bieżącego punktu zostanie namalowana pionowa linia o długości y=100 pikseli. <path d="m140,50 h+10 v+100 L h+10 L v-100 h+10" />

28 8. Krzywa Beziera i prosta L(x, y) <path d="m C L90 30"> Punkt L można dalej traktować jako początek i dalej zaokrąglać krzywą Beziera. <path d="m C L90 30 C "> Uwaga!, aby zamkąć ścieżkę path należy na samym końcu wstawić literę z

29

30 9. Krzywa Beziera + proste trasowane wektorem V i H Ścieżka: <path d="m x y v-y Cx1 y1 x2 y2 x3 y3 Cx1 y1 x2 y2 x3 y3 v+y h-x v-y" Bez zamknięcia

31 Przykład

32 Stopień przeźroczystości wypełnienia i obramowania Uzyskalibyśmy stopień przezroczystości wypełnienia i obramowania w przedziale od 0 do 1 stroke-opacity:0.6 fill-opacity:0.4

33 Grupy <g id= nazwa > Blok instrukcji</g> Gdy wszystkie elementy są tak samo formatowane można wykorzystać mechanizm grupowania figur. Takim rozwiązaniem oszczędzamy czas i upraszcza kod. Elementy grupujące możemy zagnieżdżać. Każda grupa ma atrybut id = nazwa, który ją charakteryzuje.

34 Grupy

35 Tekst W SVG istnieje także możliwość umieszczenia tekstu. Wprowadzamy go za pomocą znacznika text. Znacznik posiada również atrybuty x i y. Kolor tekstu definiuje się za pomocą atrybutu fill lub za pomocą stylów. Obramowanie tekstu definiuje się za pomocą stoke Elementy: Prostokąt obramowany Tekst, tło, obramowanie, czcionka (wielkość, styl), położenie początkowej litery

36 Znacznik : text <text x= " y=" " style= " "> UKSW WARSZAW </text> Wight, height(płótno) <text x= 140 y= 165

37

38 Formatowanie tekstu znacznikiem: tspan Dzięki niemu można ustalić położenie pojedynczych liter (L) <tspan x="l1 l2 l3.. l n " y="l1 l2 l3 l n "> </tspan> l1 l2 l3.. l n

39 dx = - odstęp pomiędzy literami dy = - odstęp pomiędzy liniami <tspan x="15" dy="25" dx="10,10,10,10,10,10"> </tspan>

40 SVG nie obsługuje łamania tekstu, należy odpowiednio manipulować współrzędnymi. Należy zdefiniujować położenie określonych fragmentów tekstu. Czasami zdarza się, że niektóre przeglądarki tekst puszczaja poza obszar płótna. Jeśli tak się stanie należy zliwidować domyślną wartość overflow:visible na overflow:hidden. Hidden nie pozwala na wchodzenie elementów poza zadeklarowany obszar SVG. <svg width="600px" height="250px" style="overflow:hidden"> Łamać można współrzędn a x lub aytybutem dy

41 dy = -odstęp pomiędzy liniami, znacznik <tspan> sam przenosi do nowej linii. <text x=" " y=" " fill=" " font-size=" " font-family=" "> <tspan x=" " dy=" "> Uniwersytet Kardynała S. Wyszyńskiego</tspan> <tspan x=" " dy=" "> Warszawa ul. Wójcickiego 1/1</tspan> <tspan x=" " dy=" "> Projektowanie aplikacji internetowych</tspan> </text> Pierwsza lilina nieporzebnie została potraktowana dy

42 Atrybut textlenght = Do każdego znacznika tspanmożna dodać textlengt=" ", dzięki temu nastąpi rozstrzelenie tekstu na wskazaną szerokość obrazka (tylko na szerokość płótna).

43 Gradienty Gładkie przejście od jednego koloru do drugiego. Specyfikacja SVG wyróżnia dwa rodzaje gradientów: -liniowe(linear),poziome, pionowe kątowe, -radialne (Radial), które można też określić mianem promienistych. Liniowy:LinearGradient defs> <lineargradient id="grad1" x1="30%" y1="0%" x2="80%" y2="0%"> <! kod--> </lineargradient> </defs Wartości x1, x2, y1, y2, wyrażone w procentach, określają przestrzeń rozpoczęcia i zakonczeniaprzejścia między kolorami. Maksymalna wartość wynosi 100%, czyli całą wysokość (piomowy) lub szerokość obiektu (poziomy).

44 defs> <lineargradient id="grad1" x1="30%" y1="0%" x2="80%" y2="0%"> <! kod--> </lineargradient> </defs W gradiencie poziomym wartości y1 i y2 są takie same, różnią się wartości x1 i x2 W gradiencie pionowym jest odwrotnie. Jeśli przyjmiemy, że x1=30%, x2=80%, wtedy gradient będzie rozchodził się na przestrzeni od 30 do 80% szerokości obiektu. Kolory zielony i czerwony zaczynają się przenikać na szerokości od 30%, do 80%.

45 Wprowadzenie kolorów: defs> <lineargradient id="grad1" x1="30%" y1="0%" x2="80%" y2="0%"> <stop offset="0%" style="stop-color:#00ff00;stop-opacity:1" /> <stop offset="100%" style="stop-color:ff0000;stop-opacity:1" /> <! kod--> </lineargradient> </defs Polecenie stop wprowadza kolor. Kolorów może być więcej niż dwa. Atrybutoffset (wyrażany w %) wskazuje, gdzie w obszarze gradientu zaczyna się dany kolor. <stop offset="10%. <stop offset="50%. <stop offset="58%. Atrybutstop-colorokreśla kolor,

46 Liniowy katowy:

47 Gradient: lineargradient <defs> <!-- Gradient --> <lineargradient id="gradient_1"> <stop offset="10%" stop-color="#ffff00" /> <stop offset="30%" stop-color="#00ff00" /> <stop offset="50%" stop-color="#ff0000" /> <stop offset="90%" stop-color="#0000ff" /> </lineargradient> </defs> Gradent dodatkowo zdefiniowanio w kontenerze <defs> Zdeginiowanygradient należy zastosować, jak widać zastosowano go do prostokąta i do linii. Teraz należy narysowąć prostokąt i linię, następnie nim sformatować linia (pats): stake= id_gradientu, Prostokąt (rect): fill= id_gradentu.

48 Kod skryptu: <defs> <!-- Gradient --> <lineargradient id="gradient_1"> <stop offset="10%" stop-color="#ffff00" /> <stop offset="30%" stop-color="#00ff00" /> <stop offset="50%" stop-color="#ff0000" /> <stop offset="90%" stop-color="#0000ff" /> </lineargradient> </defs> <!-- OBRAZ 1 --> <rect x="100" y="100" width="400" height="60" stroke="#000000" fill="url(#gradient_1)" /> <!-- OBRAZ 2 --> <path d="m C C C " stroke-width="2" fill="none" stroke="url(#gradient_1)" /> Wywołanie proste bez uzycia języka wywołań (xlink)

49 Kontenery <defs> z elementami, wywołanie elementów poprzez xlink <defs> <!--kontener--> </defs> Każdy elementsvg, zdefiniowany w kontenerzedefsdaje możliwość odwołania się do atrybutuid. IDunikalny identyfikator, wartość ta nie powinna zaczynać się od cyfr, zawierać spacji oraz polskich znaków alfabetu. <defs> <znacznik id="nazwa_unikat1" atrybut1 atrybut2... /> <znacznik id="nazwa_unikat2 " atrybut1 atrybut2... / > </defs> <use xlink:href="#nazwa_unikat1" atrybuty... /> <use xlink:href="#nazwa_unikat2" atrybuty... />

50 Kod:

51 Odwołanie wewnętrzne i odwołanie zewnętrzne <defs> <lineargradient id="gradient"> <stop offset="10%" stop-color="ffff0000" /> <stop offset="30%" stop-color="00ff00" /> <stop offset="50%" stop-color="0000ff" /> <stop offset="90%" stop-color="ff0000" /> </lineargradient> <path id="krzywa" d="m C C C " fill="none" /> <g id="extraobjekt"> <use xlink:href="#krzywa" stroke-width="4px" stroke="url(#gradient) /> </g> </defs> <use xlink:href="#extraobjekt" />

52 Rozbudujmy obiekt, dodajmy tekst <g id="extraobjekt"> <use xlink:href="#krzywa" stroke-width="4px" stroke="url(#gradient)" /> <text x="30" y="150" font-family="verdana" font-size="18pt"> Projektowanie aplikacji internetowych semestr II 2013/2014 </text> </g> Dopasujmy napis do ścieżki <textpath xlink:href="#nazwa_obiektu > Tekst jakiś tam!!!! </textpath>

53 Finał <defs> <lineargradient id="gradient"> <stop offset="10%" stop-color="ffff0000" /> <stop offset="30%" stop-color="00ff00" /> <stop offset="50%" stop-color="0000ff" /> <stop offset="90%" stop-color="ff0000" /> </lineargradient> <path id="krzywa" d="m C C C " fill="none" /> <g id="extraobjekt"> <text font-family="verdana" font-size="18pt"> <textpath xlink:href="#krzywa"> Projektowanie aplikacji internetowych semestr II 2014 </textpath> </text> </g> </defs> <use xlink:href="#extraobjekt" stroke="url(#gradient)"/>

54 Translacje 1. Przesunięcie: transform="translate(x,y)" Tak się nie wykonuje translacji, znająćxlinknależy wykorzystać ze wskazaniem na obiekt. Koniecznie należy to poprawić

55 ..... <defs> <g id="prostokat"> <rect x="100" y="100" width="200" height="120" /> </g> </defs>... <use xlink:href="#prostokat"/> <use xlink:href="#prostokat" transform="translate(50,50)" /> <use xlink:href="#prostokat" transform="translate(100,100)" />

56 Rotacja transform="rotate(param_1, param_2, param_3)" Rotate przyjmuje trzy parametry. Pierwszy z nich określa kąt, o jaki dany obiekt ma zostać obrócony, pozostałe dwa informują o tym, względem jakiego punktu obiekt ma być obrócony. defs> <g id="krzyzyk"> <rect x="100" y="190" width="200" height="20" fill="#ffffff" stroke="#ff0000" /> </g> </defs> <use xlink:href="#krzyzyk"/> <use xlink:href="#krzyzyk" transform="rotate(90,200,200)" />

57 Przykład

58 Pierwszy obiekt z transformacjami potraktujmy jako cała grupę i nastepnie dokonajmy transformacji całej grupy uzyskująć w efekcie obraz końcowy

59 <!--/defs--> <g id="warstwa_1"> <use xlink:href="#gwiazdka_1"/> <use xlink:href="#gwiazdka_1" transform="rotate(90,150,150)" /> <use xlink:href="#gwiazdka_1" transform="rotate(180,150,150)" /> <use xlink:href="#gwiazdka_1" transform="rotate(270,150,150)" /> </g> </defs> <use xlink:href="#warstwa_1"/> <use xlink:href="#warstwa_1" transform="rotate(45,150,150)"/> Obiekt uzyskany w wyniku translacji jest w twjsamej skali, czyli 1:1. Można nakładane obiekty prezentować w innej skali mniejsze lub większe Służy do tego atrymut scale().

60 Skalowanie: scale(). Powiększenie, pomniejszanie obiektu: 1. Powiększanie, transform="scale(1.3)" 2. Pomniejszanie, transform="scale(0.3)" Przy skalowaniu obiekt zmienia swoje położenie ze względu na przeliczenie w skali punktów odniesienia i należy podać go translacji. Nie da się oszacować, należy liczyć według wzoru.

61 Atrybuty: scale(arg) i translate(arg1, arg2) <use xlink:href="#warstwa_1"/> <use xlink:href="#warstwa_1" transform="rotate(45,150,150) scale(0.6) "/> Scale() przyjmuje liczbę rzeczywistą, informującą o tym, w jakiej skali obiekt ma być wyświetlany. Wartości mniejsze od 1wyświetlają obiekty mniejsze, natomiast wartości większe od 1 wyświetlą obiekt większy. Pojawia się proplem z przesunięciem obiektu i należy go pozycjonować : translate(arg1,arg2 )

62 Tanslateposiada dwa argumenty określające przesunięcie o określoną liczbę punktów, względem górnej i lewej części obiektu nadrzędnego, czyli do całego obrazekasvg <use xlink:href="#warstwa_1"/> <use xlink:href="#warstwa_1" transform="rotate(45,150,150) scale(0.60) translate(arg1,arg2) "/> Przesunięcie jest skalowane przez wartość określoną w parametrze scale. W Internecie znalazłem gotowy wzór na liczenie przesunięcia, nie zastanawiałem się nad jego poprawnością: N(x,y) = S(x,y ) skala + P(x,y) sakla N(x,y) współrzędne nowe S(x,y) - współrzędne stare P(x,y) współrzędne przesunięcia Skala - wielkość w scale()

63 Nas interesuja współrzędne P(x,y), wzór musimy przekształcić: N(x,y) = S(x,y ) skala + P(x,y) sakla U nas N(x,y) to współrzędne chciane, czyli takie jakie sabie wybraliśmy. Widzimy, że obrazek poleciał bo przeskalowały się stare współrzędne. U nas N(x,y) to S(x,y( bo chcę aby początek był w początku) P(x,y) = ((150,150)-(150,150)*0.6)/0,6 = ((150,150) (90,90))/0.6 = (60,60)/0.6 = (100,100)

64

65 Pochylenie Pochylenie obiektu może dotyczyć składowej x lub y obiektu: transform="skewx(arg)" transform="skewy(arg) Lub transform="skewx(arg) skewx(arg)"

66 Style wewnętrzne w dokumencie SVG <g > <rect class="fil0 str0" x="30" y="30" width="50" height="50" /> <rect class="fil1 str0" x="30" y="80" width="50" height="50" /> <rect class="fil1 str0" x="80" y="30" width="50" height="50" /> <rect class="fil0 str0" x="80" y="80" width="50" height="50" /> </g>