自动内联Adobe Illustrator SVG类

Question

我正在开发一个Laravel项目，其中SVG图标文件被包含在Blade模板中。文件中的每个SVG都由b定义。我将个人图标渲染为：

NaN。

这很好用，但SVG是使用Adobe Illustrator制作的，它们有自动生成的类，例如NaN，<symbol>。这些类包含<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>或.st0等属性。例如：

.st1。

此文件中有如此多的SVG，泛型类互相覆盖（有70多个fill类）。我可以通过手动将类分解为属性来解决问题。

stroke

我不熟悉SVG和设计工具，也不拥有Adobe Illustrator许可证。我所拥有的只是这个庞大的SVG文件。我手动做了什么工具？是否有一个工具（如CSS内联器）自动内联生成的类？

Answer 1

从Illustrator中保存时，在svg选项中

，在CSS属性菜单中选择样式属性。这样插图画家会将样式直接内嵌到标签

Answer 2

您的说明明显违反了CSS规则。任何符合标准的编辑器都会解释CSS级联，选择某个类的最后一个样式规则将会获胜。

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

1. 使用Inkscape打开文件，该文件可免费使用。

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

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

   在一个简短的测试中，我只是触发了样式的内联，并且令人惊讶地为具有相同类的元素提供了不同的填充属性，就像AI所预期的那样。

4. 另存为“普通SVG”。