Hlavní navigace

Vlastnosti cest a základních geometrických tvarů v SVG

Pavel Tišnovský 23. 8. 2007

V dnešním článku si popíšeme způsob změny vizuálních vlastností cest a základních geometrických tvarů uložených v souborech ve formátu SVG. Také si řekneme, jak lze cesty i základní geometrické tvary seskupovat do uzlů a specifikovat vlastnosti pro všechny objekty, které jsou v těchto uzlech seskupené.

Obsah

1. Vlastnosti cest a základních geometrických tvarů v SVG
2. Barva obrysů vykreslovaných objektů
3. Šířka obrysů křivek i úseček
4. Styl napojení křivek, úseček a uzavřených tvarů
5. Styl ukončení křivek i úseček
6. Seskupování cest a tvarů, společné nastavení vlastností
7. Obsah dalšího pokračování tohoto seriálu

1. Vlastnosti cest a základních geometrických tvarů v SVG

V předchozích částech tohoto seriálu jsme se dozvěděli, jakým způsobem je možné vykreslovat cesty i základní geometrické tvary. Tyto objekty jsou implicitně vykreslovány černou barvou na bílém pozadí a šířka obrysu je nastavena na hodnotu jednoho pixelu (pokud nedošlo ke změně měřítka). Implicitní nastavení samozřejmě nemůže grafikům dostačovat, proto formát SVG umožňuje, aby se vizuální vlastnosti jednotlivých objektů i jejich skupin mohly měnit.

Mnoho vlastností a stylů je společných jak pro cesty, tak i pro základní geometrické tvary. Oběma typům grafických objektů je možné přiřadit například šířku a barvu obrysu, styl napojení obrysových křivek na sebe a popř. i způsob ukončení obrysových čar nevyplňovaných grafických objektů. U vyplňovaných grafických objektů (jak cest, tak i základních geometrických tvarů) je možné zvolit barvu a styl výplně, přiřadit k výplni gradientní přechod, výplňový vzorek atd. V dalším textu tedy nebudeme rozlišovat mezi tím, zda se nastavuje styl cesty nebo základního geometrického tvaru, oba typy objektů budeme považovat za otevřené či naopak uzavřené obecné křivky a úsečkové segmenty. Před podrobnějším popisem jednotlivých vlastností si však řekněme, jakým způsobem je vlastně možné změnu stylů vykreslování grafických objektů do souborů typu SVG zapsat.

Styly je možné grafickým objektům přiřazovat různými způsoby. Pravděpodobně nejobecnější způsob spočívá ve využití XSLT (XSL Style Sheet), jedná se však o metodu, která je určena zejména pro další zpracování dokumentu nějakým XSL procesorem a grafické editory ji málokdy podporují. Další, už používanější způsob, je založen na využití CSS (Cascading Style Sheet). Tato metoda je již v editorech a zejména v prohlížečích SVG podporovaná a je také široce používaná, protože mnoho autorů již základy CSS zná, například z tvorby WWW stránek vytvářených ve formátech HTML či XHTML. Je možné použít jak externí CSS soubory, tak vložit deklarace CSS přímo do souboru typu SVG pomocí značky <style>. Poslední široce používaný způsob spočívá v použití atributu (nikoli značky) style přímo v zápisu cesty či geometrického tvaru. Tento způsob je často kombinován se seskupováním grafických objektů, které bude popsáno v šesté kapitole.

2. Barva obrysů vykreslovaných objektů

Mezi nejjednodušší formu změn vizuálních vlastností vykreslovaných objektů patří nastavení šířky a popř. i barvy obrysových křivek cest či základních geometrických tvarů. Implicitně je pro všechny objekty nastavena plná obrysová čára s tloušťkou jednoho bodu a černou barvou. Změna barvy objektů se v tom nejjednodušším případě (bez použití externího CSS či XSLT) provede tak, že se do značky reprezentující daný objekt přidá atribut stroke, jehož hodnotou je barva. Tu je možné, podobně jako v klasickém CSS (Cascading Style Sheet) či HTML/XHTML, zapsat více způsoby.

