Inkscape highlight different parts of a svg and manipulate the svg map in html

Question

Scenario : Want to provide rich graphical charts on a map of a particular city. Since I could not find the official svg version map for that city, I decided to try it myself.

I was able to get the official pdf map of the city and converted it to svg using inkscape. I want to be able to manipulate the map at district level. Using inkscape i can demarcate the boundaries of the districts further into sub-districts that I want to work on. I would then want to manipulate or work on these sub-districts.

The district levels are paths (in inkscape terminology).

a) In Inkscape, after choosing the edit nodes by path option , how can i split up the individual regions (districts further) so that they appear as paths. I was not able to achieve this split-up.

b) Given the svg, i then imported it to an html. How can i manipulate the svg dom for particular parts of that map ( like if i were to click on the sub-disctrict in a) be able to fetch the data for that region). Is this possible ? to manipulate different parts of the svg, if so hints/pointers on how to go about it will be appreciated.

Thanks!

PS: to the downvoter please explain your downvote.

EDIT : Adding information regarding research. It turns out after I had gone over to the other-side and played around with jvectormap and gotten what i need and came back to look at this ; the mistake that I had done was onClick() vs onclick() ( ..argh ). In any case adding the details here to show that it does work however I was not able to adjust the dimensions of the image and an alternative to the solution I will post below. PS: My experience with SVG is 2 days so based on my learning on manipulating images from my other solution i have the right svg in place. Perhaps @robert-longson could explain what is the difference between the svg output from inkscape vs that from svg-edit.

Pre-conditions :

1. Convert pdf to svg using inkscape
2. Select the nodes, break apart to convert text to paths (i did not do this before).

This is mostly for part b) I added an onclick event and painted the region i was interested in red. So if I were to load the svg from the browser as is (and load jquery) then the on clicking the selected region it works as expected.

Now if I were to load the svg as an image it does not work (which is where i gave up because i did not have my districts in the first place and there was no access to the svg dom ..duh!). The correct way it seems is to load it using the object tag.

Now if i were to try to load the image via html using the object tag it works.

However I am unable to adjust the dimensions of the image even after adjusting it in the svg tags or as suggested here

I have for now branched off to my other solution mostly because the highlighting of regions functionality is available in the excellent jvectormap library.

EDIT : This gist shows a svg made using inkscape. Open the same file in svg-editor and then look at the source ; there is some sort of conversion on the "path data" : the d attribute of path. And it is this converted output which finally works well in the svgto.jvectormap.

Answer 1

I was able to achieve what I needed as follows in short :

1. Convert SVG to PDF using Inkscape
2. Cut the nodes to get the path from the svg.
3. Break Apart the regions (district level) into paths using Inkscape.
4. Upload this svg to svg-edit tool
5. Use the svg from the tool in 4) to feed into a tool to convert svg to jvectormap here

6. Use generated jvectormap in html.

   For more details

   • The long version with video is available here.
   • The final output can be viewed here

Perhaps @RobertLongson could explain what is the difference between the svg output from inkscape vs that from svg-edit.

Answer 2

Another solution to use it in an Angular/JS App, i'm here using Typescript & the exported inskscape svg. First tag each element you want to manipulate in Inkscape using the tag label in Object Properties (not the id! if you want to use multiple map). Then get your svg object by tagname and get what matter for you, then add your listener :)

this.mySvg = svg.getElementsByTagName("svg")[0];
let myDom = this.mySvg.getElementsByTagName("*");
    for(let i=0; i < myDom.length; i++) {
      let label = myDom[i].getAttribute('inkscape:label');
      let style = myDom[i].getAttribute('style');
      if (label && style) {
           myDom[i].addEventListener("click", () => this.onClick(myDom[i], style));
      }
    }