: How to export .svg file from Adobe Illustrator with shape IDs? 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

@Nimeshi706

In addition to IDing with the layer name as noted above I have found it's useful to convert my shape/s into compound paths.

This will convert Polygons to Paths which can make things a bit more uniform for your CSS.

In Illustrator: Object> Compound Path> Make

Vote Up Vote Down

@Ann6370331

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:



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 :)

Vote Up Vote Down

@Carla748

In order to give ID's to groups and paths, you have to give them names in Illustrator. So, if you have a layer called my_layer and a path called my_path in Illustrator and you save them as an svg, you will get:

<g id='my_layer'>
<path id='my_path' d='...#coordinates...' />
</g>


If you don't name your path in Illustrator, it will save it with a random id. If you name the path and the layer with the same name, Illustrator will have to change one of them, as id's must be unique.

Vote Up Vote Down

@Smith574

Sounds like you are referring to a code sample like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 713 956" enable-background="new 0 0 713 956" xml:space="preserve">
<g id="Layer_1">
<path fill="#F1F2F2" stroke="#000000" stroke-miterlimit="10" d="M472.5,359.6c-82,0-148.5-66.5-148.5-148.5
c0-16.7,2.8-32.8,7.9-47.9c-9.4-1.1-18.9-1.6-28.5-1.6c-138.9,0-251.5,112.6-251.5,251.5s112.6,251.5,251.5,251.5
s251.5-112.6,251.5-251.5c0-25.1-3.7-49.3-10.5-72.2C523.1,352.9,498.6,359.6,472.5,359.6z"/>
</g>
<g id="Layer_2">
<circle fill="#E6E7E8" stroke="#000000" stroke-miterlimit="10" cx="488.3" cy="638.9" r="148.5"/>
</g>
<g id="Layer_3">
</g>
</svg>


When you mention "export with shape IDs" to result in <g id="Layer_1"> I would advise placing a shape on each named layer and saving it as SVG. Reference: "I made a map in AI, but the file size is HUGE as an svg?"

You could always export the code and go into a code editor and modify the IDs.

This:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<g id="jjjuho">
<polygon id="manItsMonday" style="fill:#ED3B95;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;" points="157,515.3 157,408.3180,385.1 180,369.3 248,369.3 248,391.3 266,391.3 266,402.3 393,402.3 393,513.3 "/>
</g>
</svg>
</div>


Renders:

Vote Up Vote Down