Nejčastěji se používají pojmenované barvy a barvy specifikované pomocí podílu barvových složek R (red), G (green) a B (blue) v barvovém prostoru sRGB – samotné podíly barev je možné psát jak v hexadecimálním tvaru, tak i ve tvaru rgb(r, g, b). Výčet všech pojmenovaných barev je uveden ve specifikaci SVG, popř. v příručkách k CSS či HTML. Kdo nechce potřebné barevné odstíny zdlouhavě vyhledávat v příručkách, může se podívat na obrázky 1, 2 a 3, které byly získány přímo ze specifikace SVG (obrázky neprošly gamma korekcí, proto barevný odstín získaný přímo z barev pixelů nemusí zcela přesně odpovídat zapsaným složkám R, G a B).

5201
Obrázek 1: První sada pojmenovaných barvových odstínů podporovaná SVG prohlížeči

5202
Obrázek 2: Druhá sada pojmenovaných barvových odstínů podporovaná SVG prohlížeči

5203
Obrázek 3: Třetí sada pojmenovaných barvových odstínů podporovaná SVG prohlížeči

V prvním odstavci jsme si řekli, že barva objektů se může specifikovat jako hodnota atributu stroke. V dnešním prvním demonstračním příkladu je ukázán nejjednodušší způsob nastavení barev při kreslení úseček (jak již víme z předchozí části tohoto seriálu, patří úsečky mezi základní geometrické tvary a proto je pro ně vytvořena samostatná značka <line>). V demonstračním příkladu je (kromě podkladového vzorku) vykresleno sedm vodorovných úseček, přičemž je každé úsečce přiřazena jedna pojmenovaná barva. Následuje osm úseček vykreslených různými barvami zapsanými ve stylu známém již z HTML. Například bleděmodrá barva je zakódována jako trojice barvových složek RGB zapsaných v řetězci tří spojených dvouciferných hexadecimálních čísel (hodnota každé barvové složky je v rozsahu 0016-ff16):
R=8016=12810 ~ 50% sytosti
G=8016=12810 ~ 50% sytosti
B=ff16=25510 ~ 100%.

Zdrojový kód prvního demonstračního příkladu:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400"
     height="400"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <!-- úsečky vykreslené implicitním stylem -->
     <line x1="0" y1="0"   x2="0"   y2="199" />
     <line x1="0" y1="20"  x2="20"  y2="199" />
     <line x1="0" y1="40"  x2="40"  y2="199" />
     <line x1="0" y1="60"  x2="60"  y2="199" />
     <line x1="0" y1="80"  x2="80"  y2="199" />
     <line x1="0" y1="100" x2="100" y2="199" />
     <line x1="0" y1="120" x2="120" y2="199" />
     <line x1="0" y1="140" x2="140" y2="199" />
     <line x1="0" y1="160" x2="160" y2="199" />
     <line x1="0" y1="180" x2="180" y2="199" />
     <line x1="0" y1="199" x2="200" y2="199" />

     <!-- různobarevné vodorovné úsečky -->
     <line stroke="red"     x1="50" y1="10" x2="170" y2="10" />
     <line stroke="blue"    x1="50" y1="20" x2="170" y2="20" />
     <line stroke="green"   x1="50" y1="30" x2="170" y2="30" />
     <line stroke="yellow"  x1="50" y1="40" x2="170" y2="40" />
     <line stroke="orange"  x1="50" y1="50" x2="170" y2="50" />
     <line stroke="cyan"    x1="50" y1="60" x2="170" y2="60" />
     <line stroke="magenta" x1="50" y1="70" x2="170" y2="70" />

     <!-- různobarevné úsečky -->
     <line stroke="#0000e0" x1="40"  y1="80"  x2="10" y2="180" />
     <line stroke="#2000c0" x1="60"  y1="80"  x2="30" y2="180" />
     <line stroke="#4000a0" x1="80"  y1="80"  x2="50" y2="180" />
     <line stroke="#600080" x1="100" y1="80"  x2="70" y2="180" />
     <line stroke="#800060" x1="120" y1="80"  x2="90" y2="180" />
     <line stroke="#a00040" x1="140" y1="80" x2="110" y2="180" />
     <line stroke="#c00020" x1="160" y1="80" x2="130" y2="180" />
     <line stroke="#e00000" x1="180" y1="80" x2="150" y2="180" />
</svg> 

5204
Obrázek 4: První demonstrační příklad po zobrazení prohlížečem SVG souborů

3. Šířka obrysů křivek i úseček

