1
SCALABLE VECTOR
GRAPHICS (SVG)
RNDr. Tomáš ŘEZNÍK, Ph.D.
Geoinformační technologie 2 – webová kartografie
Laboratoř geoinformatiky a kartografie, Masarykova univerzita Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Obecně o cvičení č. 3
• Základy teorie – viz. přednáška
• Píše se přímo ve zdrojovém kódu – např. Notepad++,
PSPas, atd.
• Výstup: webová stránka s vektorovou grafikou (podle
tohoto návodu), obrázek se Zoomify
• Zadání cvičení ve studijních materiálech ISu
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Teoretické základy
• V čistě standardní webové komunikaci nelze docílit
vektorové prezentace u klienta
• Proto se mj. používá rozšíření na straně klienta pomocí
tzv. plug-inů (zásuvné moduly)
• SVG je opět značkovací jazyk a zároveň popis formátu
souboru, který popisuje dvojrozměrnou grafiku na
Webu pomocí XML
• Hlavní motivace – chyběl standardizovaný otevřený formát
pro vektorovou grafiku na Webu (uzavřené např. Flash,
VML, …) – od roku 1998 vytváří W3C
• http://geoinformatics.fsv.cvut.cz/gwiki/SVG_v_kartografii
(více info o SVG v kartografii)
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Základní typy grafických objektů v SVG
• Vektorové tvary
– Základní grafická primitiva (obdélník, kružnice, elipsa, úsečka,
lomená čára, mnohoúhelník a křivka)
• Rastrové obrazy
– Propojení rastru a vektoru v jenom formátu
– Hlavní využití v kartografii: podkladové rastrové mapy a nad nimi
vektorová tematika
• Textové objekty
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Další zásady SVG
• Možnost vizualizovat prostřednictvím CSS
– Definice ID, tříd, atd.
• Podporuje ořezávání objektů, průhlednost, interaktivitu a
animaci
• Zásadním omezením jsou funkcionality plug-inů:
– Různé typy: Adobe SVG Viewer, Batik, atd.
– Různě podporováno zejména na mobilních zařízeních (mobilní
telefony, PDA)
– Nativně (ale omezeně) ve Firefoxu od verze 1.5 a Opera od verze
8
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Příklad SVG zápisu
<?xml version="1.0"?>
<!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"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg>
2
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Základní geometrická primitiva
• úsečka (line) <line>
• obdélník (rectangle) <rect>
• kružnice (circle) <circle>
• elipsa (ellipse) <ellipse>
• polyčára (polyline) <polyline>
• polygon (polygon) <polygon>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Úsečka
• Tag <line>
• Povinné atributy: souřadnice obou vrcholů úsečky
(atributy x1, y1, x2 a y2)
<line x1="číselná hodnota" y1="číselná hodnota"
x2="číselná hodnota" y2="číselná hodnota" />
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Úsečka – příklady
<?xmlversion="1.0" encoding="UTF-8"?>
<!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd">
<svg width="200"
height="200"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- diagonální úsečkavykreslená implicitním stylem -->
<line x1="0" y1="0" x2="200"y2="200"/>
<!-- různobarevné vodorovné úsečky -->
<line stroke="red" stroke-width="4" x1="50" y1="20"x2="150"y2="20" />
<line stroke="blue" stroke-width="4" x1="50" y1="40" x2="150" y2="40" />
<line stroke="green" stroke-width="4" x1="50" y1="60" x2="150" y2="60"/>
<!-- různobarevné svislé úsečky -->
<line stroke="orange" stroke-width="4" x1="20" y1="50" x2="20" y2="150" />
<line stroke="yellow" stroke-width="4" x1="40" y1="50" x2="40" y2="150" />
<line stroke="green" stroke-width="4" x1="60" y1="50" x2="60"y2="150"/>
</svg>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Obdélník
• Tag <rect>
• Povinné atributy: souřadnice levého horního vrcholu
obdélníka (atributy x, y) a šířka (width) a výška
(height)
• Pokud chceme „zakulatit“ rohy obdélníka, přidávají
se atributy „rx“ a „ry“ – poloměr os elipsy
<rect x="číselná hodnota" y="číselná hodnota"
width="nezáporná číselná hodnota"
height="nezáporná číselná hodnota" />
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Obdélník – příklady
<?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="300"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- jednoduchý obdélník bez zakulacených rohů -->
<rect x="10" y="10" width="100" height="75" />
<!-- obdélník se zakulacenými rohy -->
<rect x="120" y="10" width="100" height="75" rx="20" stroke="red" stroke-width="2" fill="none" />
<!-- rozdílné poloměry zakulacení -->
<rect x="10" y="90" width="100" height="75" rx="30" ry="20" stroke="green" stroke-width="2" fill="none" />
<!-- rozdílné poloměry zakulacení -->
<rect x="120" y="90" width="100" height="75" rx="20" ry="30" stroke="blue" stroke-width="2" fill="none" />
<!-- co se stane, když je poloměr zaoblení moc velký? -->
<rect x="10" y="180" width="100" height="75" rx="100" stroke="#cccc00" stroke-width="2" fill="none" />
<!-- na co kružnice, vystačíme si s obdélníkem :-) -->
<rect x="120" y="180" width="100" height="100" rx="50" stroke="#80cc80" stroke-width="2" fill="none" />
</svg>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Kružnice
• Tag <circle>
• Povinné atributy: x souřadnice středu kružnice (cx),
y souřadnice středu kružnice (cy) a poloměr
kružnice (r)
• Pokud se nezadá x a y souřadnice středu kružnice,
automaticky se dosazuje 0
• Stejně jako obdélník, i kružnice může být vybarvena
(konstatní barvou, gradientní barvou, atd.)
3
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Kružnice – příklady
<?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="300"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- kružnice bez nastavených stylů -->
<circle cx="140" cy="140" r="50" />
<!-- kružnice bez nastavených stylů -->
<circle cx="60" cy="60" r="50" fill="#ffaaaa" stroke="black" stroke-width="4" />
<!-- kružnice s nastaveným stylem výplně a barvy obrysu -->
<circle cx="220" cy="60" r="50" fill="#aaffaa" stroke="black" stroke-width="4" />
<!-- kružnice s nastaveným stylem výplně a barvy obrysu -->
<circle cx="60" cy="220" r="50" fill="#ffffaa" stroke="black" stroke-width="4" />
<!-- kružnice s nastaveným stylem výplně a barvy obrysu -->
<circle cx="220" cy="220" r="50" fill="#aaffff" stroke="black" stroke-width="4" />
</svg>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Elipsa
• Tag <ellipse>
• Obdoba kružnice
• Povinné atributy: x souřadnice středu elipsy (cx), y
souřadnice středu elipsy (cy) a poloměr elipsy v ose
x (rx) a poloměr elipsy v ose y (ry)
• Pokud se nezadá x a y souřadnice středu elipsy,
automaticky se dosazuje 0
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Elipsa – příklady
<?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="300"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- kružnice vykreslená pomocí elipsy bez nastavených stylů -->
<ellipse cx="140" cy="140" rx="50" ry="50" />
<!-- elipsa s rozdílnými poloměry poloos -->
<ellipse cx="60" cy="60" rx="50" ry="30" fill="#ffaaaa" stroke="black" stroke-width="4" />
<!-- elipsa s rozdílnými poloměry poloos -->
<ellipse cx="220" cy="60" rx="50" ry="30" fill="#aaffaa" stroke="black" stroke-width="4" />
<!-- elipsa s rozdílnými poloměry poloos -->
<ellipse cx="60" cy="220" rx="30" ry="50" fill="#ffffaa" stroke="black" stroke-width="4" />
<!-- elipsa s rozdílnými poloměry poloos -->
<ellipse cx="220" cy="220" rx="30" ry="50" fill="#aaffff" stroke="black" stroke-width="4" />
</svg>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Polyčára
• Tag <polyline>
• Obdoba kružnice
• Povinné atributy: points (každý vrchol je v 2D zadán
dvojicí souřadnic, bývá dobrým zvykem tyto
souřadnice oddělovat čárkou)
• V případě, že by byl zadán lichý počet souřadnic,
jedná se o chybný SVG soubor (na druhou stranu
počet souřadnic 2 není považován za chybu)
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Polyčára – příklady
<?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="300"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- vykreslení domečku jedním tahem -->
<polyline fill="none" stroke="red" stroke-width="2"
points="100,250 200,250 100,150 100,250 200,150 100,150 150,100 200,150, 200,250" />
</svg>
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Polygon
• Tag <polygon>
• Obdoba polyčáry
<?xmlversion="1.0" encoding="UTF-8"?>
<!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- vykreslení domečku jedním tahem -->
<polygonfill="#8080ff" stroke="red" stroke-width="2"
points="100,250 200,250100,150100,250 200,150100,150150,100 200,150,200,250" />
</svg>
4
Laboratoř geoinformatiky a kartografie, Masarykova univerzita
Export vektorových dat z GIS platforem
• Možnost převést přímo z GIS platforem
– Např. ArcGIS, QuantumGIS, atd. podporují přímý export do SVG
– Další možností jsou převody mezi formáty bez použití GIS
aplikací – pomocí tzv. konvertorů (např. ogis2svg, shp2pgsql)
• Následně je možné upravit zdrojový kód s předchozími
znalostmi o SVG
• Jako vodítko slouží soubor jh_comment.svg