使用颜色的类名从 Illustrator 导出 SVG

Question

我在一个插画文件中内置了大约 200 个图标。我正在尝试找出一种方法将颜色设置为类名，而不是十六进制值，以便将类名分配给对象，以便可以更轻松地使用 CSS 更改它。

例如，这是我到目前为止能够导出的：

<svg id="Iconography" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path id="Compound_Path" data-name="Compound Path" d="M19.34,14.68A1,1,0,0,1,18,16l-6-6L6,16a1,1,0,0,1-1.35-1.34L11.29,8a1,1,0,0,1,1.42,0Z" fill="#707070"/></svg>

但我希望 fill="#707070" 为 fill="colorIconPrimary"，因为导出并手动更改后打开每个 svg 非常费力（加上某些图标可能有多种颜色）

Answer 1

此脚本可以将“d:mp”文件夹中所有 svg 文件中的

fill="#707070"

替换为

fill="colorIconPrimary"

:

var folder = Folder("d:/tmp");
var files = folder.getFiles("*.svg");

for (var i=0; i<files.length; i++) {
    var f = File(files[i]);
    f.open("r");
    var contents = f.read();
    f.close();
    contents = contents.replace(/fill="#707070"/g, 'fill="colorIconPrimary"')
    f.open("w");
    f.write(contents);
    f.close();
}

Answer 2

在 Illustrator 中，任何将 fill 或 lines 颜色设置为 RGB 黑色 (#000000) 的元素将在导出时不带任何样式属性。

因此，当内联使用时，SVG 中的这些元素将继承您在 CSS 中定义的任何内容

svg#iconography {
  fill: blue;
  stroke: red;
}

此方法也适用于外部引用的 SVG 片段（一个可缓存 SVG 文件中的多个图标）。更多信息可以在这里找到

Answer 3

Illustrator 中无法正常保存图标也总是让我很恼火，所以我创建了一个简单的 Python 脚本，可以自动对所有图标执行此操作

https://github.com/mattervisualizer/AI-SVG-Beautifier

祝你好运！