Grafika wektorowa WWW


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

Grafika wektorowa WWW
<?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="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

Grafika wektorowa WWW
<?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="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>#######

Grafika wektorowa WWW

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ść

Grafika wektorowa WWW
<?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="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>#######