Tvorba a export SVG Cvičení 4 Z8144 Počítačová grafika v kartografii Jaro 2020 Filip Leitner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rozvrh Minimum 60% bodov Odovzdanie vždy do 4.00 k danému dátumu Cvičenie 1 => do 16.3 4:00, Cvičenie 4 => 23.4 4:00 Filip Leitner Tvorba a export SVG Počítačová grafika 2 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Program pro tvorbu vektorové grafiky. Zvládá export do SVG i jiný formátů, včetně rastrového PNG. Filip Leitner Tvorba a export SVG Počítačová grafika 3 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1. úkol V Inkscape nakreslete obrázek, který bude obsahovat: obdélník elipsu spirálu lomenou čáru křivku Obrázek si uložte na disk. Filip Leitner Tvorba a export SVG Počítačová grafika 4 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2. úkol Obrázek si otevřete v textovém editoru a prozkoumejte jeho obsah. Podívejte se jakým způsobem jsou definovány jednotlivé tvary. Filip Leitner Tvorba a export SVG Počítačová grafika 5 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Export SVG Pro zobrazení na webu se hodí mapu z GIS exportovat do snadno zobrazitelného a programovatelného SVG. Filip Leitner Tvorba a export SVG Počítačová grafika 6 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . QGIS ve verzi 3.0+ Export do SVG v Layout Manageru – neumí ale export atributů :-( plugin SimpleSVG (exportuje id prvků do skupin – lze navázat na atributovou tabulku) Filip Leitner Tvorba a export SVG Počítačová grafika 7 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ArcGIS od verze 10.X možnost exportu mapového pole do SVG File → Export Map (jako formát vybrat SVG), neexportuje ID ani atributy Filip Leitner Tvorba a export SVG Počítačová grafika 8 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . mapshaper nástroj pro příkazovou řádku (lze použít i webovou verzi https://mapshaper.org/) umí export id i atributů! instalace pomocí node: npm install -g mapshaper mapshaper countries.shp -o countries.svg id-field=name svg-data=population,area Pokud název atributu obsahuje nestandardní znaky (povolená jsou malá písmena, čísla, podtržítko, spojovník; začínat může pouze písmenem nebo podtržítkem – regex /^[a-z_][a-z0-9_-]*$/), je třeba atributy „přejmenovat“ (zde na příkladu krajů ČR): ^^I-each "name = NAZEVKR; population = OB11; area = VYMERA" Výsledné SVG bude obsahovat v atributu id název státu a v atributech data-population, data-area odpovídající hodnoty atributů. Filip Leitner Tvorba a export SVG Počítačová grafika 9 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Načítání externího SVG viz http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_ tutorial#How_can_I_include_SVG_in_HTML5 Filip Leitner Tvorba a export SVG Počítačová grafika 10 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . SVG File

Filip Leitner Tvorba a export SVG Počítačová grafika 11 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .