VS 代码不是从 illustrator 读取 SVG 文件代码，而是来自 Figma？答案

【问题标题】：VS code isn't reading SVG file code from illustrator but it is from Figma?VS 代码不是从 illustrator 读取 SVG 文件代码，而是来自 Figma？
【发布时间】：2021-05-28 15:18:17
【问题描述】：

我正在用 VS 代码构建一个 React 网站。

我从 Figma 获得了一个 SVG，我将代码复制并粘贴到我的组件中，它工作得很好，这是 Figma svg 代码：

`<svg width="1440" height="363" viewBox="0 0 1440 363" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5" stroke="#D96ED4" strokeOpacity="0.1" strokeWidth="10"/>
</svg>`

然后我从 Adobe Illustrator 导出了一个类似的 SVG，它根本不起作用，这是 Illustrator 代码：

`<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="269.3px" height="70.3px" viewBox="0 0 269.3 70.3" style="enable-background:new 0 0 269.3 70.3;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#E900DB;stroke-width:3;stroke-miterlimit:10;}
</style>
<path class="st0" d="M3.5,17.8c33.8,21.8,106.2,84.9,158.8,19.1s92.3-13,103.5-19.1"/>
</svg>`

我尝试将选择导出为 SVG，并抓取在 illustrator 中将其保存为 SVG 后弹出的代码，我得到了相同的代码。

如果我用浏览器打开 svg 就可以了。

我正在使用 Illustrator 2021，我没有 Figma 或者我只会使用它，显然 Adobe 代码有问题，有人知道如何正确导出它吗？

提前致谢

【问题讨论】：

标签： svg adobe-illustrator figma

【解决方案1】：

想通了。

当我像我一样尝试将 SVG 导入 JSX 时，一旦图像在 Illustrator 中准备好，单击文件 -> 导出 -> 导出为 -> 在“另存为类型”下拉列表中选择 svg -> 导出然后新建一个弹出窗口将出现在样式选择演示属性中，而不是内部 css -> 单击显示代码，嘿，您的代码将出现，供您复制并粘贴到您的项目中 -> 然后不要像我一样浪费 6 小时的生命做了。

【讨论】：

React 不喜欢 xmlns:xlink，class 应该是 className 等等。很高兴你知道如何用属性替换 css。