Javascript 可视化:svg 地图的可接受大小?

发布于 2025-01-08 06:07:18 字数 235 浏览 0 评论 0原文

我正在尝试使用 Raphael.js 从 svg 文件制作地图。我的问题是原始地图非常详细。我想我必须减少 Illustrator 中的点数,但我不确定我必须将其推到什么程度。

您认为 svg 文件的可接受大小大致是多少?这个想法是在我提取路径并使用 Raphael.js 将它们可视化后,向地图添加一些交互性。

目前,该文件大约有 180 kb,包含大约 300 个多边形和 17,000 个点。

-詹斯

I'm trying to make a map from an svg file using Raphael.js. My problem is that the original map is quite detailed. I think I have to reduce the number of points in Illustrator, but I'm not sure how far I have to push it.

What would you, roughly, say is an acceptable size of the svg file? The idea is to add some interacitvity to the map once I extracted the paths and visualized them using Raphael.js.

At the moment the file, which holds about 300 polygons an 17.000 points, is about 180 kb.

-jens

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

萌逼全场 2025-01-15 06:07:18

如果您将网络服务器设置为压缩它所提供的内容(deflate 是最常见的算法),那么文件自然会被压缩,并且由于数据结构的重复,SVG 文件很容易压缩。

如果仍然太大,请考虑插图的目的是什么;有必要这么详细吗?

If you set your webserver to compress what it serves (deflate is the most common algorithm) then the file will be compressed as a matter of course, and SVG files compress readily thanks to the repetition of the data structure.

If it's still too big, consider what the purpose of the illustration is; does it need to be that detailed?

成熟稳重的好男人 2025-01-15 06:07:18

我最近遇到了类似的问题,但它是字母而不是地图。如果你看一下 SVG 的源代码,它看起来像这样......

M 0 0 L 1.29384945877 28.494585495 L 1.29384945877 28.494585495 ... 

所有这些额外的数字都是你不需要的精确度,你可以保留一到两位小数,它看起来会完全相同。我将它们移除并实现了 60-70% 的压缩。

您可以使用正则表达式替换来删除它们。

I encountered a similar problem recently, but it was letterforms instead of a map. If you take a look at the source code of the SVG it will look something like...

M 0 0 L 1.29384945877 28.494585495 L 1.29384945877 28.494585495 ... 

All those extra digits are preciseness you don't need, you can get away with one or two decimals and it will look exactly the same. I removed them and achieved 60-70% compression.

You can remove them with a regex replace.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文