Tvorba a export SVG Cvičení 4 Z8144 Počítačová grafika v kartografii Jaro 2022 Filip Leitner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rozvrh Minimum 60% bodov 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Arcmap/ ArcGIS Pro od verze 10.X(Arcmap), defaultne (Pro) možnost exportu mapového pole (layout) do SVG Arcmap: File → Export Map (jako formát vybrat SVG), neexportuje ID ani atributy ArcGIS Pro: Share → Layout (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): " -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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Filip Leitner Tvorba a export SVG Počítačová grafika 12 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . JavaScript + externí SVG Pokud otevřete HTML soubor v prohlížeči přímo (např. poklikáním ve správci souborů nebo přetažením do okna prohlížeče), otevře se soubor pomocí file: protokolu a řada funkcí prohlížeče nebude fungovat, např. funkce fetch() nebo atribut .contentDocument pro SVG vložené přes element . Pro přístup k obsahu SVG pomocí .contentDocument budete potřebovat ke stránce přistupovat pomocí webserveru. http-server, Live Server VSC addon Filip Leitner Tvorba a export SVG Počítačová grafika 13 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . PRÁCA S SVG window.addEventListener("load", workFunction); function workFunction(){ const b = document.getElementById("test"); const svgdocument = b.contentDocument; // reference na SVG // const svgdocument = b.getSVGDocument(); // nebo takhle, oba způsoby jsou ekvivalentní const paths = svgdocument.getElementsByTagName("path"); } Filip Leitner Tvorba a export SVG Počítačová grafika 14 / 16 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3. úkol Vytvořte SVG obsahující vybrané administrativní celky (kraje, SO ORP, státy, apod.) z geografických dat. Soubor bude obsahovat jednotlivé územní celky a každý z těchto celků bude obsahovat i údaje o populaci (atribut ”data-population”). pro export do SVG použijte Mapshaper Odovzdajte aj príkaz (v prípade využitia webového rozhrania jednotlivé časti príkazu) ktorý na export použijete Zamyslite sa nad možnosťami optimalizácie načítaného SVG súboru. Vytvořte HTML soubor, který načte uložený SVG soubor a externí JS soubor, který s tímto bude pracovat. Vytvořte JS soubor, který bude mít následující funkcionalitu: Po click/hover udalosti na jedno z území se toto území obarví (zvolenou) barvou. Někde na stránce se zobrazí populace (nejlépe mimo SVG). Ostatní (zbylá) území se obarví odstínem použité barvy podle podobnosti populace na tomto území. Minimálne množstvo kategórií podobnosti = 4 tj. väčšie/menšie nestačí 2,4 týdne na vypracování, do 7. 4. včetně možno získat až 40 bodů úkol odevzdávejte jako archiv .zip Filip Leitner Tvorba a export SVG Počítačová grafika 15 / 16 Díky za pozornost! . . . . . . . . . . . . . . . . . . . .