Convert SVG map path elements to XY coordinates

Question

I am working with SVG maps to plot some data. I need to obtain the XY coordinates of the map border which is described as SVG path elements.

Here is a path element I am working with

<path id="path9" fill="#FEFEE9" d="M920.059,219.437c0.127,1.93,0.201,3.877-0.029,5.803c-0.178,1.481-1.184,5.296-0.36,6.535
    c1.039,1.563,4.821,3.389,6.673,3.596c1.609,0.18,5.432-0.127,6.617,0.441c0.4,0.874-0.001,1.517-0.168,2.396
    c-0.069,0.37,0.633,3.127,0.752,3.716c1.961,1.148,3.784,2.506,5.716,3.698c1.087,0.67,2.413,1.076,3.386,1.913
    c0.365,0.314,0.62,0.738,0.922,1.109c-0.016,1.154,0.506,3.383,1.086,4.377c0.135,0.232,0.789,1.036,1.063,1.116
    c2.15,0.636,3.828-0.681,5.791-1.207c0.861-0.231,1.766-0.3,2.611-0.604c0.881-0.316,3.353-2.991,3.869-3.849
    c2.478-1.148,3.059-0.635,5.38-2.728c1.101-0.992,4.065-4.614,5.544-4.467c0.447,0.044,0.893,0.115,1.336,0.174
    c2.113,0.279,2.188,0.777,3.697,2.003c0.047,0.038,1.65,0.608,1.873,0.69c0.804-0.67,1.566-1.387,2.301-2.132l0.605-5.29
    c0.268-2.339,0.69-6.967,3.691-7.332c2.594-0.315,4.773,1.322,7.347,1.322c0.692,0,4.183-1.588,4.554-2.079
    c0.514-0.679,0.42-2.522,0.443-3.369c0.111-0.162,0.236-0.396,0.37-0.536c0.461-0.488,2.526-0.31,3.205-0.366
    c1.001-0.082,1.985-0.316,2.976-0.476l0.729-0.638c2.227-0.24,4.326-1.121,6.552-1.373c0.393-0.569,2.722-2.864,3.288-3.083
    c2.049-0.792,8.942-1.78,9.938-3.577c0.465-0.841-0.443-2.831,0.233-3.917c0.923,0.353,1.54,1.016,2.575,1.151
    c-0.166-1.493-1.109-2.96-0.582-4.482l1.215-0.951c1.877,0.542,3.863,0.518,5.793,0.69c1.293-0.857,4.697-2.529,6.225-1.804
    c1.408,0.668,0.947,4.653,3.629,5.542c0.715-0.29,1.691-1.052,1.951-1.8c-0.627-2.991-0.695-2.316-2.588-4.539l0.305-2.169
    l1.818-1.26l2.143-0.162c0.751,0.488,1.803,0.99,2.443,1.588c0.814,0.761,2.076,3.795,2.711,4.324
    c0.436,0.363,1.728,0.591,2.296,0.6c0.26,0.004,1.422-0.569,1.741-0.709l0.5-0.751c-0.501-0.794-1.596-1.51-2.432-1.917
    c-0.246-1.607-1.506-2.717-2.244-4.094l0.496-0.642l0.84-0.301c0.77,0.181,2.451,0.857,2.799,1.599
    c1.125-0.17,2.313-0.491,3.454-0.343c3.124,0.405,9.103,2.854,8.682,6.78c2.558,2.942,4.063,3.596,6.68,5.965
    c1.634,1.479,2.741,3.536,3.966,5.347c0.487,0.72,0.84,1.612,1.467,2.222c1,0.973,2.729,1.023,3.312,2.433.......//more elements//................z"/>

This is just a small snippet of the actual path element.

It contains a lot of 'c' and 'l' elements. The image is 1807x1331 px. I need to obtain the XY co-ordinates so that I can use the border to mark boundaries in my visualization. I am using Processing 2.0 for Visualization.

Can I convert the path elements to XY coordinates? Or is there any way to mark that border? Imagine I have to make cells (Voronoi cells) within the territory boundary. Currently they extend beyond the border since I can't confine them because I dont have the border coordinates.

Answer 1

You can use PShape's getVertexCount() and getVertex() methods:

for(int i = 0 ; i < yourPShape.getVertexCount(); i++) println("vertex["+i+"]:"+yourPShape.getVertex(i));

I encountered an error when using getVertex():

java.lang.ArrayIndexOutOfBoundsException: 2

so getVertex() might still be a bit buggy. Luckily getVertexX(),getVertexY() still work:

void setup(){
  PShape map = loadShape("Afghanistan_location_map.svg");
  size((int)map.width,(int)map.height);
  //fetch the border shape - peaked at the path name using Illustrator
  PShape border = map.getChild("path157");
  //manually traverse the path
  beginShape();
  for(int i = 0 ; i < border.getVertexCount(); i++){
    vertex(border.getVertexX(i),border.getVertexY(i));
  }
  endShape();
}

Note that you can have lines(l) and curves(c) so it's worth not just looking at the regular PShape reference but also the JavaDocs for functionalities you might need. Depending on how complex your svg is you need check the vertex code( VERTEX, BEZIER_VERTEX, CURVE_VERTEX, or BREAK).