• November 18, 2017, 06:17:04 PM
• Welcome, Guest. Please login or register.
Did you miss your activation email?

Author Topic: Worldmap SVG - Path data  (Read 993 times)

0 Members and 1 Guest are viewing this topic.

Offline Dubey

  • Newbie
  • *
  • Posts: 1
Worldmap SVG - Path data
« on: May 27, 2017, 05:18:43 AM »
Hello everyone

I have come here with a lot of hope so would really be grateful if anyone could help me out. I am very new to Inkscape and SVG’s as well in fact but looking to get some information for getting a task done.

So basically I have a worldmap svg that has borders of different countries. When I edit that svg using a text editor (or the XML editor in Inkscape), I can see a “<g><path d="M 680.05 528.24C 680.05 527.48 681.35 526 ..</g></path>” inside it. I believe this is the path data that displays all the borders. On using the path tool in Inkscape and clicking on the map, I can see the full path showing (see screenshot attached).
Screen Shot 2017-05-27 at 11.42.47.png
*Screen Shot 2017-05-27 at 11.42.47.png
(315.65 kB . 1796x1020)
(viewed 78 times)

All I am looking to do is get path data (“<g><path d="M ..</g></path>”) only for a selected country within this map, so I could highlight it with a different color (with the help of CSS) and use it on the web.

Apologies if it doesn’t make a lot of sense but please let me know if I need to provide any more information. Once again, any help will be very much appreciated.

Thanks a lot.

Offline brynn

  • Administrator
  • *****
  • Posts: 226
  • Country: us
  • Gender: Female
    • Inkscape Community
Re: Worldmap SVG - Path data
« Reply #1 on: May 27, 2017, 01:38:39 PM »
Welcome to the forum!

It makes sense up to a point.  And after that, editing the SVG in a text editor, and using CSS, is over my head.  I understand the concept, and have been toying with trying it myself someday.  But never having done it, I couldn't offer many suggestions or warn about pitfalls.

But I can probably give you the next few steps.  Unfortunately, being unfamiliar with XML in a deep way, I'm not sure how the file is made.  In your screenshot, it looks like all the paths are subpaths of one huge compound path.  However, I'm pretty sure <g> means Group.  So possibly you have ungrouped everything, to be able to show all the paths?  Or maybe you entered the group?

If you can provide the SVG file, I can tell you exactly what to do.  If not, I'll explain about both situations (although might be more confusing for you).

Edit
I notice there's no boundary between US and Canada (including Alaska).  Just fyi in case you want to look for a different map?
  • 0.92.2

Offline brynn

  • Administrator
  • *****
  • Posts: 226
  • Country: us
  • Gender: Female
    • Inkscape Community
Re: Worldmap SVG - Path data
« Reply #2 on: May 27, 2017, 01:53:33 PM »
Just re-reading your message.  You can get different colors for the countries without using CSS.  But if you want it interactive, like for example, changing color on mouseover, then you need CSS or JS or something else.
  • 0.92.2