有没有工具可以自动将Adobe Illustrator SVG类内联？

Question

我正在处理一个Laravel项目，在一个Blade模板中包含了一个SVG图标文件。该文件中的每个SVG都由<symbol>定义。我将单个图标呈现为：<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>。

这很好用，但是SVG是用Adobe Illustrator制作的，它们有一些自动生成的类，如.st0，.st1等。这些类包含属性，如fill或stroke。例如：.st0{fill:#2595FF;} <line class="st2" x1="27.8" y1="80.5" x2="39" y2="80.5"/>。

这个文件中有很多SVG，通用的类互相覆盖（有70多个.st0类）。我可以通过手动将类分解成属性来解决这个问题。

`.st0{fill:#2595FF;}`
`<line fill="#2595FF" x1="27.8" y1="80.5" x2="39" y2="80.5"/>`

我不是很精通SVG和设计工具，也没有拥有Adobe Illustrator的许可证。 我只有这些大量的SVG文件。 是否有一个可以自动完成我手动完成的工具？ 是否有像CSS内联器一样的工具，可以自动将生成的类内联？

- adnauseam

---

我理解的对吗，文件是一个带有多个<symbol>元素的.svg文件？在该文件中，样式定义在哪里？是否有多个style元素？ - ccprog

是的。这是一个在一对<svg>标签之间有许多<symbol>标签的单个文件。在每个<symbol>之间，都有<style>标签来定义特定的SVG。我意识到我想要的就像用于HTML电子邮件的HTML <style>内联器。我尝试将我的SVG代码放入其中一个，但它没有起作用。 - adnauseam

Answer 1

在从Illustrator保存时的SVG选项中，选择CSS属性菜单中的样式属性。这样，Illustrator将直接将样式内联到标记中。

- Yaroslav Cherednikov

Answer 2

您的描述明显违反了CSS规则。任何符合规范的编辑器都会解释CSS级联规则，并选择最后一个选择特定类的样式规则。

幸运的是，你遇到的并不都是符合标准的。 您可以尝试以下操作

1. 使用Inkscape打开文件，它是免费的。

2. 打开“编辑” -> “XML编辑器”。 在左侧树视图中，选择根svg元素。

3. 在右侧属性视图中，单击任何属性行。 在较低部分，向右单击“设置”按钮。

   在我刚刚进行的短暂测试中，触发了样式的内联，并惊人地提供了具有相同类的元素的不同填充属性，这正是AI所期望的。

4. 保存为“普通SVG”。

- ccprog