Как экспортировать файл .svg из Adobe Illustrator с идентификаторами формы?

Чувство твоей боли. Краткий ответ: экспорт AI SVG является (одной из) причиной (причин), по которой мне нужна терапия.

Длинный ответ: я успешно экспортировал SVG из AI (CS6) с идентификаторами. Смотри ниже:

Превращается в:

<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 
        "/>

Однако есть несколько проблем:

• иногда ИИ просто добавляет случайную строку к этому идентификатору. Избегайте символа подчеркивания, вот что я могу сказать с уверенностью.
• будьте готовы, что некоторые из них станут путями, а некоторые станут полигонами, как вы видите выше. Итак, если вы манипулируете ими всеми сразу, назначьте им всем класс «thisIsOneOfMyZones», например, используя jQuery. Этот хак - лучшее, что я придумал до сих пор. Поделитесь, если вы взломали секрет выбора путей/полигонов в экспорте.
• Возможно, присвоение идентификатора родительской группе повлияет на то, как идентификаторы дочерних узлов будут преобразованы в экспорте SVG. Это необходимо в любом случае или, по крайней мере, удобно, если вы хотите манипулировать ими программно, что, я предполагаю, вы делаете :)

Чтобы дать идентификаторы группам и путям, вы должны дать им имена в Illustrator. Итак, если у вас есть слой с именем my_layer и путь с именем my_path в Illustrator, и вы сохраните их как svg, вы получите:

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

Если вы не назовете свой путь в Illustrator, он сохранит его со случайным идентификатором. Если вы назовете путь и слой одним и тем же именем, Illustrator придется изменить одно из них, так как идентификаторы должны быть уникальными.

Похоже, вы имеете в виду пример кода, подобный этому:

<?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>

Когда вы упоминаете «экспорт с идентификаторами формы», <g id="Layer_1">я бы посоветовал разместить фигуру на каждом именованном слое и сохранить ее как SVG. Ссылка: « Я сделал карту в AI, но размер файла ОГРОМНЫЙ как svg? »

Вы всегда можете экспортировать код, зайти в редактор кода и изменить идентификаторы.

Этот:

<?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>

Оказывает:

В дополнение к идентификатору с именем слоя, как указано выше, я обнаружил, что полезно преобразовать мои фигуры в составные пути.

Это преобразует полигоны в пути, что может сделать вещи более однородными для вашего CSS.

В Illustrator: «Объект» > «Составной контур» > «Создать».