Figma导出的SVG在网页上显示错位，如何解决？

设计师振岚提问于 2026-02-06 12:24:34 阅读 56

工具

最近在用Figma导出SVG图标到项目里，但发现有些图标在页面上显示位置总是不对，比如文字和图形不在同一水平线。我按设计稿导出的SVG尺寸是24×24，但实际渲染时却溢出容器了。

我尝试用JS动态插入SVG，设置了width/height样式，但没用：


const svgContainer = document.getElementById('icon-wrapper');
const svgUrl = 'path/to/icon.svg';

fetch(svgUrl)
  .then(response => response.text())
  .then(svgData => {
    const parser = new DOMParser();
    const svg = parser.parseFromString(svgData, 'image/svg+xml').documentElement;
    svg.setAttribute('style', 'width:24px;height:24px');
    svgContainer.appendChild(svg);
  });

检查原始SVG代码发现有viewBox属性，但数值和设计稿画板尺寸不一致。是不是Figma导出时需要特别设置？或者代码里需要处理viewBox和尺寸的关系？

我来解答赞 6 收藏

反馈

2 条解答

令狐永穗 Lv1

这问题我太熟了，Figma导出SVG的坑我踩过无数次。核心问题就是：你看到的“24x24”是设计稿尺寸，但Figma导出的SVG里 viewBox 和 width / height 属性经常不一致，导致浏览器按 viewBox 算比例时错位或溢出。

先看下你导出的 SVG 源码开头是不是长这样：

如果不是，比如 viewBox 是 “0 0 24.5 24.5” 或者 width/height 没写、或者 viewBox 宽高和设计稿不一致，那渲染肯定跑偏。

解决办法分两步：

1. 在 Figma 里导出时，手动选 SVG 并导出为 SVG（不是 Export as SVG），然后在弹窗里把单位改成 px，宽高锁死 24x24，再点 Export。或者更稳妥的做法是：在 Figma 里把图层放进一个 24x24 的 frame，再导出 frame，这样 viewBox 几乎肯定就是 0 0 24 24。

2. 如果 SVG 已经导出来了，viewBox 不准，直接手动改源码：
- 删除
- 或者把 viewBox 改成整数：比如 0 0 24 24
- 然后在插入 DOM 后，显式设置 viewBox 属性，而不是只靠 style：

fetch(svgUrl)

  .then(response => response.text())

  .then(svgData => {

    const parser = new DOMParser();

    const svg = parser.parseFromString(svgData, 'image/svg+xml').documentElement;

    svg.setAttribute('viewBox', '0 0 24 24'); // 关键！强制修正 viewBox

    svg.setAttribute('width', '24');

    svg.setAttribute('height', '24');

    svgContainer.appendChild(svg);

  });

别用 style 覆盖 width/height，SVG 里 width/height 是属性不是样式，style 会被 viewBox 比例压垮。

另外提醒一句，如果 SVG 里有元素，Figma 有时会把字体转成路径，也可能导致视觉错位，这种情况可以打开 Figma 的 “Convert text to paths” 勾选（导出设置里），确保文字是路径不是文本节点。

最后，如果改完 viewBox 还有问题，贴出 SVG 源码前 10 行，我帮你直接看是哪块参数崩了。

2026-02-23 18:15

书生シ家轩 Lv1

Figma导出的SVG显示错位，大概率是 viewBox 和实际尺寸没对齐。省事的话直接在导出的SVG标签上加 preserveAspectRatio="xMidYMid meet"，再配合 width 和 height 设置成 1em 或具体像素。这样在网页上会按比例居中对齐，不会溢出容器。

如果不想改SVG内容，代码里也可以动态处理，比如：

fetch(svgUrl)

  .then(response => response.text())

  .then(svgData => {

    const parser = new DOMParser();

    const svg = parser.parseFromString(svgData, 'image/svg+xml').documentElement;

    svg.setAttribute('width', '24');

    svg.setAttribute('height', '24');

    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');

    svgContainer.appendChild(svg);

  });

2026-02-06 13:01