10

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.

Improve this question
0

4 Answers 4

Reset to default
12

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 :)
Improve this answer
1
4

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.

Improve this answer
0

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:

enter image description here

Improve this answer
0
-1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.