我通过 Sketch 导出了四个内联 SVG 的代码，具有相同的笔触宽度和颜色，但一个 SVG 在浏览器和 Codepen 的浏览器中行为不规则。
代码笔示例
所有SVG的笔触宽度为"2"，但是，Twitter svg需要笔画宽度为"4">才能获得相同的效果(适用于Chrome，Firefox和Safari(
-所有 SVG 通过 stroke="#999999" 是相同的颜色：
- 我的项目直接通过Chrome和Firefox查看：Twitter SVG笔画是正确的颜色
-
Chrome 和 Firefox 上的 Codepen 示例：Twitter 图标明显更亮，笔画显示为 #c2c2c2
Safari 上的个人项目和 Codepen 示例：Twitter SVG 笔画在 Codepen 和我的个人项目中呈现为 #c2c2c2
"解决方案"...
通过在 twitter svg 的">rect"标签中将 fill="#999999" 更改为fill="#fff">，svg 在 Safari 中正常显示。Chrome 和 Firefox 在没有此"修复"的情况下都呈现了正确的颜色，因此不受影响。
此修复程序适用于我的代码笔示例中的 Safari 以及从源代码查看时。但是，Chrome 和 Firefox不会正确呈现代码笔示例，无论是否应用此修复程序，而两者都从源代码、修复或不修复中正确呈现 Twitter svg。
我的解决方案现在有效，但我不明白为什么它有效。任何见解都非常感谢！
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>
如果您希望一组<svg>元素在给定相同的笔触宽度时看起来相似，则需要确保它们的viewbox-es 相等。在您的示例中，每个视图框都会缩放以适合提供的width和height。
例如，在Illustrator(这是我使用的(中，"画板"与viewbox匹配。因此，每当我开始为 Web 项目创建一组图标时，我要做的第一件事就是确保它们的所有画板大小相同。实际上，我通常从包含不同图层中的每个图标的同一画板导出所有内容。
我相信你可以在Sketch中实现同样的目标。如果没有，请找到任何其他允许您修改<svg>的视图框以使其匹配的工具。
作为旁注，您可能想看看大量的图标字体在线编辑器和创建者(Glypther，Icomoon，Fontello等(，但这并不能保证解决您的问题。它们会自动调整图标大小并居中，有些允许您在保存字体之前调整/摆弄它，但就个人而言，我从未尝试过将具有不同 viebox-es 的<svg>添加到同一集中。
问题是否仍然存在取决于导入的完成方式。如果他们在导入时统一图标之间的视图框大小，缩放图标以适合，它将解决您的问题。但这并不意味着上述任何工具都可以做到这一点。他们应该，恕我直言。