Advertisement


How to export .svg file from Adobe Illustrator with shape IDs?


Question

My question is very simple.

How to export an SVG file from Adobe Illustrator with shape IDs? When I export as SVG my group names turn to groups with group name as ID, that's the behavior I would expect from shapes too, but my shapes just get some random ID instead of their name...

example of desired output:

<g id="liikkeet">
        <polygon id="s281" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3     180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3   "/>
</g>

What am I doing wrong? Currently I get polygons and paths without IDs though I have named them in Illustrator.

2014/09/16
1
8
9/16/2014 2:41:00 PM

Feeling your pain. Short answer: AI SVG export is (one of) the reason(s) I need therapy.

Long answer: I've successfully exported SVG from AI (CS6) with id's. See below:

an example of AI layer names

Turns into:

<g id="ZONES">
<path id="Zone3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M756.485,373.758l-1.764,8.361l16.43,3.908l-0.426,2.34
    l6.586,1.164l0.533-2.439l26.047,5.664L789.667,464.4l-10.812-2.232l-3.975,18.355l11.258,2.34l-5.574,26.797l-1.59-0.379
    l-13,69.334l11.33,2.646l1.67-8.312l37.164-186.996L756.485,373.758z M558.887,341.28l92.963,19.719l-0.625,6.619l18.766,3.914
    l2.24-6.494l57.076,11.744l1.832-9.164l-170.873-34.653L558.887,341.28z"/>
<path id="Zone4" fill="none" stroke="#000000" stroke-miterlimit="10" d="M434.33,427.335c-0.429-1.498-0.982-3.717-1.175-5.787
    c-0.233-2.526-0.146-5.851-0.074-7.606l0.062-1.478l-24.606-1.399l-88.614-59.936l-23.902,34.039l-11.858,17.166l38.417,25.742
    L316.31,543.08l14.66,0.7l4.754-102.191l48.545-14.975l50.645,2.746L434.33,427.335z"/>
<polygon id="Zone8" fill="none" stroke="#000000" stroke-miterlimit="10" points="675.512,441.043 661.075,418.389 
    670.225,371.531 651.227,367.615 641.927,414.635 619.298,429.342 551.059,415.363 546.972,433.756 774.876,480.521 778.86,462.17 
        "/>

A few problems though:

  • sometimes AI just add a random string to that id.. avoid the underscore character, is what I can say with certainty.
  • be prepared that some of these will become paths, and some become polygons, as you see above. So, if you're manipulating them all at once, assign them all a class of "thisIsOneOfMyZones", for example using jQuery. That hack is the best I've come up with so far. Please share if you hack the secret of paths/polygons choice in the export.
  • Possibly, giving the parent group an id will affect how the child node id's are translated in the SVG export. That's needed anyway, or at least convenient if you want to manipulate these programmatically, which I'm guessing you're doing :)
2015/02/12
8
2/12/2015 1:58:00 AM