Question

我有两个SVG图像，它们一起有大约8000行，并且由几个带渐变的形状组成。没有图案，过滤器，文本，只有带笔画的基本图形元素，简单或渐变填充。

目前，在生成HTML时，它们会内联到HTML中，因此源代码变得安静。这是否会降低动画的性能，因此最好以不同的方式嵌入svg？

嵌入svg时是否遵循一般的经验法则？

问候菲律宾

Answer 1

如果您使用HTML5 SVG标记嵌入SVG内联，这不仅会增加html文件大小，还会使DOM忙碌并且您的浏览器呈现器。

如果你使用iframe，你真的不知道它何时被加载或渲染，至少不是所有的浏览器。

HTML5为您提供JavaScript，可能是解决方案。只需等待身体load，然后注入SVG。

您可以使用body-onLoad或jQueries ready()-funktion

以下是jQuery中的完成方式：

<!DOCTYPE html>
<html>
<body>
<div id="svg-01" class="placeholder"></div>
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
    $("#svg-01").replaceWith('<svg><!--// some svg //--></svg>');
    });
</script>
</body>
</html>

我甚至会更进一步，而是将其替换为iframe和gziped SVG as described here.

性能问题内联SVG与嵌入或iframe

1 个答案: