Need SVG polygon paths AND color information

Question

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.

CarlosCanto · Accepted Answer

joshp77656708 wroteExample 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.id="ANG_TEST" is the name of the polygon, you could use that as welljoshp77656708 wroteI'm not a coder and don't know how to manipulate the code in example 2. Maybe I'm missing something basic. thxM81.54,172.33 are the coordinates of the first anchorl4.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.29if 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.91similarly, last portion with an Upper Case C are x,y coordinates for the handles and anchorsC79.71,175.67,79.71,175.67,81.54,172.33zhope it helpsCarlos

tonyharmer · Answer

HeyWhen 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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded