I have been looking for automatic ways to turn nations on a map into their own objects so that they can be clicked on a website. We had done this before with simple shapes but now wanted to do it for each state/county in a nation and we didn't want everything being straight lines 😅. Since this process was on a large scale I wanted the process of making the clickable shapes easier since doing it manually was tedious and caused some minor inaccuracy.
I had tried to do this with the boolean operators initially by having a map filled in and a map that had the lines on the inside and then using the difference operator between them. However, this did not cause the results I expected...
@Polygon I followed what you did and it worked pretty great! However I am wondering if there is any way to make it so the shapes perfectly fit into each other since turning the strokes into paths causes a gap between the parts.
@Polygon that works amazingly but I noticed that some of the parts are still in single shapes because the paths are not perfectly connected at the ends to each other.
Although this is still much less effort than doing it all manually though so thanks I'll be using it!
Yeah - stroke ends should snap to lines and with the right snapping setting it´s a "snap". Checking a complex map is no fun but easier when View->Display mode->Outline is enabled.
@Polygon your steps have worked incredibly! I have now converted all of our map but now there is the oppisite problem! Is it possible to do the reverse of the proccess you showed?
Beginners' Questions Turning a map's nations into their own objects
Inkscape.org
I have been looking for automatic ways to turn nations on a map into their own objects so that they can be clicked on a website. We had done this before with simple shapes but now wanted to do it for each state/county in a nation and we didn't want everything being straight lines 😅. Since this process was on a large scale I wanted the process of making the clickable shapes easier since doing it manually was tedious and caused some minor inaccuracy.
I had tried to do this with the boolean operators initially by having a map filled in and a map that had the lines on the inside and then using the difference operator between them. However, this did not cause the results I expected...
For reference it was meant to look like:
I had also tried it with all the other boolean operators and also cut path but they also did not work. The svg for it is here: https://github.com/Coca162/SvMedia/blob/2c831abcc62d11a0cbb2723c15ef5486ddbf3265/Districts/Voopmont/counties.svg
I will also provide some other svgs for reference:
These have been manually turned into objects already:
Not yet turned into individual objects:
Note: If you want to download these from github you have to click on "Raw" and then right-click to save as
In essence you need to:
1. turn every stroke into a color filled shape with Path->Stroke to Path
2. make it "one whole thing" with Path->Union
3. to separate everything go now Path->Break Apart.
4. select the biggest shape which is most likely on top; give it another fill color and send it into the background
5. Now you have a access to all separate parts of the map for individual design
@Polygon I followed what you did and it worked pretty great! However I am wondering if there is any way to make it so the shapes perfectly fit into each other since turning the strokes into paths causes a gap between the parts.
Yeah - not as intuitive as it could get but doable:
@Polygon that works amazingly but I noticed that some of the parts are still in single shapes because the paths are not perfectly connected at the ends to each other.
Although this is still much less effort than doing it all manually though so thanks I'll be using it!
Yeah - stroke ends should snap to lines and with the right snapping setting it´s a "snap". Checking a complex map is no fun but easier when View->Display mode->Outline is enabled.
@Polygon your steps have worked incredibly! I have now converted all of our map but now there is the oppisite problem! Is it possible to do the reverse of the proccess you showed?