我可以优化html页面中重复的SVG元素吗

Question

我在html页面上使用内联<svg>作为图标。我有一个组件可以渲染一个表，通常有数百行。在这种情况下，表的每一行都有相同的内联svg。通常它们都是简单的图标，只有几个路径，但这让我想知道是否有办法优化它。在这种情况下，内联很重要，我不想引用任何外部文件。有没有办法让我只拥有一次内联svg，并在其他地方引用同一个元素？这是我应该担心的事情吗？重复内联svg的开销最小吗？

Answer 1

如果有数百个带有一个SVG的表行，那么它们都是必须复制/重复的(SVG(DOM元素。HTML中没有等效的SVGsuse(您可以使用自定义元素自己构建(

如果性能真的是一个问题，您需要测试创建SVG服务器端(SSR(是否比创建SVG客户端更好(在您的用例中(。。。但你可能在说微秒。。

自定义元素图标注册器(我最喜欢的项目之一(创建所有使用的SVG图标客户端
(您可以从7000+个图标中挑选(

或者，如果所有的SVG都是100%重复的，那么只需一个带有本地JS cloneNode的行就足够了。

或者创建一个非常简单的IconMember，在W3C标准自定义元素
中注册，以获得干净的语义HTML：
(所有现代浏览器都100%支持，所有框架都支持…除React外(

<style>
svg-icon svg {
--size: 120px;
width: var(--size);
height: var(--size);
}
[bg=blue] svg{
width:1px;
}
[bg=yellow] svg{
width:5px;
}
</style>
<h3>Who is afraid of Red, Yellow and Blue</h3>
<svg-icon bg="red"    ></svg-icon>
<svg-icon bg="yellow" ></svg-icon>
<svg-icon bg="blue"   ></svg-icon>
<script>
customElements.define( "svg-icon", class extends HTMLElement {
connectedCallback() {
this.innerHTML =
`<svg xmlns='http://www.w3.org/2000/svg'>` +
`<rect width='100%' height='100%' fill='${this.getAttribute("bg")}'/>` +
`</svg>`;
}});
</script>