Již v předchozí kapitole jsme si řekli, že implicitní šířka obrysů grafických objektů je nastavena na jeden pixel. Pomocí atributu stroke-width je možné zadat libovolnou tloušťku kreslené stopy. Tato tloušťka je zadána v bezrozměrných jednotkách, jejich převod na pixely či délkové jednotky je proveden až ve chvíli vykreslování (implicitně je jednotka rovna šířce jednoho pixelu, ale SVG obrázky je možné zvětšovat či zmenšovat, takže tato rovnost nemusí vždy platit). Pokud je za údajem o tloušťce uveden znak % (procenta), znamená to, že hodnota je vztahována relativně k velikosti pohledu. V demonstračním příkladu je ukázána současná změna barvy i tloušťky kreslených úseček, podobným způsobem je však možné ovlivnit vzhled všech dalších geometrických tvarů, včetně textů:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400"
     height="400"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <!-- úsečky vykreslené implicitním stylem -->
     <line x1="0" y1="0"   x2="0"   y2="199" />
     <line x1="0" y1="20"  x2="20"  y2="199" />
     <line x1="0" y1="40"  x2="40"  y2="199" />
     <line x1="0" y1="60"  x2="60"  y2="199" />
     <line x1="0" y1="80"  x2="80"  y2="199" />
     <line x1="0" y1="100" x2="100" y2="199" />
     <line x1="0" y1="120" x2="120" y2="199" />
     <line x1="0" y1="140" x2="140" y2="199" />
     <line x1="0" y1="160" x2="160" y2="199" />
     <line x1="0" y1="180" x2="180" y2="199" />
     <line x1="0" y1="199" x2="200" y2="199" />

     <!-- různobarevné vodorovné úsečky -->
     <line stroke="red"     x1="50" y1="10" x2="170" y2="10" />
     <line stroke="blue"    x1="50" y1="20" x2="170" y2="20" />
     <line stroke="green"   x1="50" y1="30" x2="170" y2="30" />
     <line stroke="yellow"  x1="50" y1="40" x2="170" y2="40" />
     <line stroke="orange"  x1="50" y1="50" x2="170" y2="50" />
     <line stroke="cyan"    x1="50" y1="60" x2="170" y2="60" />
     <line stroke="magenta" x1="50" y1="70" x2="170" y2="70" />

     <!-- úsečky vykreslené s různou tloušťkou -->
     <line stroke="#8080ff" stroke-width="2"  x1="20"  y1="80"  x2="20" y2="180" />
     <line stroke="#8080ff" stroke-width="4"  x1="40"  y1="80"  x2="40" y2="180" />
     <line stroke="#8080ff" stroke-width="6"  x1="60"  y1="80"  x2="60" y2="180" />
     <line stroke="#8080ff" stroke-width="8"  x1="80"  y1="80"  x2="80" y2="180" />
     <line stroke="#8080ff" stroke-width="10" x1="100" y1="80" x2="100" y2="180" />
     <line stroke="#8080ff" stroke-width="12" x1="120" y1="80" x2="120" y2="180" />
     <line stroke="#8080ff" stroke-width="14" x1="140" y1="80" x2="140" y2="180" />
</svg> 

5205
Obrázek 5: Druhý demonstrační příklad po zobrazení prohlížečem SVG souborů

4. Styl napojení křivek, úseček a uzavřených tvarů

V předchozích částech tohoto seriálu jsme si ukázali, jakým způsobem se vytváří cesty a lomené čáry popř. mnohoúhel­níky. Všechny tyto geometrické tvary mají společnou jednu vlastnost: mohou být složeny z několika na sebe napojených úseček. Ve skutečnosti se samozřejmě nejedná o geometricky chápané úsečky, tj. nekonečně tenké křivky, ale o úsečky se zadanou šířkou kreslené stopy (viz předchozí kapitola a význam hodnoty atributu stroke-width).

V SVG je možné specifikovat, jak má toto napojení vizuálně vypadat. Úsečky, při jejichž napojení se vytvoří jiný úhel než 180°, je možné spojit třemi různými způsoby: buď jsou okraje úseček protaženy až do místa svého protnutí (vzniká „špička“), úsečky jsou zakončeny obloukem („kolenem“, nemění se tloušťka cesty), nebo je možné zakončit napojení rovným okrajem tak, aby byla v co největší míře zachována tloušťka cesty. Přímo při vytváření obrázku se tedy můžeme rozhodnout, jak lomené čáry vykreslit. Vše je řízeno hodnotou atributu stroke-linejoin, který může nabývat hodnot:

