Need SVG polygon paths AND color information

[joshp77656708]

Hello World - Simple question: How do I generate SVG code in Illustrator that includes both polygon path (x,y) coordinates AND color information?

1- The ONLY way 'human-readable' method I found to get polygon coordinates is going to Attributes, select 'Polygon' in Image Map, and adding a descriptor to the URL field. I then to go the Export>Save for Web (Legacy) and Preview the HTML. With the descriptor tab I put in the URL field in Attributes early, this is the only way I see all the polygon paths. I manually manipulate that into x,y coordinates for a graph. BUT color information is missing.

Example:

<area shape="poly" alt="" coords="164,200, 163,199, 162,197, 164,196, 166,196, 168,196, 166,199, 164,200" href="ANG_TEST">

2- Alternatively, I can just go to the Save as>SVG

I can preview the SVG code, which includes the color hex code, but I can't interpret any Polygon (x,y) paths in this code.

Example:

<path fill="#FEFEFE" d="M175.4,58.6c0,0,0.6,0.3,0.9,1.7c0.3,1.4,0.3,3.2,0.3,3.2s0.7,6.2-0.3,7.7c-1,1.5-6.5,0.8-6.5,0.8l-3.2-6.9

l-0.4-2.6C166.2,62.5,170.9,57.6,175.4,58.6z"/>

PLEASE HELP! Thanks.

[Monika Gause]

I don't understand what you expect.

The most modern code can be achieved via Asset export.

[joshp77656708]

Hey Monika - I'm using AI to try and get the simple X,Y coordinates and color information from polygons in an SVG and put tht in a table, like excel.

Example 1 gets me the X, Y coordinates. Example 2 only the color info. I can't pair the coordinates with the colors since I don't know which color goes with which polygon using these two different methods.

I'm not a coder and don't know how to manipulate the code in example 2. Maybe I'm missing something basic. thx

[Monika Gause]

You could try if the CSS-properties panel can give you that information.

If not, try the plugin Specctr

[joshp77656708]

Thx Monika - the CSS properties panel is a helpful tool I didn't know about. Specctr is cool but it replicates the same info. Neither provides all the polygon coordinates for an object, but I'm going to see if I can take the top left x, y pair that is provided for each object and match it with the complete polygon coordinates I get with the previous method I used. Manual labor, but maybe it will work.

thx again.

[CarlosCanto · Accepted solution]

joshp77656708  wrote

Example 1 gets me the X, Y coordinates. Example 2 only the color info. I can't pair the coordinates with the colors since I don't know which color goes with which polygon using these two different methods.

if you already added the URL attribute, it should be there when you save as svg as well. You can easily tell what's what.

<a xlink:href="ANG_TEST" >

<path id="ANG_TEST" style="fill:#FFF200;" d="M81.54,172.33l4.38-3.04l4.21,3.04l-3.79,5.13c0,0-4.29,1.04-5.46-0.38

C79.71,175.67,79.71,175.67,81.54,172.33z"/>

</a>

id="ANG_TEST" is the name of the polygon, you could use that as well

joshp77656708  wrote

I'm not a coder and don't know how to manipulate the code in example 2. Maybe I'm missing something basic. thx

<path id="ANG_TEST" style="fill:#FFF200;" d="M81.54,172.33l4.38-3.04l4.21,3.04l-3.79,5.13c0,0-4.29,1.04-5.46-0.38

C79.71,175.67,79.71,175.67,81.54,172.33z"/>

M81.54,172.33 are the coordinates of the first anchor

l4.38-3.04, are the relative coordinates you need to travel from previous anchor to get to next anchor

     i.e next x = 81.54+4.38 = 85.92

          next y = 172.33-3.04 = 169.29

if you find a lower case c (or s, perhaps other characters as well) it means the next anchor is a curved segment so the data includes the anchor and handle coordinates also relative to previous anchor

     i.e. c0,0-4.29,1.04-5.46-0.38

          current left handle x = 85.92 + 0 = 85.92

          current left handle y = 169.29 + 0 = 169.29

          next right handle x = 85.92 - 4.29 = 81.63

          next right handle y = 169.29 + 1.04 = 170.33

          next x = 85.92 - 5.46 = 80.46

          next y = 169.29 - 0.38 = 168.91

similarly, last portion with an Upper Case C are x,y coordinates for the handles and anchors

C79.71,175.67,79.71,175.67,81.54,172.33z

hope it helps

Carlos

[joshp77656708]

Thx for the math lesson Carlos! The polygon example helps me now understand how the "path math" works. It looks like some coding will have to come into play if there's more than a few polygons to work with. I'm thinking now is a good time to learn Python. You don't by chance know of any programs that parse the paths and convert them to the x,y coordinates? I'll be working with perhaps more than 100 polygons to plot per project. thx.

[CarlosCanto]

you can learn Python, or Javascript and pull the data in absolute coordinates straight from the art on the canvas.

but I googled that it's easier to have inkscape save your svg in absolute coordinates

"You can get Inkscape to use absolute path commands by changing the SVG Output preferences.

Edit -> Preferences -> Input/Output -> SVG output -> Path string format -> Absolute"

source

svg relative to absolute conversion - Stack Overflow

[tonyharmer]

Hey

When you're using the first method, you're outputting an image file, and the coordinates there relate to the image map code; that's what "Save for Web" does—it isn't an SVG.

The second method is describing the path coordinates (d specifies that a path is drawn) with the uppercase letter M denoting the start point of the path—it literally means "move to this location to start drawing". The lowercase letters then specify relative coordinates to the initial point.

So, you are getting both in option 2. You'll need to process the text though to use letters as a delimiter.

Or you could follow Monika's advice above, use the Asset Export panel and then open that in a text editor, where you'll get much more forgiving code formatting.

Hope that helps!

[joshp77656708]

thx Tony. The path info. generated in the SVG code is pretty dense. I read up on the path coordinates that AI creates and how it's literally a drawn path, not x,y coordinates. It's not the straightforward x,y image map code that I'm trying to export into excel.

I'll have to do my homework and learn more before I continue. Thx for the starting point. cheers!