SVG - Scalable Vector Graphics. Grafika SVG SVG - Scalable Vector Graphics. Źródła: http://www.w3bai.com/pl/svg/default.html https://www.w3schools.com/graphics/svg_intro.asp
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
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
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
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ę.
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
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
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,190 160,210" style="fill:lime;stroke:purple;stroke- width:1" />
Podstawowe kształty Łamana <svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
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 150 0 L 75 200 L 225 200 Z" /> </svg>
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 100 350 q 150 -300 300 0" stroke="blue„ stroke-width="5" fill="none" />
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>
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.
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>
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>
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
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>
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.
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.