Hodnota Význam
miter okraje úseček jsou protaženy do místa svého protnutí (vzniká „špička“)
round je vykresleno obloukové „koleno“
bevel napojení je ukončeno rovným okrajem tak, aby byla zachována tloušťka cesty či lomené čáry

Použití všech způsobů napojení je demonstrováno ve třetím příkladu. Všimněte si, že není možné specifikovat napojení dvou samostatných úseček zadaných značkou <line>, vždy je nutné použít buď cestu či lomenou čáru, tj. značku <polyline>. SVG prohlížeč totiž každý grafický prvek vykresluje samostatně a na sobě ležící prvky jsou vykreslovány v pořadí, v jakém jsou uloženy v SVG souboru.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400"
     height="400"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <polyline fill="none" stroke="red"   stroke-width="1" points="10 80 10 10 80 10" stroke-linejoin="miter" />
     <polyline fill="none" stroke="green" stroke-width="1" points="20 80 20 20 80 20" stroke-linejoin="round" />
     <polyline fill="none" stroke="blue"  stroke-width="1" points="30 80 30 30 80 30" stroke-linejoin="bevel" />
     <polyline fill="none" stroke="gray"  stroke-width="1" points="60 80 40 40 80 60" stroke-linejoin="round" />

     <polyline fill="none" stroke="red"   stroke-width="2" points="110 80 110 10 180 10" stroke-linejoin="miter" />
     <polyline fill="none" stroke="green" stroke-width="2" points="120 80 120 20 180 20" stroke-linejoin="round" />
     <polyline fill="none" stroke="blue"  stroke-width="2" points="130 80 130 30 180 30" stroke-linejoin="bevel" />
     <polyline fill="none" stroke="gray"  stroke-width="2" points="160 80 140 40 180 60" stroke-linejoin="round" />

     <polyline fill="none" stroke="red"   stroke-width="4" points="10 180 10 110 80 110" stroke-linejoin="miter" />
     <polyline fill="none" stroke="green" stroke-width="4" points="20 180 20 120 80 120" stroke-linejoin="round" />
     <polyline fill="none" stroke="blue"  stroke-width="4" points="30 180 30 130 80 130" stroke-linejoin="bevel" />
     <polyline fill="none" stroke="gray"  stroke-width="4" points="60 180 40 140 80 160" stroke-linejoin="round" />

     <polyline fill="none" stroke="red"   stroke-width="8" points="110 180 110 110 180 110" stroke-linejoin="miter" />
     <polyline fill="none" stroke="green" stroke-width="8" points="120 180 120 120 180 120" stroke-linejoin="round" />
     <polyline fill="none" stroke="blue"  stroke-width="8" points="130 180 130 130 180 130" stroke-linejoin="bevel" />
     <polyline fill="none" stroke="gray"  stroke-width="8" points="160 180 140 140 180 160" stroke-linejoin="round" />

</svg> 

5206
Obrázek 6: Třetí demonstrační příklad po zobrazení prohlížečem SVG souborů

5. Styl ukončení křivek i úseček

U otevřených geometrických tvarů, tj. u cest a lomených čar, je možné specifikovat i způsob jejich zakončení. Uzavřené tvary, tj. kružnice, elipsy, obdélníky či obecné mnohoúhelníky žádný jasně definovaný konec nemají, proto na ně nebude mít nastavení stylu ukončení žádný význam. Je možné specifikovat tři způsoby ukončení, které jsou zadány jako hodnota atributu stroke-linecap:

Hodnota Význam
butt ukončení cesty kolmým řezem v místě koncových bodů
round ukončení cesty kruhovým obloukem (dochází k prodloužení tva­ru)
square ukončení cesty kolmým řezem vzdáleným od koncových bodů o 1/2 šířky cesty (dochází k prodloužení tva­ru)

