Tvorba a export SVG Cvičení 4 Z8144 Počítačová grafika v kartografii Jaro 2019 Šimon Leitgeb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol 1. úkol 2. úkol Inkscape Program pro tvorbu vektorové grafiky. Zvládá export do SVG i jiný formátů, včetně rastrového PNG. Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol 1. úkol 2. úkol 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. Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol 1. úkol 2. úkol 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. Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol QGIS ArcGIS mapshaper Export SVG Pro zobrazení na webu se hodí mapu z GIS exportovat do snadno zobrazitelného a programovatelného SVG. Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol QGIS ArcGIS mapshaper QGIS ve verzi 3.0+ Export do SVG v Layout Manageru – neumí ale export atributů :-( ve verzi 2.X plugin simpleSVG (měl by zvládat také export atributů) Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol QGIS ArcGIS mapshaper ArcGIS od verze 10.X možnost exportu mapového pole do SVG File → Export Map (jako formát vybrat SVG) Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol QGIS ArcGIS mapshaper mapshaper nástroj pro příkazovou řádku instalace pomocí node: npm install -g mapshaper mapshaper countries.shp -o countries.svg id-field=name Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol JavaScript + externí SVG Načítání externího SVG viz http://edutechwiki.unige.ch/en/Using_SVG_with_ HTML5_tutorial#How_can_I_include_SVG_in_HTML5 Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol JavaScript + externí SVG SVG File Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol JavaScript + externí SVG Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol JavaScript + externí SVG JavaScript + externí SVG window.addEventListener("load", workFunction, false); function workFunction(){ const b = document.getElementById("test"); const svgdocument = b.contentDocument; // reference na SVG svgdocument = b.getSVGDocument(); // nebo takhle, oba způsoby jsou ekvivalentní→ const paths = svgdocument.getElementsByTagName("path"); } Šimon Leitgeb Tvorba a export SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inkscape Export SVG Načítání externího SVG Domácí úkol 3. úkol 3. úkol Vytvořte mapový SVG soubor s několika oblastmi (např. kraje ČR). Soubor by měl odpovídat mapovým pokladům. Způsob tvorby ponechám na vás. Soubor bude obsahovat jednotlivé územní celky a každý z těchto celků bude obsahovat i údaje o populaci (atribut ”population”). 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 kliknutí na jedno z území se toto území obarví (zvolenou) barvou. Někde na stránce se zobrazí populace. Ostatní (zbylá) území se obarví odstínem použité barvy podle podobnosti populace na tomto území. 2 týdny na vypracování, 27. 3. konzultační hodina možno získat až 40 bodů úkol odevzdávejte jako jeden HTML soubor nebo archiv .zip Šimon Leitgeb Tvorba a export SVG Díky za pozornost! https://discord.gg/UHTPUDU . . . . . . . . . . . . . . . . . . . .