如何从带有形状 ID 的 Adob​​e Illustrator 导出 .svg 文件？

平面设计 adobe-illustrator 网站设计 出口 svg
2022-01-24 20:14:56

我的问题很简单。

如何从 Adob​​e Illustrator 中导出带有形状 ID 的 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 的多边形和路径。

4个回答

感受你的痛苦。简短回答：AI SVG 导出是我需要治疗的原因之一。

长答案：我已经成功地从带有 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添加一个随机字符串..避免下划线字符，这是我可以肯定地说的。
  • 准备好其中一些将成为路径，而另一些将成为多边形，如上所示。因此，如果您要同时操作它们，请为它们分配一个“thisIsOneOfMyZones”类，例如使用 jQuery。那个hack是我迄今为止想出的最好的。如果您破解了导出中路径/多边形选择的秘密，请分享。
  • 给父组一个 id 可能会影响子节点 id 在 SVG 导出中的转换方式。无论如何，这是需要的，或者如果你想以编程方式操作这些至少很方便，我猜你正在这样做:)

为了给组和路径提供 ID，您必须在 Illustrator 中为它们命名。因此，如果您在 Illustrator 中有一个名为 my_layer 的图层和一个名为 my_path 的路径，并将它们保存为 svg，您将获得：

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

如果您没有在 Illustrator 中命名您的路径，它将使用随机 ID 保存它。如果您使用相同的名称命名路径和图层，Illustrator 将不得不更改其中之一，因为 id 必须是唯一的。

听起来您指的是这样的代码示例：

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

渲染：

在此处输入图像描述

除了上面提到的使用图层名称进行 ID 之外，我发现将我的形状/s 转换为复合路径很有用。

这会将多边形转换为路径，这可以使您的 CSS 更加统一。

在 Illustrator 中：对象> 复合路径> 制作

其它你可能感兴趣的问题
上一篇类似的标志 - 是否被盗？ 下一篇在 Photoshop 中创建几何菱形图案有哪些技巧？