【问题标题】:Is SVG practical for highly complex illustrations on the web?SVG 对于网络上高度复杂的插图是否实用?
【发布时间】:2025-12-28 10:35:11
【问题描述】:

我正在开发一个网络应用程序,该应用程序使用大量复杂的大型图像作为背景和前景插图。我倾向于使用 SVG 而不是光栅图形,因为它的可扩展性和它允许的动态交互。但是一些较大的图像非常复杂(数千条路径,在 Inkscape 中绘制)。

使用这种尺寸的 SVG 图像(在性能方面)有多实用?与使用 PNG 图像相比,它会使我的页面显着变慢吗?是否有特定的技术(例如,一种嵌入方法优于另一种)会影响下载和渲染速度?

【问题讨论】:

  • 当然,渲染这种复杂的矢量图会比渲染位图慢,但它是否以可接受的速度渲染取决于很多事情。为什么不在本地设置 Web 服务器,将 SVG 图像添加到页面上,然后在各种浏览器中尝试呢?这会让你知道加载/渲染时间是否适合您。
  • 我已经开发了这个网站,它使用基于重蒙版视差的背景 SVG,但是当我建立新部分时,它开始像地狱一样滞后......我认为 SVG 不适合复杂的布局......跨度>

标签: image web-applications graphics web svg


【解决方案1】:

您可以简化路径数据以适应您的视口大小。 一些不可见的元素不应该输出到 DOM 树。 谷歌地图也使用 SVG 并且运行良好。

【讨论】:

  • 如何将不可见元素保留在 DOM 树之外?