Podstawy SVG - kształty

SVG posiada predefiniowane następujące kształty: <rect> prostokąt, <circle> koło, <ellipse> elipsa, <line> linia, <polyline> linia łamana, <polygon> wielokąt, <path> ścieżka.

Prostokąt

Wstawmy prostokąt do dokumentu svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Przykład prostokąt Prostokąt
Prostokąt wstawiamy do dokumentu za pomocą znacznika <rect>. Atrybuty width i height określają szerokość i wysokość prostokąta. Dzięki stylom css definiujemy kolor wypełnienia (fill: rgb(0,0,255)) oraz grubość i kolor obramowania (stroke-width: 1, stroke: rgb(0,0,0)). Z właściwości stylów w SVG korzystamy na kilka sposobów: poprzez zastosowanie właściwości jako atrybutów elementów svg, dzięki użyciu właściwości wraz z wartością (nazwa:wartość) albo w postaci wartości atrybutu style. Wolno nam też zdefiniować wewnętrzny arkusz stylów css. Element <rect> ma również atrybuty rx i ry, za pomocą których zaokrąglimy wierzchołki figury.
Przykład prostokąt Prostokąt z zaokrąglonymi rogami
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect width="300" height="100" rx="15" ry="15"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>
Kolejnymi atrybutami są x i y, gdzie x definiuje pozycję prostokąta od lewej strony okna przeglądarki, natomiast y od górnej strony okna przeglądarki. Kolejne ciekawe atrybuty (w stylach css) to fill-opacity: 0.1 i stroke-opacity: 0.9. Określają one przezroczystość wypełnienia i obrysu odpowiednio (wartości atrybutów mogą przyjmować wartości od 0 do 1).
Przykład Prostokąt i opacity
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:yellow;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
Można też określić atrybut opacity, określa on przezroczystość dla całego elementu. Jeśli chcemy obramować nasz prostokąt linią przerywaną należy użyć atrybutu stroke-dasharray.
Przykład Prostokąt kolejny przykład
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:red;stroke-width:5;opacity:0.5; stroke-dasharray: 2 4"/>
</svg>

Koło

Kolejną figurą jest koło. Do jego narysowania służy znacznik <circle>. Ma on trzy podstawowe atrybuty: cx, cy i r. Pierwsze dwa definiują współrzędne środka koła, a ostatni określa długość promienia. Ponadto możemy zastosować podobnie jak poprzednio atrybuty dotyczące wypełnienia, obramowania i przezroczystości. Można ich używać bezpośrednio lub co jest bardziej zalecane za pomocą atrybutu style.
Przykład Koło
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" fill-opacity="0.4" />
</svg>

Elipsa

Do narysowania elipsy służy znacznik <ellipse>. Jego atrybuty cx i cy wskazują środek figury. Natomiast rx i ry określają długość półosi poziomej i pionowej. Możemy określić też wypełnienie (fill), obrys (stroke) i przezroczystość (opacity).
Przykład Elipsa
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="300" cy="150" rx="200" ry="100"
style="fill:green;
stroke:rgb(0,0,100);stroke-width:2"/>
</svg>

Linia

Znacznik <line> służy do tworzenia pojedynczej linii. Atrybuty x1 i y1 określają położenie początku linii, x2 i y2 współrzędne jej końca. Punkty te zostaną połączone linią prostą. Występują tu również atrybuty takie jak stroke, stroke-width, stroke-opacity, stroke-dasharray.
Przykład Linia
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
fill="red" style="stroke:blue ;stroke-width:2"/>
</svg>
Przykład 2 Linia - przykład 2
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="10" y1="10" x2="100" y2="10"
style="stroke-dasharray: 9, 5;
stroke: black; stroke-width: 2;" />

<line x1="10" y1="20" x2="100" y2="20"
style="stroke-dasharray: 5, 3, 9, 2;
stroke: black; stroke-width: 2;" />

<line x1="10" y1="30" x2="100" y2="30"
style="stroke-dasharray: 9, 3, 5;
stroke: black; stroke-width: 2; stroke-opacity: 0.3" />

