シェイプIDを使用してAdobe Illustratorから.svgファイルをエクスポートする方法

8

私の質問はとても簡単です。

シェイプIDを使用してAdobe IllustratorからSVGファイルをエクスポートする方法 SVGとしてエクスポートすると、グループ名がグループ名をIDとするグループに変わります。これは、シェイプにも期待される動作ですが、シェイプには名前ではなくランダムなIDが割り当てられます...

望ましい出力の例：

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

何が悪いのですか？現在、Illustratorで名前を付けていますが、IDなしでポリゴンとパスを取得しています。

— チジュホ
ソース

8

あなたの痛みを感じます。短い答え：AI SVGエクスポートは、治療が必要な理由の1つです。

長い答え：IDを使用してAI（CS6）からSVGを正常にエクスポートしました。下記参照：

AIレイヤー名の例

になる：

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

ただし、いくつかの問題があります。

時にはAIがランダムな文字列をそのIDに追加するだけです。
上記のように、これらのいくつかはパスになり、いくつかはポリゴンになることに注意してください。したがって、それらを一度に操作する場合は、たとえばjQueryを使用して、すべてに「thisIsOneOfMyZones」のクラスを割り当てます。そのハックは私がこれまでに思いついた中で最高です。エクスポートでパス/ポリゴンの選択の秘密をハッキングする場合は、共有してください。
おそらく、親グループにIDを与えると、SVGエクスポートでの子ノードIDの変換方法に影響します。とにかくそれが必要です、またはこれらをプログラムで操作したい場合は少なくとも便利です。

— ラウリ108
ソース

でSVGファイルのパスIDの命名。| Adobeコミュニティ @ kenc3danは、数字以外の

— マットウィルキー2016年

3

グループとパスにIDを付けるには、IllustratorでIDに名前を付ける必要があります。したがって、Illustratorにmy_layerというレイヤーとmy_pathというパスがある場合、それらをsvgとして保存すると、次のようになります。

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

Illustratorでパスに名前を付けないと、ランダムなIDでパスが保存されます。パスとレイヤーに同じ名前を付けると、IDは一意である必要があるため、Illustratorはそれらの1つを変更する必要があります。

— ホルヘ
ソース

0

あなたはこのようなコードサンプルを参照しているように聞こえます：

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

結果として「シェイプIDを使用したエクスポート」について言及する場合<g id="Layer_1">、名前付きの各レイヤーにシェイプを配置し、SVGとして保存することをお勧めします。参照：「AIでマップを作成しましたが、ファイルサイズがsvgとして巨大ですか？」

いつでもコードをエクスポートして、コードエディターに移動し、IDを変更できます。

この：

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

レンダリング：

ここに画像の説明を入力してください

— DᴀʀᴛʜVᴀᴅᴇʀ
ソース

-1

上記のようにレイヤー名を使用してIDを付けることに加えて、形状を複合パスに変換すると便利です。

これにより、ポリゴンがパスに変換され、CSSの構成が少し均一になります。

Illustratorの場合：オブジェクト>複合パス>作成

— エックスレー
ソース