1

For example, I can open this image to Photoshop and select, let's say, Europe, with any selection tool. Then I need to export/save/see that selection as coordinates. As in the, <polygon points="343,754,274,725,314,709,374,702" />. Please, any tips?

worldMap

3
  • Do File > Export > Save as SVG... open the exported document in a text editor and you should be able to find the shape data.
    – jeffjenx
    Jun 7, 2022 at 13:13
  • @JeffJenkins Thank you for your answer. I tried that, it doesn't work. The code created is of this form link. Nowhere in there coordinates are displayed. Unless you have a way to convert that into coordinates.
    – Cain
    Jun 7, 2022 at 13:39
  • 1
    The embedded base64 content is an image/png MIME type. That means it is a raster image which means there aren't coordinates for you to extract. It is all just pixel data. You will need to open the file and trace the shapes to capture new coordinates based on your document size.
    – jeffjenx
    Jun 7, 2022 at 14:06

1 Answer 1

2

Found a way to do this quite quickly actually.

  1. Downloaded GIMP. From there I made my selection and convert my selection to path. There is a little button for that down to the right.
  2. Then exported the path (right click it) and open it with a text editor like Notepad++.
  3. Copy the <path ... />. Delete any Id and other unnecessary styles it has in it. Usually, its a lot of lines of code. You can use this instead of .

And that's it. If you want to make it even more flashy you can use something like

    `path {
         fill: transparent;
         transition: all .3s ease-in-out;
         box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
     }
     path:hover {
         stroke-width: 2;
         stroke: black;
         box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 65px;
         transform: translate3d(0px, -3px, 0px);
     }`

to your CSS files.

2
  • Well done. But this is not a polygon. This is a path. A polygon contains straight lines only. A path has curves and additional points respectively and the quite different logic to describe the coordinates. If you mean a path it can be done with Adobe Illustartor as well: make a path from the selection in Photoshop, save the path as ai-file, open in Illustrator (or copy-paste the path directly into Illustrator) and save as svg-file. Jun 9, 2022 at 16:56
  • To be honest I didn't know that that was the difference so thanks for the response. But what I needed was a way to highlight the hovered area and path can do that too just like polygons so it worked in that matter.
    – Cain
    Jun 14, 2022 at 8:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.