Vliv všech tří způsobů zakončení na vizuální podobu úseček si opět ukážeme na demonstračním příkladu, ve kterém jsou vykresleny různě orientované úsečky zakončené jedním ze zadaných stylů. Pro vysvětlení rozdílu mezi stylem butt a square jsou vykresleny i osy všech úseček, tj. černé vlasové čáry, které začínají a končí přesně ve vrcholech „tlustých“ úseček. Vzhledem ke způsobu vykreslování SVG souborů (dříve zapsané tvary se vykreslí dříve) jsou osy úseček nakresleny nad svými tlustšími protějšky:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400"
     height="400"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <!-- úsečky vykreslené s různou tloušťkou -->
     <line stroke="#ffff80" stroke-width="2"  x1="20"  y1="20"  x2="20" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="4"  x1="40"  y1="20"  x2="40" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="6"  x1="60"  y1="20"  x2="60" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="8"  x1="80"  y1="20"  x2="80" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="10" x1="100" y1="20" x2="100" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="12" x1="120" y1="20" x2="120" y2="60" stroke-linecap="square" />
     <line stroke="#ffff80" stroke-width="14" x1="140" y1="20" x2="140" y2="60" stroke-linecap="square" />

     <!-- úsečky vykreslené s různou tloušťkou -->
     <line stroke="#8080ff" stroke-width="2"  x1="20"  y1="80"  x2="20" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="4"  x1="40"  y1="80"  x2="40" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="6"  x1="60"  y1="80"  x2="60" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="8"  x1="80"  y1="80"  x2="80" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="10" x1="100" y1="80" x2="100" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="12" x1="120" y1="80" x2="120" y2="120" stroke-linecap="round" />
     <line stroke="#8080ff" stroke-width="14" x1="140" y1="80" x2="140" y2="120" stroke-linecap="round" />

     <!-- úsečky vykreslené s různou tloušťkou -->
     <line stroke="#ff8080" stroke-width="2"  x1="20"  y1="130"  x2="20" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="4"  x1="40"  y1="130"  x2="40" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="6"  x1="60"  y1="130"  x2="60" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="8"  x1="80"  y1="130"  x2="80" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="10" x1="100" y1="130" x2="100" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="12" x1="120" y1="130" x2="120" y2="170" stroke-linecap="butt" />
     <line stroke="#ff8080" stroke-width="14" x1="140" y1="130" x2="140" y2="170" stroke-linecap="butt" />

     <!-- vykreslení os všech předchozích úseček vlasovou čárou o šířce jednoho pixelu-->
     <line x1="20"  y1="20"  x2="20" y2="60" />
     <line x1="40"  y1="20"  x2="40" y2="60" />
     <line x1="60"  y1="20"  x2="60" y2="60" />
     <line x1="80"  y1="20"  x2="80" y2="60" />
     <line x1="100" y1="20" x2="100" y2="60" />
     <line x1="120" y1="20" x2="120" y2="60" />
     <line x1="140" y1="20" x2="140" y2="60" />
     <line x1="20"  y1="80"  x2="20" y2="120" />
     <line x1="40"  y1="80"  x2="40" y2="120" />
     <line x1="60"  y1="80"  x2="60" y2="120" />
     <line x1="80"  y1="80"  x2="80" y2="120" />
     <line x1="100" y1="80" x2="100" y2="120" />
     <line x1="120" y1="80" x2="120" y2="120" />
     <line x1="140" y1="80" x2="140" y2="120" />
     <line x1="20"  y1="130"  x2="20" y2="170" />
     <line x1="40"  y1="130"  x2="40" y2="170" />
     <line x1="60"  y1="130"  x2="60" y2="170" />
     <line x1="80"  y1="130"  x2="80" y2="170" />
     <line x1="100" y1="130" x2="100" y2="170" />
     <line x1="120" y1="130" x2="120" y2="170" />
     <line x1="140" y1="130" x2="140" y2="170" />
</svg> 

5207
Obrázek 7: Čtvrtý demonstrační příklad po zobrazení prohlížečem SVG souborů

6. Seskupování cest a tvarů, společné nastavení vlastností

Formát SVG je založený na obecném značkovacím jazyku XML. To mimo jiného znamená, že všechna data jsou uložena ve stromové struktuře. To je ostatně patrné i z demonstračních příkladů – značka <svg> odpovídá kořenu stromu, ostatní značky představují listy. Je však možné přidávat do tohoto stromu i další uzly, které se mohou dále větvit? Ano, SVG to umožňuje a důvod je jednoduchý – každému uzlu lze přiřadit styl (například barvu obrysu), který bude zděděn všemi poduzly i listy této části stromu. Uzel se vytvoří pomocí párové značky nazvané <g> (od slova group).

