规范化SVG图标和Web字体

Question

我有一堆SVG格式的图标，由我的图形设计师提供给我。这些图标将用于应用程序和网站。在网站上使用它们时，我想到了优化它们将它们转换成Web字体。由于我已经在使用grunt，我决定使用grunt webfont插件。它将所有内容转换为网络字体，我可以使用＆＃39; font-size＆＃39;轻松调用它。属性。 但是，我现在遇到了几个问题：

1. 似乎所有图标的基线都不一样。有些看起来远远超过常规基线，而有些则低于常规基线。请参见下面的截图：

2. 在某些情况下，使用字体时，它们似乎会在元素下方添加额外的空间，从而扰乱间距。这似乎与line-height / font-size属性有关。如果我缩小字体大小，额外的间距会消失，但在这种情况下，字体图标几乎不可见。我通过在父容器上使用overflow：hidden来解决这个问题：

3. 最后，与其他图标相比，某些图标显得更轻/更小。

经过调查，我发现了问题 - 源SVG文件的大小不同。如图所示，有些甚至在图形周围有白色框或白色空间。

上面给出，有没有办法可以：

1. 将所有文件规范化为相同大小而不编辑源SVG（例如使用Illustrator或Inkscape）
2. 确保所有图标具有相同的基线
3. 从SVG文件中删除图标周围的白色/空白框。

可以在不使用插件编辑源文件的情况下实现上述目标，还是必须单独编辑每个文件？

提前谢谢。

Answer 1

我真的不知道咕噜声，但也许the svg-sprite plugin正是你要找的。

或者，您可以为它制作batch process in illustrator。我假设在Inkscape中有类似的选项。

以下是您可以在Illustrator CC中使用的操作示例，针对第1点和第2点。将其保存到myActions.aia，然后将其导入Illustrator＆gt; Actions窗口＆gt ; ▸选项面板＆gt; Load Actions...。

/version 3
/name [ 12
	416c69676e2b726573697a65
]
/isOpen 1
/actionCount 1
/action-1 {
	/name [ 10
		616c69676e2b53697a65
	]
	/keyIndex 0
	/colorIndex 0
	/isOpen 1
	/eventCount 3
	/event-1 {
		/useRulersIn1stQuadrant 0
		/internalName (adobe_selectAll)
		/localizedName [ 10
			53656c65637420416c6c
		]
		/isOpen 0
		/isOn 1
		/hasDialog 0
		/parameterCount 0
	}
	/event-2 {
		/useRulersIn1stQuadrant 0
		/internalName (ai_plugin_alignPalette)
		/localizedName [ 9
			416c69676e6d656e74
		]
		/isOpen 0
		/isOn 1
		/hasDialog 0
		/parameterCount 1
		/parameter-1 {
			/key 1954115685
			/showInPalette 4294967295
			/type (enumerated)
			/name [ 21
				566572746963616c20416c69676e20426f74746f6d
			]
			/value 6
		}
	}
	/event-3 {
		/useRulersIn1stQuadrant 0
		/internalName (adobe_commandManager)
		/localizedName [ 16
			416363657373204d656e75204974656d
		]
		/isOpen 0
		/isOn 1
		/hasDialog 0
		/parameterCount 3
		/parameter-1 {
			/key 1769238125
			/showInPalette 4294967295
			/type (ustring)
			/value [ 30
				46697420417274626f61726420746f20617274776f726b20626f756e6473
			]
		}
		/parameter-2 {
			/key 1818455661
			/showInPalette 4294967295
			/type (ustring)
			/value [ 21
				46697420746f20417274776f726b20426f756e6473
			]
		}
		/parameter-3 {
			/key 1668114788
			/showInPalette 4294967295
			/type (integer)
			/value 2164261256
		}
	}
}