Figma导出的SVG在网页中显示不一致怎么办？

诸葛艳平提问于 2026-03-03 21:40:20 阅读 10

工具

我从Figma导出SVG图标后，放到项目里发现颜色和间距跟设计稿对不上，明明在Figma里看起来没问题。试过直接复制SVG代码和下载文件两种方式，结果都一样。

比如这个按钮的样式，Figma里是纯黑#000000，但网页里看起来偏灰，而且上下还有奇怪的空白：

.icon {
  width: 24px;
  height: 24px;
  fill: #000000;
  display: inline-block;
}

是不是导出设置有问题？还是需要额外处理SVG的viewBox或者overflow属性？

我来解答赞 2 收藏

反馈

1 条解答

码农红瑞 Lv1

颜色问题通常是SVG内部硬编码了 fill 或 opacity，删掉它们改用 currentColor 才能通过CSS控制。空白是 inline-block 的基线对齐导致的，加个 vertical-align: middle 搞定。

.icon {

  width: 24px;

  height: 24px;

  fill: currentColor;

  vertical-align: middle;

  display: inline-block;

}

2026-03-03 22:07