</svg>

Wielokąt

Dla zdefiniowania wielokąta stosujemy znacznik <polygon> z atrybutem points. Podajemy w nim pary współrzędnych wierzchołków wielokąta i oddzielamy je od siebie spacją. Wartości składające się na każdą parę odseparowujemy za pomocą przecinka. Dla określenia wypełnienia i obrysu stosujemy atrybuty fill, stroke, stroke-width, stroke-opacity, fill-opacity. Poniżej przykład trójkąta.
Przykład Trójkąt - przykład
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="210,100 400,210 170,250"
style="fill:#55ae10; stroke:#000000; stroke-width:1"/>
</svg>
Natomiast to przykład prostokąta i gwiazdki Prostokąt i gwiazdka - przykład
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="210,100 400,100 400,40 210,40"
style="fill:magenta; stroke:#000000; stroke-width:3px"/>

<polygon
points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
42.3,60.1 35,55 27.7,60.1 30.3,51.5
23.1,46.1 32.1,46.1"
style="fill: #ccffcc; stroke: green;" />
</svg>
Zajmę się teraz wypełnieniem wielokątów o przecinających się liniach. Stwórzmy następujący wielokąt
<svg width="200px" height="200px"> 
<polygon points="48,16 16,96 96,48 0,48 80,96"
style="stroke: black; fill: none;" />
</svg>
Do sterowania wypełnieniem tego typu wielokątów służy atrybut fill-rule. Przyjmuje on dwie wartości nonzero lub evenodd. Ich działanie najlepiej oddaje poniższy przykład.
Przykład Sterowanie wypełnieniem
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;"
points="48,16 16,96 96,48 0,48 80,96" />
<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;"
points="148,16 116,96 196,48 100,48 180,96" />
</svg>

Łamana

Teraz utworzymy linię łamaną. Służy do tego znacznik <polyline>. Atrybut points służy do zdefiniowania punktów załamania naszej łamanej. Zasady podawania par punktów są takie same jak w przypadku wielokąta.
Przykład Łamana
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:none; stroke:green; stroke-width:2"/>
</svg>
Można również określić sposób łączenia linii łamanej. Dokonujemy tego za pomocą atrybutu stroke-linejoin. Może on przyjmować następujące wartości: miter, round i bevel. Ich działanie ilustruje poniższy przykład.
Przykład Łamana - przykład 2
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polyline
style="stroke-linejoin: miter; stroke: black; stroke-width: 12;
fill: none;"
points="30 30, 45 15, 60 30"/>
<polyline
style="stroke-linejoin: round; stroke: black; stroke-width: 12;
fill: none;"
points="90 30, 105 15, 120 30"/>
<polyline
style="stroke-linejoin: bevel; stroke-width: 12; stroke: black;
fill: none;"
points="150 30, 165 15, 180 30"/>
</svg>

Ścieżka

Ścieżkę tworzymy za pomocą znacznika <path>. Jej jedynym atrybutem jest d, któremu przypisujemy komendy określające sposób prowadzenia linii. Oto niektóre polecenia: M – moveto, L – lineto, H – poziome lineto, V – pionowe lineto, C – curveto, S – smooth curveto, Q – kwadratowa krzywa Beziera, T - wygładzona kwadratowa krzywa Beziera, A – eliptyczny łuk kąta, Z – zamknięcie ścieżki. Poniższą ścieżkę pokrótce możnaby opisać następująco: przejdź od punktu (100,100), narysuj linię do punktu (300,100), następnie linia do punktu (200,300), gdzie kończy się ścieżka.
Przykład ścieżka1 Ścieżka - przykład 1
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example triangle01- simple example of a 'path'</title>
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
</svg>
Oto przykład skomplikowanej ścieżki.
Przykład ścieżka2 Ścieżka - przykład 2 Tworzenie ścieżek jest dość skomplikowane. Lepszym rozwiązaniem jest skorzystanie z edytorów grafiki SVG np. Inkscape. Ścieżki dokładniej będą omówione w dalszej części serii.