Grafika wektorowa WWW
-
- Paweł Manowiecki,
- 01.11.2000
Prostokąt
Aby narysować pierwszą figurę geometryczną, użyjemy taga <rect> z parametrami opisanymi we wcześniejszym przykładzie. Rezultat: niebieski prostokąt.
Przykład 3. Prostokąt
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="320" height="90">####
<rect style="fill:blue;" width="200" height="50" x="20" y="20"/>
</svg>#######
Dowolny kształt
Aby narysować jakąś krzywą, otwartą czy zamkniętą, potrzebny jest tag <path>. W parametrze d przechowuje on listę punktów - współrzędnych. Litera M oznacza, że następujące po niej współrzędne określają początek nowej krzywej - punkt (50,10). Następna para (350,10) poprzedzona literą L oznacza drugi punkt krzywej. Krzywa składa się z trzech punktów. Na końcu, za ostatnią parą współrzędnych stoi litera z odpowiadająca za zamknięcie krzywej w region i wypełnienie jej domyślnym czarnym kolorem.
Przykład 4. Dowolny kształt
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="450" height="150">####
<path d="M 50 10 L 350 10 L 200 120 z" />
</svg>#######
Wstawianie grafiki rastrowej
Jeżeli obraz musi zawierać grafikę rastrową, można ją wstawić, używając taga <image>. Należy ustawić jej wielkość, położenie i do parametru xlink:href przypisać miejsce, gdzie przechowywany jest plik grafiki. W tym przykładzie ponad grafiką nadpisany jest tekst czcionką Verdana wypełniony na biało o wielkości 20.
Przykład 5. Wstawianie grafiki rastrowej
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="243" height="200">####
<image x="0" y="0" width="243" height="200" xlink:href="zdjecie.jpg" />
<text style="font-family:Verdana; fill:white; font-size:20" x="40" y="185">Yasmeen Ghauri</text>
</svg>#######
Wypełnienie gradientowe
W tym przykładzie wypełnimy tekst i prostokąt niejednolitym gradientowym wypełnieniem. Najpierw deklarujemy gradient tagiem <linearGradient>, nadając mu nazwę id="Gradient" i opisując współrzędnymi punktów (x1,y1) (x2,y2) początek i koniec gradientu. W tym przypadku jest ono poziome, ponieważ współrzędna y nie ulega zmianie. Tagi <stop> opisują początkowy i końcowy kolor oraz jego przezroczystość.
Przykład 6. Wypełnienie gradientowe
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="350" height="250">####
<linearGradient id="gradient" x1="0" y1="0" x2="350" y2="0">
<stop offset="0" style="stop-color:black; stop-opacity:0"/>
<stop offset="1" style="stop-color:red; stop-opacity:1"/>
</linearGradient>######
<text id="text" x="50" y="100" style="font-family:Verdana; fill:url(#Gradient); font-size:50">
Gradient########
</text>#######
<rect style="fill:url(#Gradient);" x="50" y="150" width="250" height="50"/>
</svg>#######
Przezroczystość
Każdy element może uzyskać dodatkową jakość, jeżeli ustawimy parametr przezroczystości opacity: W tym przykładzie wyrysowany zostanie najpierw prostokąt o wypełnieniu ustawionym heksadecymalnie na niebieski (ten sam sposób notacji jak w HTML) Następnie pięć kół, każde o wypełnieniu czerwonym fill:red różniące się przezroczystością ustawioną parametrem opacity: Parametr przezroczystości mierzony jest w ułamkach dziesiętnych (od 0 do 1). Koła opisane tagiem <circle> mają parametry takie jak cx i cy, czyli współrzędnie środka koła i r, czyli promień.
Przykład 7. Przezroczystość
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" Ňhttp://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="450" height="150" >####
<rect x="30" y="60" width="400" height="100" style="fill:#0000ff" />
<circle cx="70" cy="60" r="50" style="fill:red; opacity:1" />
<circle cx="150" cy="60" r="50" style="fill:red; opacity:.8" />
<circle cx="230" cy="60" r="50" style="fill:red; opacity:.6" />
<circle cx="310" cy="60" r="50" style="fill:red; opacity:.4" />
<circle cx="390" cy="60" r="50" style="fill:red; opacity:.2" />
</svg>#######
