Google Chrome 是否缓存渲染 SVG？如果不是，我们应该如何优化 SVG 以进行 Chrome 渲染？

Question

问题

live site is here，在 Webflow 中创建。当您将鼠标悬停在菜单项上时，背景图像会通过将其他背景设置为 0% 不透明度并将此背景设置为 100% 不透明度来更改。我的问题是第一个 SVG（标题为“390 KB SVG”），它有大约 1,000 个元素。

在 Firefox、Edge 和 Internet Explorer 中，这个相对较大的 SVG 会被渲染一次，然后缓存以在每次之后立即显示。 在 Chrome 中，每次悬停事件都会强制重新渲染相同的 SVG，每次花费 150 毫秒 (i5-8600K) 到 600 毫秒 (i5-6200U) 之间。

我们能否以某种方式在 Chrome 中启用渲染 SVG 缓存？或者提高 SVG 的整体渲染性能？ 较小的 SVG 在 Chrome 中的渲染速度足够快。

我已经尝试过的

SVG 是从 Adob​​e Illustrator CC 2019 导出的 2500 像素 x 1250 像素、1 精度的 SVG。Adobe Illustrator 的原始输出为 762 KB。我已经将有问题的 762 KB SVG 优化到了 390 KB：

1. 在增加画板大小as described here后将精度降低到 1。

2. Used SVGOMG 删除几乎所有元数据。

3. Used Vecta.IO's SVG Nano tool 进一步缩小和压缩。

4. Used SVGito 重复使用相同的路径。

虽然它的渲染速度肯定比初始输出快，但在较慢的系统上渲染仍需要约 500 多毫秒。

我还尝试了更改背景的其他方法，例如 display: none 或者，不是通过 0% 不透明度来隐藏背景，而是只有 1% 不透明度：bt 即使在 1% 时，Chrome 也需要重新渲染将其从 1% 提高到 100% 的不透明度。

SVG 代码及其调用方式

SVG 的代码可以在这里查看：https://codepen.io/TG2-/pen/EBXEGO

SVG 是通过 Javascript 调用的，就像这样，使用 Webflow's built-in JavaScript（称为“Interactions IX2”）：

            }, {
                "id": "a-11-n-7",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f59"
                    },
                    "value": 0,
                    "unit": ""
                }
            }, {
                "id": "a-11-n-8",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f60"
                    },
                    "value": 1,
                    "unit": ""
                }
            }]

预期结果：

1) 将鼠标悬停到第一个菜单项（“390 KB SVG”）应该会在 Chrome 中相对立即（最好在 50 毫秒以下）更改背景图像

（*通过缓存渲染的 SVG，就像其他浏览器一样，或者通过提高 Chrome 中的渲染性能）

实际结果：

1) 悬停到第一个菜单项（“390 KB SVG”）会将背景图像在 200 毫秒后更改为 600 毫秒，具体取决于用户 CPU 的速度。

---

解决方案（感谢 Kaiido 和 Paul LeBeua）

将 SVG 图案更改为 SVG 填充。这是使用模式的旧 SVG：

<style>
        <![CDATA[.B {
            fill: url(#C)
        }

        .C {
            fill: url(#B)
        }

        .D {
            fill: url(#A)
        }

        .E {
            fill: url(#E)
        }

        .F {
            fill: url(#D)
        }

        ]]>
    </style>
    <defs>
        <pattern id="A" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#7c26cc" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="B" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b45ffe" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="C" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b9b9b9" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="D" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e1e1e1" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="E" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e3d3ed" d="M0 0h3v3H0z" />
        </pattern>

这是新的 SVG，使用填充：

<style><![CDATA[.B {
    fill: #b9b9b9
}

.C {
    fill: #b45ffe
}

.D {
    fill: #7c26cc
}

.E {
    fill: #e3d3ed
}

.F {
    fill: #e1e1e1
}

]]></style>

Answer 1

@Kaiido 的直觉似乎是正确的。它似乎与该 SVG 中 <pattern> 元素的使用有关。如果您将该 SVG 中的 CSS 更改为直接使用颜色，则 SVG 的渲染速度会更快。

例如：您需要做的就是将图案中的颜色复制到相关样式中：

.A { fill: #7c26cc; }

等

这里使用模式没有任何意义。