Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
SVG - Scalable Vector Graphics.
Grafika SVG SVG - Scalable Vector Graphics. Źródła:
2
Podstawowe informacje
SVG jest używany do zdefiniowania grafiki wektorowej opartej na sieci SVG definiuje grafikę w formacie XML grafiki SVG nie tracą żadnej jakości, jeśli są one powiększony lub zmieniony Każdy element i każdy atrybut SVG mogą być animowane SVG jest rekomendacją W3C SVG integruje się z innymi standardami W3C jak DOM i XSL
3
Zalety SVG Obrazy SVG mogą być tworzone i edytowane za pomocą dowolnego edytora tekstu Obrazy SVG mogą być przeszukiwane, indeksowane, skrypty i sprężone Obrazy SVG są skalowalne Obrazy SVG można drukować z wysoką jakością w dowolnej rozdzielczości SVG jest otwartym standardem SVG są oparte o standard XML
4
Prymitywy dostępne w SVG
Prostokąt <rect> Koło <circle> Ellipse <ellipse> Linia <line> Łamana <polyline> Wielokąt <polygon> Ścieżka <path> Inne zagadnienia przekraczają zakres tej prezentacji
5
Podstawowe kształty – okrąg, koło
<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4„ fill="yellow" /> </svg> </body> </html> Uwaga: podając wartości cx<>cy otrzymujemy elipsę.
6
Podstawowe kształty - prostokąt
Przykład 1 <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> Uwaga: argument fill – wypełnienie, stroke – brzeg, jak nie podamy x, y, to od (0,0) Przykład 2 <svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> Uwaga: argument opacity oznacza przezroczystość, zakres 0..1
7
Podstawowe kształty - prostokąt
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> Uwaga: argumenty rx, ry – zaokrąglenie rogów
8
Podstawowe kształty linia <svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg> Wielokąt <polygon points="200,10 250, ,210" style="fill:lime;stroke:purple;stroke- width:1" />
9
Podstawowe kształty Łamana <svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80, , ,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
10
Podstawowe kształty - ścieżka
<path> element jest używany do określenia ścieżki. Następujące polecenia są dostępne dane ścieżki: M = moveTo L = lineTo H = lineTo pozioma V = lineTo pionowa C = curveTo S = gładki curveTo Q = krzywej Béziera drugiego stopnia T = gładką kwadratowego Beziera curveTo A = Łuk eliptyczny Z = closePath Przykład – rysuje trójkąt: <svg height="210" width="400"> <path d="M L L Z" /> </svg>
11
Podstawowe kształty –krzywe Beziera
krzywe Beziera są wykorzystywane do modelowania gładkich krzywychość. Ogólnie, użytkownik wybiera dwa punkty końcowe i jeden lub dwa punkty kontrolne. Przykład obok tworzy krzywej Béziera drugiego stopnia, gdzie ZA i do są punkty początkowe i końcowe, b jest punkt kontrolny: <path d="M q " stroke="blue„ stroke-width="5" fill="none" />
12
Podstawowe kształty –krzywe Beziera
Tekst poziomy <svg height="30" width="200"> <text x="0" y="15" fill="red">SVG</text> </svg> obrócony <svg height="60" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG</text>
13
Własności argumentu stroke
SVG oferuje możliwość ustawienia właściwości obrysu: kolor, stroke-width skoku linecap skoku dasharray Wszystkie właściwości obrysu można zastosować do każdego rodzaju linii, tekstu i obrysów elementów, takich jak okrąg.
14
Własności argumentu stroke
Przykład dla koloru: <svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g> </svg>
15
Własności argumentu stroke
Przykład dla grubości: <svg height="80" width="300"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg>
16
Własności argumentu stroke
Przykład dla różnych końcówek <svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g> </svg> Uwaga: butt – grubszy koniec, round – zaokrąglony, square - kwadratowy
17
Własności argumentu stroke
Przykład dla linii przerywanych (dasharray) <svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg>
18
Grafika w SVG - podsumowanie
Grafika wektorowa stanowi bardzo atrakcyjną propozycję dla aplikacji WWW. Pozwala bowiem uwolnić się od ograniczeń obrazów rastrowych takich jak znaczna objętość, ustalona rozdzielczość, brak interakcyjności czy też praktyczna niemożność dodania w ich wnętrzu informacji opisowych. W przeciwieństwie do nich, grafika wektorowa oferuje dobre skalowanie (dostosowanie do rozdzielczości u danego klienta) oraz możliwość transformacji i aktywnej interakcji. Niezależnie od tego można naturalnie osadzić w jej wnętrzu także rastrowe obrazy. Język SVG stara się połączyć te zalety z możliwościami przetwarzania i komponowania zapewnianymi przez składnię XML i dedykowane jej technologie. Tym samym SVG staje się jeszcze jednym językiem XML-owym, który może być wkomponowany w dokument XHTML.
19
Możliwości wykorzystania SVG
Zaletą opisu w XML jest separowalność i adresowalność poszczególnych konstrukcji. Można zdefiniować grupę elementów do późniejszego użycia: <svg:g id="nazwaGrupy"> ...tutaj przygotowane elementy... </svg:g> Grupę taką możemy następnie użyć umieszczając ją w zadamym miejscu rysunku: <use x="5" y="5" xlink:href="#nazwaGrupy"/> Można też zastosować transformację istniejącej zawartości: <use xlink:href="#nazwaGrupy" transform="scale(-1 1) translate(-20 20) rotate(45)" /> Przykładami rozległej pozostałej funkcjonalności są wstawianie zasobów z innego dokumentu, manipulacja obiektami graficznymi z poziomu języka skryptowego (np. JavaScript), czy dowiązywanie definicji stylów CSS.
Podobne prezentacje