Všechny grafické objekty umístěné mezi počáteční a koncovou část značky mohou mít nastavené společné vlastnosti, které jsou zapsány přímo jako atributy značky <g>. Následující příklad je odvozen od třetího demonstračního příkladu. Pomocí odsazení jsem zvýraznil hierarchii značek ve stromu. Je patrné, že značky pro uzly mohou být zanořené, čehož je možné využít pro snížení výsledné velikosti SVG souboru i pro snazší manipulaci s objekty v grafických editorech.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400"
     height="400"
     viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

     <g fill="none">
         <g stroke-width="1";>
             <polyline stroke="red"   points="10 80 10 10 80 10" stroke-linejoin="miter" />
             <polyline stroke="green" points="20 80 20 20 80 20" stroke-linejoin="round"  />
             <polyline stroke="blue"  points="30 80 30 30 80 30" stroke-linejoin="bevel"  />
             <polyline stroke="gray"  points="60 80 40 40 80 60" stroke-linejoin="round"  />
         </g>
         <g stroke-width="2">
             <polyline fill="none" stroke="red"   points="110 80 110 10 180 10" stroke-linejoin="miter"  />
             <polyline fill="none" stroke="green" points="120 80 120 20 180 20" stroke-linejoin="round"  />
             <polyline fill="none" stroke="blue"  points="130 80 130 30 180 30" stroke-linejoin="bevel"  />
             <polyline fill="none" stroke="gray"  points="160 80 140 40 180 60" stroke-linejoin="round"  />
         </g>
         <g stroke-width="4">
             <polyline fill="none" stroke="red"   points="10 180 10 110 80 110" stroke-linejoin="miter"  />
             <polyline fill="none" stroke="green" points="20 180 20 120 80 120" stroke-linejoin="round"  />
             <polyline fill="none" stroke="blue"  points="30 180 30 130 80 130" stroke-linejoin="bevel"  />
             <polyline fill="none" stroke="gray"  points="60 180 40 140 80 160" stroke-linejoin="round"  />
         </g>
         <g stroke-width="8">
             <polyline fill="none" stroke="red"   points="110 180 110 110 180 110" stroke-linejoin="miter"  />
             <polyline fill="none" stroke="green" points="120 180 120 120 180 120" stroke-linejoin="round"  />
             <polyline fill="none" stroke="blue"  points="130 180 130 130 180 130" stroke-linejoin="bevel"  />
             <polyline fill="none" stroke="gray"  points="160 180 140 140 180 160" stroke-linejoin="round"  />
         </g>
     </g>
</svg> 

7. Obsah dalšího pokračování tohoto seriálu

V následujícím pokračování seriálu o grafických formátech si řekneme, jakým způsobem je možné specifikovat barvu a styl výplně. Kromě toho si ukážeme změnu stylu obrysové čáry a vytváření značek na koncích úseček a křivek (například šipek).

Našli jste v článku chybu?
Lupa.cz: Slevové šílenství je tu. Kde nakoupit na Black Friday?

Slevové šílenství je tu. Kde nakoupit na Black Friday?

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Vitalia.cz: „Připluly“ z Německa a možná obsahují jed

„Připluly“ z Německa a možná obsahují jed

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

Podnikatel.cz: Vládu obejde, kvůli EET rovnou do sněmovny

Vládu obejde, kvůli EET rovnou do sněmovny

Lupa.cz: Co se dá měřit přes Internet věcí

Co se dá měřit přes Internet věcí

Lupa.cz: Není sleva jako sleva. Jak obchodům nenaletět?

Není sleva jako sleva. Jak obchodům nenaletět?

DigiZone.cz: Sony KD-55XD8005 s Android 6.0

Sony KD-55XD8005 s Android 6.0

120na80.cz: Rakovina oka. Jak ji poznáte?

Rakovina oka. Jak ji poznáte?

DigiZone.cz: ČT má dalšího zástupce v EBU

ČT má dalšího zástupce v EBU

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Lupa.cz: UX přestává pro firmy být magie

UX přestává pro firmy být magie

120na80.cz: Jak oddálit Alzheimera?

Jak oddálit Alzheimera?

Měšec.cz: Zdravotní a sociální pojištění 2017: Připlatíte

Zdravotní a sociální pojištění 2017: Připlatíte

Lupa.cz: Google měl výpadek, nejel Gmail ani YouTube

Google měl výpadek, nejel Gmail ani YouTube

Vitalia.cz: Chtějí si léčit kvasinky. Lék je jen v Německu

Chtějí si léčit kvasinky. Lék je jen v Německu

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

120na80.cz: Bojíte se encefalitidy?

Bojíte se encefalitidy?

Vitalia.cz: To není kašel! Správná diagnóza zachrání život

To není kašel! Správná diagnóza zachrání život